From dfead23a53b73edb8c7a6ecc3de8ea9d4e258785 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Mon, 6 Mar 2023 21:45:33 +0100 Subject: [PATCH] NotificationStore --- src/App.tsx | 5 ++++- src/components/Login.tsx | 26 +++++++++++++++++++++++++- src/components/Profil.tsx | 24 +++++++++++++++++++++++- src/services/NotificationStore.ts | 31 ++++++++++++++++++++++++++----- 4 files changed, 78 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 68b8cc6..2a39eaa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,16 +27,18 @@ import Burger, Stack } from '@mantine/core'; -import { ModalsProvider } from '@mantine/modals'; import { NotificationsProvider } from '@mantine/notifications'; import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications'; import DogNavbar from './components/DogNavbar'; import PasswordChange from './components/PasswordChange'; +import { eNotif, useNotificationStore } from "./services/NotificationStore"; const App: React.FC = () => { const {data, error, isLoading, mutate} = useSWR("/user", getUser); const [opened, setOpened] = useState(false); + const { AddNotification } = useNotificationStore(); + console.log('App getUser'); console.log(data); @@ -48,6 +50,7 @@ const App: React.FC = () => mutate(); notificationSuccess('Abgemeldet!'); console.log('userLogout'); + AddNotification({type: eNotif.success, msg: 'Logout erfolgreich!'}); window.location.href = '/dog/'; } diff --git a/src/components/Login.tsx b/src/components/Login.tsx index bacce5c..a55b940 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -5,8 +5,9 @@ import {getUser, loginUser} from '../services/PhpApi' import useSWR from 'swr'; import { PasswordInput, Stack, TextInput } from '@mantine/core'; import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications'; +//import { eNotif, useNotificationStore } from "../services/NotificationStore"; - + const Login = () => { const [formData, setFormData] = useState({ @@ -15,6 +16,7 @@ const Login = () => }); // only for redirect const {data, error, isLoading, mutate} = useSWR("/login", getUser); +// const { AddNotification, DeleteNotification, queue } = useNotificationStore(); //const navigate = useNavigate(); console.log('Login getUser'); console.log(data); @@ -32,8 +34,30 @@ const Login = () => if(data.success) { +// AddNotification({type: eNotif.success, msg: 'Login erfolgreich!'}); window.location.href = '/dog/'; } + + // if(queue.length > 0) + // { + // console.log('queue'); + // console.log(queue); + // const not = queue[queue.length-1]; + + // switch (not.type) { + // case eNotif.success: + // notificationSuccess(not.msg); + // break; + // case eNotif.error: + // notificationError(not.msg); + // break; + // case eNotif.alert: + // default: + // notificationAlert(not.msg); + // } + // DeleteNotification(); + // } + const onChangeInput = (e: React.FormEvent) => { diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index 7b0c7d6..f47ca89 100644 --- a/src/components/Profil.tsx +++ b/src/components/Profil.tsx @@ -7,7 +7,8 @@ import CreateQr from '../services/CreateQr'; import Img from './Img'; import './InputForm.css'; import { TextInput } from '@mantine/core'; -import { notificationError, notificationSuccess } from '../services/Notifications'; +import { notificationAlert, notificationError, notificationSuccess } from '../services/Notifications'; +//import { eNotif, useNotificationStore } from "../services/NotificationStore"; type TFormData = { @@ -34,6 +35,7 @@ function Profil() // data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!; +// const { DeleteNotification, queue } = useNotificationStore(); if (error) return (
failed to load
); @@ -51,6 +53,26 @@ function Profil() console.log('Profil user'); console.log(user); + // if(queue.length > 0) + // { + // console.log('queue'); + // console.log(queue); + // const not = queue[queue.length-1]; + + // switch (not.type) { + // case eNotif.success: + // notificationSuccess(not.msg); + // break; + // case eNotif.error: + // notificationError(not.msg); + // break; + // case eNotif.alert: + // default: + // notificationAlert(not.msg); + // } + // DeleteNotification(); + // } + if(data.data.qr_code === null && document.getElementById("canvas") != null) { // qrcode generieren und in der Datenbank speichern diff --git a/src/services/NotificationStore.ts b/src/services/NotificationStore.ts index 00b8526..3607856 100644 --- a/src/services/NotificationStore.ts +++ b/src/services/NotificationStore.ts @@ -1,9 +1,30 @@ +import { EnumDeclaration, EnumType } from 'typescript' import { create } from 'zustand' +export enum eNotif +{ + success = 0, + error, + alert +} +export type TNotification = +{ + type: eNotif; + msg: string; +} + +interface State +{ + queue: TNotification[], + AddNotification(n: TNotification): void, + DeleteNotification(): void +} + +export const useNotificationStore = create((set) => ( +{ + queue: [], + AddNotification: (not: TNotification) => set((state) => ({queue: [...state.queue, not]})), + DeleteNotification: () => set((state) => ({queue: [...state.queue.splice(-1)]})) +})); -const useNotificationStore = create((set) => ({ - bears: 0, - increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })), - removeAllBears: () => set({ bears: 0 }), -})) \ No newline at end of file