fix: Moved useQuery to PinningProvider and moved mutations into usePinning

app/components/general-layout.tsx

@@ -30,7 +30,7 @@ import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
 import { useGetIdentity, useLogout } from "@refinedev/core";
 import { Identity } from "~/data/auth-provider";
-import { PinningNetworkBanner } from "./pinnning-network-banner";
+import { PinningNetworkBanner } from "./pinning-network-banner";
 import { PinningProvider } from "~/providers/PinningProvider";
 
 

app/components/pinning-network-banner.tsx

@@ -6,7 +6,7 @@ import {
   AccordionTrigger,
 } from "./ui/accordion";
 import { Progress } from "./ui/progress";
-import { usePinning, useUnpinMutation } from "~/hooks/usePinnning";
+import { usePinning } from "~/hooks/usePinning";
 import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs";
 import { Button } from "./ui/button";
 import { Cross2Icon } from "@radix-ui/react-icons";
@@ -73,7 +73,7 @@ export const PinningNetworkBanner = () => {
 };
 
 const PinCidItem = ({ item }: { item: PinningStatus }) => {
-  const { mutate } = useUnpinMutation();
+  const { mutate } = usePinning();
 
   return (
     <div className="px-4 mb-4">
@@ -86,6 +86,7 @@ const PinCidItem = ({ item }: { item: PinningStatus }) => {
             className="p-2 rounded-full h-6"
             onClick={() => mutate({
               cid: item.id,
+              type: "unpin"
             })}>
             <Cross2Icon />
           </Button>

app/hooks/usePinning.ts

@@ -0,0 +1,51 @@
+import { useMutation } from "@tanstack/react-query";
+import { useContext } from "react";
+import { PinningProcess } from "~/data/pinning";
+import { PinningContext } from "~/providers/PinningProvider";
+
+// TODO: Adapt to real API
+
+export const usePinning = () => {
+  const context = useContext(PinningContext);
+
+  const { mutate } = useMutation({
+    mutationKey: ["pin-progress"],
+    mutationFn: async (variables: { cid: string, type: "pin" | "unpin" }) => {
+      const { cid, type } = variables;
+      switch (type) {
+        case "pin": {
+          const response = await PinningProcess.pin(cid);
+
+          if (!response.success) {
+            open?.({
+              type: "destructive",
+              message: "Erorr pinning " + cid,
+              description: response.message,
+            });
+          }
+          break;
+        }
+        case "unpin": {
+          const response = await PinningProcess.unpin(cid);
+
+          if (!response.success) {
+            open?.({
+              type: "destructive",
+              message: "Erorr removing " + cid,
+              description: response.message,
+            });
+          }
+          
+          break;
+        }
+      }
+
+      context.queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
+    }
+  });
+
+  return {
+    ...context.query,
+    mutate
+  };
+};

app/hooks/usePinnning.ts

@@ -1,73 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { PinningProcess } from "~/data/pinning";
-
-// TODO: Adapt to real API
-
-export const usePinMutation = () => {
-  const queryClient = useQueryClient();
-  const { mutate } = useMutation({
-    mutationFn: async ({ cid  }) => {
-      const response = await PinningProcess.pin(cid);
-
-      if (!response.success) {
-        open?.({
-          type: "destructive",
-          message: "Erorr pinning " + cid,
-          description: response.message,
-        });
-      }
-
-      queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
-    }
-  });
-
-  return { mutate }
-}
-
-export const useUnpinMutation = () => {
-  const queryClient = useQueryClient();
-  const { mutate } = useMutation({
-    mutationFn: async ({ cid }) => {
-      const response = await PinningProcess.unpin(cid);
-
-      if (!response.success) {
-        open?.({
-          type: "destructive",
-          message: "Erorr pinning " + cid,
-          description: response.message,
-        });
-      }
-
-      queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
-    }
-  });
-
-  return { mutate }
-}
-
-export const usePinning = () => {
-  const { data } = useQuery({
-    queryKey: ["pin-progress"],
-    refetchInterval: (query) => {
-      if (!query.state.data || !query.state.data.items.length) {
-        return false;
-      }
-
-      return 1000;
-    },
-    refetchIntervalInBackground: true,
-    queryFn: () => {
-      const response = PinningProcess.pollAllProgress();
-      const result = response.next();
-
-      return {
-        items: result.value || [],
-        lastUpdated: Date.now()
-      };
-    },
-  })
-
-  return {
-    data
-  };
-};

app/providers/PinningProvider.tsx

@@ -1,25 +1,63 @@
-import { Dispatch, SetStateAction, createContext, useContext, useState } from "react";
+import {
+  QueryClient,
+  UseQueryResult,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+import { PinningProcess, PinningStatus } from "~/data/pinning";
 
 export interface IPinningData {
   cid: string;
-    progress: number
+  progress: number;
 }
 
 export interface IPinningContextType {
-    data: IPinningData[],
+  query: UseQueryResult<
-    setData: Dispatch<SetStateAction<IPinningData[]>>
+    {
+      items: PinningStatus[];
+      lastUpdated: number;
+    },
+    Error
+  >;
+  queryClient: QueryClient;
 }
 
-export const PinningContext = createContext<IPinningContextType>({} as IPinningContextType);
+export const PinningContext = createContext<IPinningContextType>(
+  {} as IPinningContextType,
+);
 
 export const usePinningContext = () => useContext(PinningContext);
 
+const usePinProgressQuery = () =>
+  useQuery({
+    queryKey: ["pin-progress"],
+    refetchInterval: (query) => {
+      if (!query.state.data || !query.state.data.items.length) {
+        return false;
+      }
+
+      return 1000;
+    },
+    refetchIntervalInBackground: true,
+    queryFn: () => {
+      const response = PinningProcess.pollAllProgress();
+      const result = response.next();
+
+      return {
+        items: result.value || [],
+        lastUpdated: Date.now(),
+      };
+    },
+  });
+
 export const PinningProvider = ({ children }: React.PropsWithChildren) => {
-    const [data, setData] = useState<IPinningData[]>([]);
+  const queryClient = useQueryClient();
+  const queryResult = usePinProgressQuery();
 
   return (
-        <PinningContext.Provider value={{ data, setData }}>
+    <PinningContext.Provider value={{ query: queryResult, queryClient }}>
       {children}
     </PinningContext.Provider>
-    )
+  );
-}
+};

app/routes/file-manager/columns.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 
-import { usePinMutation } from "~/hooks/usePinnning";
+import { usePinning } from "~/hooks/usePinning";
 import { cn } from "~/utils";
 
 // This type is used to define the shape of our data.
@@ -25,7 +25,7 @@ export type File = {
 
 const CreatedOnCell = ({ row }: { row: Row<File> }) => {
   // const { open } = useNotification();
-  const { mutate } = usePinMutation();
+  const { mutate } = usePinning();
 
   return (
     <div className="flex items-center justify-between">
@@ -45,6 +45,7 @@ const CreatedOnCell = ({ row }: { row: Row<File> }) => {
                 console.log(`Adding ${row.getValue("cid")} for pinning...`);
                 mutate({
                   cid: row.getValue("cid"),
+                  type: "pin"
                 });
               }}>
               <DrawingPinIcon className="mr-2" />