NotificationStore

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/';
   }

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<HTMLInputElement>) => 
     {

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 (<div>failed to load</div>);
@@ -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

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<State>((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 }),
-}))