fully implemented delete function for storages

frontend/src/components/StorageRow.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient, useMutation } from "@tanstack/react-query";
-import { updateStorage } from "../utils/uxFncs";
+import { deleteStorage, updateStorage } from "../utils/uxFncs";
 import { useForm } from "@tanstack/react-form";
 import { useStore } from "@tanstack/react-store";
 import { Input, Button } from "@mui/joy";
@@ -21,6 +21,13 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (uuid: string) => deleteStorage(uuid),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["storages"] });
+    },
+  });
+
   const form = useForm({
     defaultValues: {
       name: storage.name,
@@ -68,15 +75,16 @@ export const StorageRow = ({ storage }: StorageRowProps) => {
         <Button
           color="primary"
           onClick={form.handleSubmit}
-          disabled={!isDirty || mutation.isPending}
+          disabled={!isDirty || mutation.isPending || deleteMutation.isPending}
         >
           {mutation.isPending ? "..." : "Save"}
         </Button>
         <Button
           color="danger"
-          onClick={() => console.log("Delete Storage: " + storage.uuid)}
+          onClick={() => deleteMutation.mutateAsync(storage.uuid)}
+          disabled={mutation.isPending || deleteMutation.isPending}
         >
-          {mutation.isPending ? "..." : "Delete"}
+          {deleteMutation.isPending ? "..." : "Delete"}
         </Button>
       </td>
     </tr>

frontend/src/pages/Storages.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { getStorages } from "../utils/uxFncs";
-import { Sheet, Table, Button, CircularProgress } from "@mui/joy";
+import { Sheet, Table, Button, CircularProgress, Typography } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import type { Storage } from "../misc/interfaces";
 import { StorageRow } from "../components/StorageRow";
@@ -24,6 +24,9 @@ export const Storages = () => {
         <>
           <AddStorageModal isOpen={modal} setOpen={setModal} />
           <Button onClick={() => setModal(true)}>+</Button>
+          <Typography level="body-md" color="warning" fontWeight={"bold"}>
+            {t("storage-delete-info")}
+          </Typography>
           <Table
             borderAxis="x"
             color="neutral"

frontend/src/utils/uxFncs.ts

@@ -208,3 +208,24 @@ export const mutateNewStorage = async (values: NewStorage) => {
     return response.data;
   }
 };
+
+export const deleteStorage = async (uuid: string) => {
+  const result = await fetch(`${API_BASE}/storage/delete?uuid=${uuid}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+
+  const response = await result.json();
+
+  if (response.code === "es004") {
+    return { success: false, code: response.code };
+  }
+
+  if (response.code === "ss004") {
+    return { success: true, code: response.code };
+  }
+};