update notification

src/app/notifications/index.tsx

@@ -1,28 +1,16 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
-import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
 import { NotiMention } from '@app/notifications/components/mention';
 import { NotiReaction } from '@app/notifications/components/reaction';
 import { NotiRepost } from '@app/notifications/components/repost';
 
-import { useStorage } from '@libs/storage/provider';
-
-import { LoaderIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 
-import { useNostr } from '@utils/hooks/useNostr';
+import { useActivities } from '@stores/activities';
 
 export function NotificationScreen() {
-  const { db } = useStorage();
-  const { fetchActivities } = useNostr();
-  const { status, data } = useQuery(
-    ['notifications', db.account.pubkey],
-    async () => {
-      return await fetchActivities();
-    },
-    { refetchOnWindowFocus: false }
-  );
+  const activities = useActivities((state) => state.activities);
 
   const renderItem = useCallback(
     (event: NDKEvent) => {
@@ -37,7 +25,7 @@ export function NotificationScreen() {
           return null;
       }
     },
-    [data]
+    [activities]
   );
 
   return (
@@ -47,14 +35,7 @@ export function NotificationScreen() {
           <TitleBar title="Activities in the last 24 hours" />
           <div className="flex h-full flex-col gap-1.5">
             <div className="flex h-full flex-col">
-              {status === 'loading' ? (
-                <div className="flex h-full w-full items-center justify-center">
-                  <div className="flex flex-col items-center gap-1.5">
-                    <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                    <p className="text-sm font-medium text-white/50">Loading</p>
-                  </div>
-                </div>
-              ) : data?.length < 1 ? (
+              {activities?.length < 1 ? (
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <p className="mb-1 text-4xl">🎉</p>
                   <p className="font-medium text-white/50">
@@ -62,7 +43,7 @@ export function NotificationScreen() {
                   </p>
                 </div>
               ) : (
-                data.map((event) => renderItem(event))
+                activities.map((event) => renderItem(event))
               )}
             </div>
           </div>