Final touches on locations page

client/src/pages/locations/functions.ts

@@ -1,38 +1,77 @@
+import { GetListResponse } from "@refinedev/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useGetSetting } from "../../utils/querySettings";
 import { getAPIURL } from "../../utils/url";
 import { ISpool } from "../spools/model";
 
-export async function setSpoolLocation(spool_id: number, location: string | null): Promise<ISpool> {
-  const response = await fetch(getAPIURL() + "/spool/" + spool_id, {
-    method: "PATCH",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      location: location,
-    }),
-  });
-  if (!response.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return response.json();
+interface LocationRename {
+  old: string;
+  new: string;
 }
 
-export async function renameSpoolLocation(location: string, newName: string): Promise<string> {
-  const response = await fetch(getAPIURL() + "/location/" + location, {
-    method: "PATCH",
-    headers: {
-      "Content-Type": "application/json",
+export function useRenameSpoolLocation() {
+  const queryClient = useQueryClient();
+  const queryKey = ["default", "spool"];
+  const queryKeyList = ["default", "spool", "list"];
+
+  return useMutation<string, unknown, LocationRename, undefined>({
+    mutationFn: async (value) => {
+      const response = await fetch(getAPIURL() + "/location/" + value.old, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: value.new,
+        }),
+      });
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return await response.text();
+    },
+    onMutate: async (value) => {
+      await queryClient.cancelQueries(queryKeyList);
+
+      // Optimistically update all spools with matching location to the new one
+      queryClient.setQueriesData<GetListResponse<ISpool>>({ queryKey: queryKeyList }, (old) => {
+        if (old) {
+          return {
+            data: old.data.map((spool) => {
+              if (spool.location === value.old) {
+                return { ...spool, location: value.new };
+              }
+              return spool;
+            }),
+            total: old.total,
+          };
+        }
+        return old;
+      });
+    },
+    onError: (_error, value, _context) => {
+      // Mutation failed, reset spools with matching location to the old one
+      queryClient.setQueriesData<GetListResponse<ISpool>>({ queryKey: queryKeyList }, (old) => {
+        if (old) {
+          return {
+            data: old.data.map((spool) => {
+              if (spool.location === value.new) {
+                return { ...spool, location: value.old };
+              }
+              return spool;
+            }),
+            total: old.total,
+          };
+        }
+        return old;
+      });
+    },
+    onSuccess: (_data, _value) => {
+      // Mutation succeeded, refetch
+      queryClient.invalidateQueries(queryKey);
     },
-    body: JSON.stringify({
-      name: newName,
-    }),
   });
-  if (!response.ok) {
-    throw new Error("Network response was not ok");
-  }
-  return await response.text();
 }
 
 export function useLocations(): string[] {
@@ -42,7 +81,9 @@ export function useLocations(): string[] {
     if (!query.data) return [];
 
     try {
-      return JSON.parse(query.data.value) as string[];
+      let data = (JSON.parse(query.data.value) ?? []) as string[];
+      data = data.filter((location) => location != null && location.length > 0);
+      return data;
     } catch {
       console.warn("Failed to parse locations", query.data.value);
       return [];
@@ -57,7 +98,7 @@ export function useLocationsSpoolOrders(): Record<string, number[]> {
     if (!query.data) return {};
 
     try {
-      return JSON.parse(query.data.value) as Record<string, number[]>;
+      return (JSON.parse(query.data.value) ?? {}) as Record<string, number[]>;
     } catch {
       console.warn("Failed to parse locations spool orders", query.data.value);
       return {};