Notification batch updates and notifications page update

hooks/firebase/useDeleteNotification.ts

@@ -0,0 +1,37 @@
+import {useMutation, useQueryClient} from "react-query";
+import {useAuthContext} from "@/contexts/AuthContext";
+import firestore from "@react-native-firebase/firestore";
+import {Notification} from "@/hooks/firebase/useGetNotifications";
+
+export const useDeleteNotification = () => {
+    const queryClient = useQueryClient();
+    const {user} = useAuthContext();
+
+    return useMutation({
+        mutationFn: async (id: string) => {
+            await firestore()
+                .collection("Notifications")
+                .doc(id)
+                .delete();
+        },
+        onMutate: async (deletedId) => {
+            await queryClient.cancelQueries(["notifications", user?.uid]);
+
+            const previousNotifications = queryClient.getQueryData<Notification[]>(["notifications", user?.uid]);
+
+            queryClient.setQueryData<Notification[]>(["notifications", user?.uid], (old) =>
+                old?.filter((notification) => notification?.id! !== deletedId) ?? []
+            );
+
+            return {previousNotifications};
+        },
+        onError: (_err, _deletedId, context) => {
+            if (context?.previousNotifications) {
+                queryClient.setQueryData(["notifications", user?.uid], context.previousNotifications);
+            }
+        },
+        onSettled: () => {
+            queryClient.invalidateQueries(["notifications", user?.uid]);
+        },
+    });
+};

hooks/firebase/useGetNotifications.ts

@@ -17,6 +17,7 @@ interface NotificationFirestore {
 }
 
 export interface Notification {
+    id: string;
     creatorId: string;
     familyId: string;
     content: string;
@@ -40,11 +41,14 @@ export const useGetNotifications = () => {
                 const data = doc.data() as NotificationFirestore;
 
                 return {
+                    id: doc.id,
                     ...data,
                     timestamp: new Date(data.timestamp.seconds * 1000 + data.timestamp.nanoseconds / 1e6),
                     date: data.date ? new Date(data.date.seconds * 1000 + data.date.nanoseconds / 1e6) : undefined
                 };
             });
-        }
+        },
+        refetchOnWindowFocus: true,
+        staleTime: 60000,
     });
 };