implement notification page (#8)

src/hooks/useNotfication.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useEffect, useMemo } from "react"
+import { useNotificationStore } from "./useNotificationStore"
+import { getNotificationGroups } from "@/api/notification-group"
+import { getNotification } from "@/api/notification"
+import { NotificationContextProps } from "@/types"
+
+const NotificationContext = createContext<NotificationContextProps>({});
+
+interface NotificationProviderProps {
+    children: React.ReactNode;
+    withNotifier?: boolean;
+    withNotifierGroup?: boolean;
+}
+
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children, withNotifier, withNotifierGroup }) => {
+    const notifierGroup = useNotificationStore(store => store.notifierGroup);
+    const setNotifierGroup = useNotificationStore(store => store.setNotifierGroup);
+
+    const notifiers = useNotificationStore(store => store.notifiers);
+    const setNotifier = useNotificationStore(store => store.setNotifier);
+
+    useEffect(() => {
+        if (withNotifierGroup)
+            (async () => {
+                try {
+                    const ng = await getNotificationGroups();
+                    setNotifierGroup(ng);
+                } catch (error) {
+                    setNotifierGroup(undefined);
+                }
+            })();
+        if (withNotifier)
+            (async () => {
+                try {
+                    const n = await getNotification();
+                    setNotifier(n);
+                } catch (error) {
+                    setNotifier(undefined);
+                }
+            })();
+    }, [])
+
+    const value: NotificationContextProps = useMemo(() => ({
+        notifiers: notifiers,
+        notifierGroup: notifierGroup,
+    }), [notifiers, notifierGroup]);
+    return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>;
+}
+
+export const useNotification = () => {
+    return useContext(NotificationContext);
+};

src/hooks/useNotificationStore.ts

@@ -0,0 +1,18 @@
+import { NotificationStore } from '@/types'
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+export const useNotificationStore = create<NotificationStore, [['zustand/persist', NotificationStore]]>(
+    persist(
+        (set, get) => ({
+            notifiers: get()?.notifiers,
+            notifierGroup: get()?.notifierGroup,
+            setNotifier: notifiers => set({ notifiers }),
+            setNotifierGroup: notifierGroup => set({ notifierGroup }),
+        }),
+        {
+            name: 'notificationStore',
+            storage: createJSONStorage(() => localStorage),
+        },
+    ),
+)