refactor account store + much smoother collection listing updates

hooks/store/collections.tsx

@@ -6,12 +6,10 @@ import toast from "react-hot-toast";
 const useCollections = () => {
   return useQuery({
     queryKey: ["collections"],
-    queryFn: async (): Promise<{
-      response: CollectionIncludingMembersAndLinkCount[];
-    }> => {
+    queryFn: async (): Promise<CollectionIncludingMembersAndLinkCount[]> => {
       const response = await fetch("/api/v1/collections");
       const data = await response.json();
-      return data;
+      return data.response;
     },
   });
 };
@@ -21,11 +19,11 @@ const useCreateCollection = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (data: any) => {
+    mutationFn: async (body: any) => {
       const load = toast.loading(t("creating"));
 
       const response = await fetch("/api/v1/collections", {
-        body: JSON.stringify(data),
+        body: JSON.stringify(body),
         headers: {
           "Content-Type": "application/json",
         },
@@ -34,14 +32,18 @@ const useCreateCollection = () => {
 
       toast.dismiss(load);
 
-      return response.json();
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
     },
     onSuccess: (data) => {
       toast.success(t("created"));
       return queryClient.setQueryData(["collections"], (oldData: any) => {
-        return {
-          response: [...oldData.response, data.response],
-        };
+        console.log([...oldData, data]);
+
+        return [...oldData, data];
       });
     },
     onError: (error) => {
@@ -55,33 +57,43 @@ const useUpdateCollection = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (data: any) => {
+    mutationFn: async (body: any) => {
       const load = toast.loading(t("updating_collection"));
 
-      const response = await fetch(`/api/v1/collections/${data.id}`, {
+      const response = await fetch(`/api/v1/collections/${body.id}`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify(data),
+        body: JSON.stringify(body),
       });
 
       toast.dismiss(load);
 
-      return response.json();
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
     },
     onSuccess: (data) => {
       {
         toast.success(t("updated"));
         return queryClient.setQueryData(["collections"], (oldData: any) => {
-          return {
-            response: oldData.response.map((collection: any) =>
-              collection.id === data.response.id ? data.response : collection
-            ),
-          };
+          return oldData.map((collection: any) =>
+            collection.id === data.id ? data : collection
+          );
         });
       }
     },
+    // onMutate: async (data) => {
+    //   await queryClient.cancelQueries({ queryKey: ["collections"] });
+    //   queryClient.setQueryData(["collections"], (oldData: any) => {
+    //     return oldData.map((collection: any) =>
+    //         collection.id === data.id ? data : collection
+    //       )
+    //   });
+    // },
     onError: (error) => {
       toast.error(error.message);
     },
@@ -105,16 +117,16 @@ const useDeleteCollection = () => {
 
       toast.dismiss(load);
 
-      return response.json();
+      const data = await response.json();
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data.response;
     },
     onSuccess: (data) => {
       toast.success(t("deleted"));
       return queryClient.setQueryData(["collections"], (oldData: any) => {
-        return {
-          response: oldData.response.filter(
-            (collection: any) => collection.id !== data.response.id
-          ),
-        };
+        return oldData.filter((collection: any) => collection.id !== data.id);
       });
     },
     onError: (error) => {

hooks/store/users.tsx

@@ -0,0 +1,63 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import { useSession } from "next-auth/react";
+
+const useUser = () => {
+  const { data } = useSession();
+
+  const userId = data?.user.id;
+
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/users/${userId}`);
+      if (!response.ok) throw new Error("Failed to fetch user data.");
+
+      const data = await response.json();
+
+      return data.response;
+    },
+    enabled: !!userId,
+  });
+};
+
+const useUpdateUser = () => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (user: any) => {
+      const load = toast.loading(t("applying_settings"));
+
+      const response = await fetch(`/api/v1/users/${user.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(user),
+      });
+
+      const data = await response.json();
+
+      toast.dismiss(load);
+
+      if (!response.ok) throw new Error(data.response);
+
+      return data;
+    },
+    onSuccess: (data) => {
+      toast.success(t("settings_applied"));
+      queryClient.setQueryData(["user"], data.response);
+    },
+    onMutate: async (user) => {
+      await queryClient.cancelQueries({ queryKey: ["user"] });
+      queryClient.setQueryData(["user"], (oldData: any) => {
+        return { ...oldData, ...user };
+      });
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+export { useUser, useUpdateUser };

hooks/useCollectivePermissions.ts

@@ -1,13 +1,12 @@
-import useAccountStore from "@/store/account";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
 import { useCollections } from "./store/collections";
+import { useUser } from "./store/users";
 
 export default function useCollectivePermissions(collectionIds: number[]) {
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
 
-  const { account } = useAccountStore();
+  const { data: user = [] } = useUser();
 
   const [permissions, setPermissions] = useState<Member | true>();
   useEffect(() => {
@@ -16,7 +15,7 @@ export default function useCollectivePermissions(collectionIds: number[]) {
 
       if (collection) {
         let getPermission: Member | undefined = collection.members.find(
-          (e) => e.userId === account.id
+          (e) => e.userId === user.id
         );
 
         if (
@@ -26,10 +25,10 @@ export default function useCollectivePermissions(collectionIds: number[]) {
         )
           getPermission = undefined;
 
-        setPermissions(account.id === collection.ownerId || getPermission);
+        setPermissions(user.id === collection.ownerId || getPermission);
       }
     }
-  }, [account, collections, collectionIds]);
+  }, [user, collections, collectionIds]);
 
   return permissions;
 }

hooks/useInitialData.tsx

@@ -1,33 +1,29 @@
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagStore from "@/store/tags";
-import useAccountStore from "@/store/account";
 import useLocalSettingsStore from "@/store/localSettings";
+import { useUser } from "./store/users";
 
 export default function useInitialData() {
   const { status, data } = useSession();
   // const { setCollections } = useCollectionStore();
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
-  const { account, setAccount } = useAccountStore();
+  const { data: user = [] } = useUser();
   const { setSettings } = useLocalSettingsStore();
 
   useEffect(() => {
     setSettings();
-    if (status === "authenticated") {
-      // Get account info
-      setAccount(data?.user.id as number);
-    }
   }, [status, data]);
 
   // Get the rest of the data
   useEffect(() => {
-    if (account.id && (!process.env.NEXT_PUBLIC_STRIPE || account.username)) {
+    if (user.id && (!process.env.NEXT_PUBLIC_STRIPE || user.username)) {
       // setCollections();
       setTags();
       // setLinks();
     }
-  }, [account]);
+  }, [user]);
 
   return status;
 }

hooks/usePermissions.tsx

@@ -1,13 +1,12 @@
-import useAccountStore from "@/store/account";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
 import { useCollections } from "./store/collections";
+import { useUser } from "./store/users";
 
 export default function usePermissions(collectionId: number) {
-  const { data: { response: collections } = { response: [] } } =
-    useCollections();
+  const { data: collections = [] } = useCollections();
 
-  const { account } = useAccountStore();
+  const { data: user = [] } = useUser();
 
   const [permissions, setPermissions] = useState<Member | true>();
   useEffect(() => {
@@ -15,7 +14,7 @@ export default function usePermissions(collectionId: number) {
 
     if (collection) {
       let getPermission: Member | undefined = collection.members.find(
-        (e) => e.userId === account.id
+        (e) => e.userId === user.id
       );
 
       if (
@@ -25,9 +24,9 @@ export default function usePermissions(collectionId: number) {
       )
         getPermission = undefined;
 
-      setPermissions(account.id === collection.ownerId || getPermission);
+      setPermissions(user.id === collection.ownerId || getPermission);
     }
-  }, [account, collections, collectionId]);
+  }, [user, collections, collectionId]);
 
   return permissions;
 }