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>

src/app/splash.tsx

@@ -7,15 +7,17 @@ import { useStorage } from '@libs/storage/provider';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { useActivities } from '@stores/activities';
+
 import { useNostr } from '@utils/hooks/useNostr';
 
 export function SplashScreen() {
   const { db } = useStorage();
   const { ndk } = useNDK();
-  const { fetchUserData, prefetchEvents } = useNostr();
+  const { fetchUserData, fetchActivities, prefetchEvents } = useNostr();
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [errorMessage, setErrorMessage] = useState<null | string>(null);
+  const setActivities = useActivities((state) => state.setActivities);
 
   const skip = async () => {
     await invoke('close_splashscreen');
@@ -29,20 +31,20 @@ export function SplashScreen() {
     try {
       const user = await fetchUserData();
       const data = await prefetchEvents();
+      const activities = await fetchActivities();
 
       if (user.status === 'ok' && data.status === 'ok') {
+        // set activities
+        setActivities(activities);
+        // update last login = current time
         await db.updateLastLogin();
+        // close splash screen and open main app screen
         await invoke('close_splashscreen');
-      } else {
-        setIsLoading(false);
-        setErrorMessage(user.message);
-        console.log('fetch failed, error: ', user.message);
       }
     } catch (e) {
       setIsLoading(false);
-      setErrorMessage(e);
-      await message(`Something wrong: ${e}`, {
-        title: 'Lume',
+      await message(e, {
+        title: 'An unexpected error has occurred',
         type: 'error',
       });
     }
@@ -75,15 +77,14 @@ export function SplashScreen() {
           ) : (
             <div className="mt-2 flex flex-col gap-1 text-center">
               <h3 className="text-lg font-semibold leading-none text-white">
-                Something wrong!
+                An unexpected error has occurred
               </h3>
-              <p className="text-sm text-white/50">{errorMessage}</p>
               <button
                 type="button"
                 onClick={skip}
                 className="mx-auto mt-4 inline-flex h-10 w-max items-center justify-center rounded-md bg-white/10 px-8 text-sm font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20"
               >
-                Skip
+                Skip this step
               </button>
             </div>
           )}

src/shared/accounts/active.tsx

@@ -6,6 +6,8 @@ import { useStorage } from '@libs/storage/provider';
 import { AccountMoreActions } from '@shared/accounts/more';
 import { Image } from '@shared/image';
 
+import { useActivities } from '@stores/activities';
+
 import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
@@ -16,6 +18,8 @@ export function ActiveAccount() {
   const { status, user } = useProfile(db.account.pubkey);
   const { sub } = useNostr();
 
+  const addActivity = useActivities((state) => state.addActivity);
+
   useEffect(() => {
     const filter: NDKFilter = {
       '#p': [db.account.pubkey],
@@ -30,6 +34,8 @@ export function ActiveAccount() {
     };
 
     sub(filter, async (event) => {
+      addActivity(event);
+
       switch (event.kind) {
         case NDKKind.Text:
           return await sendNativeNotification('Mention');

src/stores/activities.ts

@@ -0,0 +1,27 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+interface ActivitiesState {
+  activities: null | Array<NDKEvent>;
+  setActivities: (events: NDKEvent[]) => void;
+  addActivity: (event: NDKEvent) => void;
+}
+
+export const useActivities = create<ActivitiesState>()(
+  persist(
+    (set) => ({
+      activities: null,
+      setActivities: (events: NDKEvent[]) => {
+        set(() => ({ activities: events }));
+      },
+      addActivity: (event: NDKEvent) => {
+        set((state) => ({ activities: [event, ...state.activities] }));
+      },
+    }),
+    {
+      name: 'activities',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);