refactor collections store

hooks/store/collections.tsx

@@ -0,0 +1,131 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import { useTranslation } from "next-i18next";
+import toast from "react-hot-toast";
+
+const useCollections = () => {
+  return useQuery({
+    queryKey: ["collections"],
+    queryFn: async (): Promise<{
+      response: CollectionIncludingMembersAndLinkCount[];
+    }> => {
+      const response = await fetch("/api/v1/collections");
+      const data = await response.json();
+      return data;
+    },
+  });
+};
+
+const useCreateCollection = () => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: any) => {
+      const load = toast.loading(t("creating"));
+
+      const response = await fetch("/api/v1/collections", {
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      toast.dismiss(load);
+
+      return response.json();
+    },
+    onSuccess: (data) => {
+      toast.success(t("created"));
+      return queryClient.setQueryData(["collections"], (oldData: any) => {
+        return {
+          response: [...oldData.response, data.response],
+        };
+      });
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+const useUpdateCollection = () => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: any) => {
+      const load = toast.loading(t("updating_collection"));
+
+      const response = await fetch(`/api/v1/collections/${data.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+
+      toast.dismiss(load);
+
+      return response.json();
+    },
+    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
+            ),
+          };
+        });
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+const useDeleteCollection = () => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const load = toast.loading(t("deleting_collection"));
+
+      const response = await fetch(`/api/v1/collections/${id}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      toast.dismiss(load);
+
+      return response.json();
+    },
+    onSuccess: (data) => {
+      toast.success(t("deleted"));
+      return queryClient.setQueryData(["collections"], (oldData: any) => {
+        return {
+          response: oldData.response.filter(
+            (collection: any) => collection.id !== data.response.id
+          ),
+        };
+      });
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};
+
+export {
+  useCollections,
+  useCreateCollection,
+  useUpdateCollection,
+  useDeleteCollection,
+};

hooks/useCollectivePermissions.ts

@@ -1,10 +1,11 @@
 import useAccountStore from "@/store/account";
-import useCollectionStore from "@/store/collections";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
+import { useCollections } from "./store/collections";
 
 export default function useCollectivePermissions(collectionIds: number[]) {
-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();
 
   const { account } = useAccountStore();
 

hooks/useInitialData.tsx

@@ -1,4 +1,3 @@
-import useCollectionStore from "@/store/collections";
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagStore from "@/store/tags";
@@ -7,7 +6,7 @@ import useLocalSettingsStore from "@/store/localSettings";
 
 export default function useInitialData() {
   const { status, data } = useSession();
-  const { setCollections } = useCollectionStore();
+  // const { setCollections } = useCollectionStore();
   const { setTags } = useTagStore();
   // const { setLinks } = useLinkStore();
   const { account, setAccount } = useAccountStore();
@@ -24,7 +23,7 @@ export default function useInitialData() {
   // Get the rest of the data
   useEffect(() => {
     if (account.id && (!process.env.NEXT_PUBLIC_STRIPE || account.username)) {
-      setCollections();
+      // setCollections();
       setTags();
       // setLinks();
     }

hooks/usePermissions.tsx

@@ -1,10 +1,11 @@
 import useAccountStore from "@/store/account";
-import useCollectionStore from "@/store/collections";
 import { Member } from "@/types/global";
 import { useEffect, useState } from "react";
+import { useCollections } from "./store/collections";
 
 export default function usePermissions(collectionId: number) {
-  const { collections } = useCollectionStore();
+  const { data: { response: collections } = { response: [] } } =
+    useCollections();
 
   const { account } = useAccountStore();