Update translations

frontend/src/pages/resource_details_page.tsx

@@ -1,23 +1,31 @@
-import { useNavigate, useParams } from "react-router";
+import {useNavigate, useParams} from "react-router";
 import {createContext, createRef, useCallback, useContext, useEffect, useRef, useState} from "react";
-import { ResourceDetails, RFile, Storage, Comment } from "../network/models.ts";
-import { network } from "../network/network.ts";
+import {ResourceDetails, RFile, Storage, Comment} from "../network/models.ts";
+import {network} from "../network/network.ts";
 import showToast from "../components/toast.ts";
 import Markdown from "react-markdown";
 import "../markdown.css";
 import Loading from "../components/loading.tsx";
-import { MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDownload } from "react-icons/md";
-import { app } from "../app.ts";
-import { uploadingManager } from "../network/uploading.ts";
-import { ErrorAlert } from "../components/alert.tsx";
-import { useTranslation } from "react-i18next";
+import {
+  MdAdd,
+  MdOutlineArticle,
+  MdOutlineComment,
+  MdOutlineDataset,
+  MdOutlineDelete,
+  MdOutlineDownload
+} from "react-icons/md";
+import {app} from "../app.ts";
+import {uploadingManager} from "../network/uploading.ts";
+import {ErrorAlert} from "../components/alert.tsx";
+import {useTranslation} from "react-i18next";
 import Pagination from "../components/pagination.tsx";
 import showPopup, {useClosePopup} from "../components/popup.tsx";
 import {Turnstile} from "@marsidev/react-turnstile";
+import Button from "../components/button.tsx";
 
 export default function ResourcePage() {
   const params = useParams()
-  const { t } = useTranslation();
+  const {t} = useTranslation();
 
   const idStr = params.id
 
@@ -34,7 +42,7 @@ export default function ResourcePage() {
       if (res.success) {
         setResource(res.data!)
       } else {
-        showToast({ message: res.message, type: "error" })
+        showToast({message: res.message, type: "error"})
       }
     }
   }, [id])
@@ -50,7 +58,7 @@ export default function ResourcePage() {
           setResource(res.data!)
           document.title = res.data!.title
         } else {
-          showToast({ message: res.message, type: "error" })
+          showToast({message: res.message, type: "error"})
         }
       })
     }
@@ -67,7 +75,7 @@ export default function ResourcePage() {
   }
 
   if (!resource) {
-    return <Loading />
+    return <Loading/>
   }
 
   return <context.Provider value={reload}>
@@ -86,7 +94,7 @@ export default function ResourcePage() {
         <div className="flex items-center ">
           <div className="avatar">
             <div className="w-6 rounded-full">
-              <img src={network.getUserAvatar(resource.author)} alt={"avatar"} />
+              <img src={network.getUserAvatar(resource.author)} alt={"avatar"}/>
             </div>
           </div>
           <div className="w-2"></div>
@@ -106,57 +114,111 @@ export default function ResourcePage() {
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 0} onChange={() => {
             setPage(0)
-          }} />
-          <MdOutlineArticle className="text-xl mr-2" />
+          }}/>
+          <MdOutlineArticle className="text-xl mr-2"/>
           <span className="text-sm">
             {t("Description")}
           </span>
         </label>
         <div key={"article"} className="tab-content p-2">
-          <Article article={resource.article} />
+          <Article article={resource.article}/>
         </div>
 
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 1} onChange={() => {
             setPage(1)
-          }} />
-          <MdOutlineDataset className="text-xl mr-2" />
+          }}/>
+          <MdOutlineDataset className="text-xl mr-2"/>
           <span className="text-sm">
             {t("Files")}
           </span>
         </label>
         <div key={"files"} className="tab-content p-2">
-          <Files files={resource.files} resourceID={resource.id} />
+          <Files files={resource.files} resourceID={resource.id}/>
         </div>
 
         <label className="tab transition-all">
           <input type="radio" name="my_tabs" checked={page === 2} onChange={() => {
             setPage(2)
-          }} />
-          <MdOutlineComment className="text-xl mr-2" />
+          }}/>
+          <MdOutlineComment className="text-xl mr-2"/>
           <span className="text-sm">
             {t("Comments")}
           </span>
         </label>
         <div key={"comments"} className="tab-content p-2">
-          <Comments resourceId={resource.id} />
+          <Comments resourceId={resource.id}/>
         </div>
+
+        <div className={"grow"}></div>
+        <DeleteResourceDialog resourceId={resource.id} uploaderId={resource.author.id}/>
       </div>
       <div className="h-4"></div>
     </div>
   </context.Provider>
 }
 
+function DeleteResourceDialog({resourceId, uploaderId}: { resourceId: number, uploaderId?: number }) {
+  const [isLoading, setLoading] = useState(false)
+
+  const navigate = useNavigate()
+
+  const {t} = useTranslation()
+
+  const handleDelete = async () => {
+    if (isLoading) {
+      return
+    }
+    setLoading(true)
+    const res = await network.deleteResource(resourceId)
+    const dialog = document.getElementById("delete_resource_dialog") as HTMLDialogElement
+    dialog.close()
+    if (res.success) {
+      showToast({message: t("Resource deleted successfully"), type: "success"})
+      navigate("/", {replace: true})
+    } else {
+      showToast({message: res.message, type: "error"})
+    }
+    setLoading(false)
+  }
+
+  if (!app.isAdmin() && app.user?.id !== uploaderId) {
+    return <></>
+  }
+
+  return <>
+    <Button className={"btn-error btn-ghost"} onClick={() => {
+      const dialog = document.getElementById("delete_resource_dialog") as HTMLDialogElement
+      dialog.showModal()
+    }}>
+      <MdOutlineDelete size={20} className={"inline-block"}/>
+    </Button>
+    <dialog id={`delete_resource_dialog`} className="modal">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">{t("Delete Resource")}</h3>
+        <p
+          className="py-4">{t("Are you sure you want to delete the resource")}? {t("This action cannot be undone.")}</p>
+        <div className="modal-action">
+          <form method="dialog">
+            <button className="btn btn-ghost">{t("Close")}</button>
+          </form>
+          <Button className="btn btn-error" isLoading={isLoading} onClick={handleDelete}>{t("Delete")}</Button>
+        </div>
+      </div>
+    </dialog>
+  </>
+}
+
 const context = createContext<() => void>(() => {
 })
 
-function Article({ article }: { article: string }) {
+function Article({article}: { article: string }) {
   return <article>
     <Markdown>{article}</Markdown>
   </article>
 }
 
-function FileTile({ file }: { file: RFile }) {
+function FileTile({file}: { file: RFile }) {
   const buttonRef = createRef<HTMLButtonElement>()
 
   return <div className={"card card-border border-base-300 my-2"}>
@@ -174,14 +236,15 @@ function FileTile({ file }: { file: RFile }) {
             showPopup(<CloudflarePopup file={file}/>, buttonRef.current!)
           }
         }}>
-          <MdOutlineDownload size={24} />
+          <MdOutlineDownload size={24}/>
         </button>
+        <DeleteFileDialog fileId={file.id}/>
       </div>
     </div>
   </div>
 }
 
-function CloudflarePopup({ file }: { file: RFile }) {
+function CloudflarePopup({file}: { file: RFile }) {
   const closePopup = useClosePopup()
 
   return <div className={"menu bg-base-100 rounded-box z-1 w-80 p-2 shadow-sm h-20"}>
@@ -193,7 +256,7 @@ function CloudflarePopup({ file }: { file: RFile }) {
   </div>
 }
 
-function Files({ files, resourceID }: { files: RFile[], resourceID: number }) {
+function Files({files, resourceID}: { files: RFile[], resourceID: number }) {
   return <div>
     {
       files.map((file) => {
@@ -214,8 +277,8 @@ enum FileType {
   upload = "upload",
 }
 
-function CreateFileDialog({ resourceId }: { resourceId: number }) {
-  const { t } = useTranslation();
+function CreateFileDialog({resourceId}: { resourceId: number }) {
+  const {t} = useTranslation();
   const [isLoading, setLoading] = useState(false)
   const storages = useRef<Storage[] | null>(null)
   const mounted = useRef(true)
@@ -261,7 +324,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
         setSubmitting(false)
         const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
         dialog.close()
-        showToast({ message: t("File created successfully"), type: "success" })
+        showToast({message: t("File created successfully"), type: "success"})
         reload()
       } else {
         setError(res.message)
@@ -282,7 +345,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
         setSubmitting(false)
         const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
         dialog.close()
-        showToast({ message: t("Successfully create uploading task."), type: "success" })
+        showToast({message: t("Successfully create uploading task."), type: "success"})
       } else {
         setError(res.message)
         setSubmitting(false)
@@ -302,7 +365,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
             return;
           }
           if (!res.success) {
-            showToast({ message: res.message, type: "error" })
+            showToast({message: res.message, type: "error"})
           } else {
             storages.current = res.data!
             setLoading(false)
@@ -316,7 +379,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
       dialog.showModal()
     }}>
       {
-        isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24} />
+        isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : <MdAdd size={24}/>
       }
       <span className={"text-sm"}>
         {t("Upload")}
@@ -330,13 +393,13 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
         <form className="filter mb-2">
           <input className="btn btn-square" type="reset" value="×" onClick={() => {
             setFileType(null);
-          }} />
+          }}/>
           <input className="btn text-sm" type="radio" name="type" aria-label={t("Redirect")} onInput={() => {
             setFileType(FileType.redirect);
-          }} />
+          }}/>
           <input className="btn text-sm" type="radio" name="type" aria-label={t("Upload")} onInput={() => {
             setFileType(FileType.upload);
-          }} />
+          }}/>
         </form>
 
         {
@@ -344,13 +407,13 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
             <p className={"text-sm p-2"}>{t("User who click the file will be redirected to the URL")}</p>
             <input type="text" className="input w-full my-2" placeholder={t("File Name")} onChange={(e) => {
               setFilename(e.target.value)
-            }} />
+            }}/>
             <input type="text" className="input w-full my-2" placeholder={t("URL")} onChange={(e) => {
               setRedirectUrl(e.target.value)
-            }} />
+            }}/>
             <input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
               setDescription(e.target.value)
-            }} />
+            }}/>
           </>
         }
 
@@ -373,25 +436,25 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
               {
                 storages.current?.map((s) => {
                   return <option key={s.id}
-                    value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
+                                 value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
                 })
               }
             </select>
 
             <input
               type="file" className="file-input w-full my-2" onChange={(e) => {
-                if (e.target.files) {
-                  setFile(e.target.files[0])
-                }
-              }} />
+              if (e.target.files) {
+                setFile(e.target.files[0])
+              }
+            }}/>
 
             <input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
               setDescription(e.target.value)
-            }} />
+            }}/>
           </>
         }
 
-        {error && <ErrorAlert className={"my-2"} message={error} />}
+        {error && <ErrorAlert className={"my-2"} message={error}/>}
 
         <div className="modal-action">
           <form method="dialog">
@@ -407,7 +470,7 @@ function CreateFileDialog({ resourceId }: { resourceId: number }) {
   </>
 }
 
-function Comments({ resourceId }: { resourceId: number }) {
+function Comments({resourceId}: { resourceId: number }) {
   const [page, setPage] = useState(1);
 
   const [maxPage, setMaxPage] = useState(0);
@@ -418,6 +481,8 @@ function Comments({ resourceId }: { resourceId: number }) {
 
   const [isLoading, setLoading] = useState(false);
 
+  const {t} = useTranslation();
+
   const reload = useCallback(() => {
     setPage(1);
     setMaxPage(0);
@@ -429,41 +494,41 @@ function Comments({ resourceId }: { resourceId: number }) {
       return;
     }
     if (commentContent === "") {
-      showToast({ message: "Comment content cannot be empty", type: "error" });
+      showToast({message: t("Comment content cannot be empty"), type: "error"});
       return;
     }
     setLoading(true);
     const res = await network.createComment(resourceId, commentContent);
     if (res.success) {
       setCommentContent("");
-      showToast({ message: "Comment created successfully", type: "success" });
+      showToast({message: t("Comment created successfully"), type: "success"});
       reload();
     } else {
-      showToast({ message: res.message, type: "error" });
+      showToast({message: res.message, type: "error"});
     }
     setLoading(false);
   }
 
   return <div>
     <div className={"mt-4 mb-6 textarea w-full p-4 h-28 flex flex-col"}>
-      <textarea placeholder={"Write down your comment"} className={"w-full resize-none grow"} value={commentContent}
-        onChange={(e) => setCommentContent(e.target.value)} />
+      <textarea placeholder={t("Write down your comment")} className={"w-full resize-none grow"} value={commentContent}
+                onChange={(e) => setCommentContent(e.target.value)}/>
       <div className={"flex flex-row-reverse"}>
         <button onClick={sendComment}
-          className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
+                className={`btn btn-primary h-8 text-sm mx-2 ${commentContent === "" && "btn-disabled"}`}>
           {isLoading ? <span className={"loading loading-spinner loading-sm"}></span> : null}
           Submit
         </button>
       </div>
     </div>
-    <CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey} />
+    <CommentsList resourceId={resourceId} page={page} maxPageCallback={setMaxPage} key={listKey}/>
     {maxPage && <div className={"w-full flex justify-center"}>
-      <Pagination page={page} setPage={setPage} totalPages={maxPage} />
+      <Pagination page={page} setPage={setPage} totalPages={maxPage}/>
     </div>}
   </div>
 }
 
-function CommentsList({ resourceId, page, maxPageCallback }: {
+function CommentsList({resourceId, page, maxPageCallback}: {
   resourceId: number,
   page: number,
   maxPageCallback: (maxPage: number) => void
@@ -486,25 +551,25 @@ function CommentsList({ resourceId, page, maxPageCallback }: {
 
   if (comments == null) {
     return <div className={"w-full"}>
-      <Loading />
+      <Loading/>
     </div>
   }
 
   return <>
     {
       comments.map((comment) => {
-        return <CommentTile comment={comment} key={comment.id} />
+        return <CommentTile comment={comment} key={comment.id}/>
       })
     }
   </>
 }
 
-function CommentTile({ comment }: { comment: Comment }) {
+function CommentTile({comment}: { comment: Comment }) {
   return <div className={"card card-border border-base-300 p-2 my-3"}>
     <div className={"flex flex-row items-center my-1 mx-1"}>
       <div className="avatar">
         <div className="w-8 rounded-full">
-          <img src={network.getUserAvatar(comment.user)} alt={"avatar"} />
+          <img src={network.getUserAvatar(comment.user)} alt={"avatar"}/>
         </div>
       </div>
       <div className={"w-2"}></div>
@@ -516,4 +581,56 @@ function CommentTile({ comment }: { comment: Comment }) {
       {comment.content}
     </div>
   </div>
-}
+}
+
+function DeleteFileDialog({fileId}: { fileId: string }) {
+  const [isLoading, setLoading] = useState(false)
+
+  const id = `delete_file_dialog_${fileId}`
+
+  const reload = useContext(context)
+
+  const {t} = useTranslation();
+
+  const handleDelete = async () => {
+    if (isLoading) {
+      return
+    }
+    setLoading(true)
+    const res = await network.deleteFile(fileId)
+    const dialog = document.getElementById(id) as HTMLDialogElement
+    dialog.close()
+    if (res.success) {
+      showToast({message: t("File deleted successfully"), type: "success"})
+      reload()
+    } else {
+      showToast({message: res.message, type: "error"})
+    }
+    setLoading(false)
+  }
+
+  if (!app.isAdmin()) {
+    return <></>
+  }
+
+  return <>
+    <button className={"btn btn-error btn-ghost btn-circle ml-1"} onClick={() => {
+      const dialog = document.getElementById(id) as HTMLDialogElement
+      dialog.showModal()
+    }}>
+      <MdOutlineDelete size={20} className={"inline-block"}/>
+    </button>
+    <dialog id={id} className="modal">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">{t("Delete File")}</h3>
+        <p className="py-4">{t("Are you sure you want to delete the file? This action cannot be undone.")}</p>
+        <div className="modal-action">
+          <form method="dialog">
+            <button className="btn btn-ghost">{t("Close")}</button>
+          </form>
+          <button className="btn btn-error" onClick={handleDelete}>{t("Delete")}</button>
+        </div>
+      </div>
+    </dialog>
+  </>
+}