feat: add delete img button

models/docModel.go

@@ -5,6 +5,6 @@ import "gorm.io/gorm"
 type Doc struct {
 	gorm.Model
 
-	FileName string `json:"file_name" gorm:"unique"`
+	FileName string `json:"file_name"`
 	Checksum []byte `json:"checksum"`
 }

models/imageModel.go

@@ -5,6 +5,6 @@ import "gorm.io/gorm"
 type Image struct {
 	gorm.Model
 
-	FileName string `json:"file_name" gorm:"unique"`
+	FileName string `json:"file_name"`
 	Checksum []byte `json:"checksum"`
 }

ui/src/actions/getFiles.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { SetStateAction } from "jotai";
+import toast from "react-hot-toast";
+import File from "../types/file";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SetAtom<Args extends any[], Result> = (...args: Args) => Result;
+
+export const getFiles = (
+  type: "images" | "documents",
+  setFiles: SetAtom<[SetStateAction<File[]>], void>,
+) => {
+  toast.loading("Loading files...");
+  axios
+    .get(`/api/cdn/${type === "images" ? "image" : "doc"}/all`)
+    .then((res) => res.data != null && setFiles(res.data))
+    .catch((err: Error) => {
+      toast.dismiss();
+      toast.error(err.message);
+      console.log(err);
+    })
+    .finally(() => toast.dismiss());
+}
+

ui/src/actions/getSize.ts

@@ -7,9 +7,9 @@ type SetAtom<Args extends any[], Result> = (...args: Args) => Result;
 
 export const getSize = (
   setSize: SetAtom<[SetStateAction<number>], void>,
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setLoading?: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
-  setLoading(true);
+  setLoading && setLoading(true);
   axios
     .get<{ cdn_size_bytes: number }>("/api/cdn/size")
     .then((res) => {
@@ -20,6 +20,6 @@ export const getSize = (
       console.log(err);
     })
     .finally(() => {
-      setLoading(false);
+      setLoading && setLoading(false);
     });
 };

ui/src/components/content-card.tsx

@@ -1,5 +1,10 @@
-import { DownloadCloud, FileText, Files } from "lucide-react";
+import axios from "axios";
+import { DownloadCloud, FileText, Files, Trash2 } from "lucide-react";
 import { toast } from "react-hot-toast";
+import { getFiles } from "../actions/getFiles";
+import { useAtom } from "jotai";
+import { filesAtom, sizeAtom } from "../store";
+import { getSize } from "../actions/getSize";
 
 type TContentCardProps = {
   file_name?: string;
@@ -21,6 +26,23 @@ const ContentCard: React.FC<TContentCardProps> = ({
   const url = `${window.location.protocol}//${
     window.location.host
   }/api/cdn/download/${type === "documents" ? "docs" : "images"}/${file_name}`;
+  const [_, setFiles] = useAtom(filesAtom)
+  const [__, setSize] = useAtom(sizeAtom)
+
+  const deleteFile = () => {
+    toast.loading("Deleting file...");
+    axios.delete(`/api/cdn/delete/${type === "documents" ? "doc" : "image"}/${file_name}`).then((res) => {
+      if (res.status === 200) {
+        toast.dismiss()
+        toast.success("Deleted file!")
+        getFiles(type, setFiles)
+        getSize(setSize);
+      }
+    }).catch((err: Error) => {
+      toast.dismiss();
+      toast.error(err.message)
+    })
+  }
 
   return (
     <div className="border rounded-lg shadow-lg flex flex-col min-h-[264px] w-64 max-w-[256px] justify-center items-center gap-4 p-4">
@@ -36,29 +58,44 @@ const ContentCard: React.FC<TContentCardProps> = ({
         <FileText size="128" />
       )}
       <p className="truncate w-64 px-4">{file_name}</p>
-      <div className={`flex gap-2 w-full ${disabled && "sr-only"}`}>
+      <div className={`flex w-full justify-between ${disabled && "sr-only"}`}>
+        {/* Non-destructive buttons */}
+        <div className="flex gap-2">
+          <button
+            className="flex justify-center items-center text-sky-600 tooltip"
+            onClick={() => {
+              navigator.clipboard.writeText(url);
+              toast.success("clipboard saved");
+            }}
+            aria-label="Copy Link"
+            aria-labelledby="Copy Link"
+          >
+            <span className="tooltiptext">Copy Link</span>
+            <Files className="inline" size="24" />
+          </button>
+          <a
+            className="flex justify-center items-center text-sky-600 tooltip"
+            aria-label="Download file"
+            aria-labelledby="Download file"
+            href={url}
+            download
+          >
+            <span className="tooltiptext">Download file</span>
+            <DownloadCloud className="inline" size="24" />
+          </a>
+        </div>
+        {/* Destructive buttons */}
+        <div className="flex gap-2">
         <button
-          className="flex justify-center items-center text-sky-600 tooltip"
-          onClick={() => {
-            navigator.clipboard.writeText(url);
-            toast.success("clipboard saved");
-          }}
-          aria-label="Copy Link"
-          aria-labelledby="Copy Link"
-        >
-          <span className="tooltiptext">Copy Link</span>
-          <Files className="inline" size="24" />
-        </button>
-        <a
-          className="flex justify-center items-center text-sky-600 tooltip"
-          aria-label="Download file"
-          aria-labelledby="Download file"
-          href={url}
-          download
-        >
-          <span className="tooltiptext">Download file</span>
-          <DownloadCloud className="inline" size="24" />
-        </a>
+            className="flex justify-center items-center text-red-600 tooltip"
+            onClick={() => file_name && deleteFile()}
+            aria-label="Delete file"
+            aria-labelledby="Delete file"
+          >
+            <span className="tooltiptext">Delete file</span>
+            <Trash2 className="inline" size="24" />
+          </button>
+        </div>
       </div>
     </div>
   );

ui/src/components/files.tsx

@@ -1,32 +1,21 @@
-import { useEffect, useState } from "react";
-import axios from "axios";
-import File from "../types/file";
+import { useEffect } from "react";
 import ContentCard from "./content-card";
 import Seperator from "./seperator";
+import { useAtom } from "jotai";
+import { filesAtom } from "../store";
+import { getFiles } from "../actions/getFiles";
 
 type TFilesProps = {
   type: "images" | "documents";
 };
 
 const Files: React.FC<TFilesProps> = ({ type }) => {
-  const [files, setFiles] = useState<File[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [files, setFiles] = useAtom(filesAtom);
 
   useEffect(() => {
-    setIsLoading(true);
-    axios
-      .get(`/api/cdn/${type === "images" ? "image" : "doc"}/all`)
-      .then((res) => res.data != null && setFiles(res.data))
-      .catch((err: undefined) => {
-        console.log(err);
-      })
-      .finally(() => setIsLoading(false));
+    getFiles(type, setFiles)
   }, [type]);
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <div className="w-full">
       <h2 className="text-2xl capitalize mb-8">{type}</h2>

ui/src/store.ts

@@ -1,4 +1,6 @@
 import { atom } from "jotai";
+import File from "./types/file";
 
 export const sizeAtom = atom(0);
 export const sizeLoadingAtom = atom(false);
+export const filesAtom = atom<File[]>([]);