Add comment functionality.

frontend/src/components/loading.tsx

@@ -4,7 +4,7 @@ export default function Loading() {
   const {t} = useTranslation();
 
   return <div className={"flex justify-center py-4"}>
-    <span className="loading loading-spinner loading-lg mr-2"></span>
+    <span className="loading loading-spinner progress-primary loading-lg mr-2"></span>
     <span>{t("Loading")}</span>
   </div>;
 }

frontend/src/components/navigator.tsx

@@ -5,6 +5,7 @@ import {useEffect, useState} from "react";
 import {MdOutlinePerson, MdSearch, MdSettings} from "react-icons/md";
 import { useTranslation } from "react-i18next";
 import UploadingSideBar from "./uploading_side_bar.tsx";
+import {IoLogoGithub} from "react-icons/io";
 
 export default function Navigator() {
   const outlet = useOutlet()
@@ -29,6 +30,11 @@ export default function Navigator() {
               <MdSettings size={24}/>
             </button>
           }
+          <button className={"btn btn-circle btn-ghost"} onClick={() => {
+            window.open("https://github.com/wgh136/nysoure", "_blank");
+          }}>
+            <IoLogoGithub size={24}/>
+          </button>
           {
             app.isLoggedIn() ? <UserButton/> : <button className={"btn btn-primary btn-square btn-soft"} onClick={() => {
               navigate("/login");

frontend/src/components/pagination.tsx

@@ -1,36 +1,48 @@
-import { ReactNode } from "react";
-import { MdChevronLeft, MdChevronRight } from "react-icons/md";
+import {ReactNode} from "react";
+import {MdChevronLeft, MdChevronRight} from "react-icons/md";
 
-export default function Pagination({ page, setPage, totalPages }: { page: number, setPage: (page: number) => void, totalPages: number }) {
-    const items: ReactNode[] = [];
+export default function Pagination({page, setPage, totalPages}: {
+  page: number,
+  setPage: (page: number) => void,
+  totalPages: number
+}) {
+  const items: ReactNode[] = [];
 
-    if (page > 1) {
-        items.push(<button className="join-item btn" onClick={() => setPage(1)}>1</button>);
-    }
-    if (page - 2 > 1) {
-        items.push(<button className="join-item btn">...</button>);
-    }
-    if (page-1 > 1) {
-        items.push(<button className="join-item btn" onClick={() => setPage(page-1)}>{page-1}</button>);
-    }
-    items.push(<button className="join-item btn btn-active">{page}</button>);
-    if (page+1 < totalPages) {
-        items.push(<button className="join-item btn" onClick={() => setPage(page+1)}>{page+1}</button>);
-    }
-    if (page+2 < totalPages) {
-        items.push(<button className="join-item btn">...</button>);
-    }
-    if (page < totalPages) {
-        items.push(<button className="join-item btn" onClick={() => setPage(totalPages)}>{totalPages}</button>);
-    }
+  if (page > 1) {
+    items.push(<button className="join-item btn" onClick={() => setPage(1)}>1</button>);
+  }
+  if (page - 2 > 1) {
+    items.push(<button className="join-item btn">...</button>);
+  }
+  if (page - 1 > 1) {
+    items.push(<button className="join-item btn" onClick={() => setPage(page - 1)}>{page - 1}</button>);
+  }
+  items.push(<button className="join-item btn btn-active">{page}</button>);
+  if (page + 1 < totalPages) {
+    items.push(<button className="join-item btn" onClick={() => setPage(page + 1)}>{page + 1}</button>);
+  }
+  if (page + 2 < totalPages) {
+    items.push(<button className="join-item btn">...</button>);
+  }
+  if (page < totalPages) {
+    items.push(<button className="join-item btn" onClick={() => setPage(totalPages)}>{totalPages}</button>);
+  }
 
-    return <div className="join">
-        <button className={`join-item btn ${page === 1 && "btn-disabled"}`} onClick={() => setPage(page-1)}>
-            <MdChevronLeft size={20} className="opacity-50"/>
-        </button>
-        {items}
-        <button className={`join-item btn ${page === totalPages && "btn-disabled"}`} onClick={() => setPage(page+1)}>
-            <MdChevronRight size={20} className="opacity-50"/>
-        </button>
-    </div>
+  return <div className="join shadow rounded-field">
+    <button className={`join-item btn`} onClick={() => {
+      if (page > 1) {
+        setPage(page - 1);
+      }
+    }}>
+      <MdChevronLeft size={20} className="opacity-50"/>
+    </button>
+    {items}
+    <button className={`join-item btn`} onClick={() => {
+      if (page < totalPages) {
+        setPage(page + 1);
+      }
+    }}>
+      <MdChevronRight size={20} className="opacity-50"/>
+    </button>
+  </div>
 }

frontend/src/network/models.ts

@@ -89,3 +89,10 @@ export interface UploadingFile {
   storageId: number;
   resourceId: number;
 }
+
+export interface Comment {
+  id: number;
+  content: string;
+  created_at: string;
+  user: User;
+}

frontend/src/network/network.ts

@@ -11,7 +11,8 @@ import {
   Tag,
   UploadingFile,
   User,
-  UserWithToken
+  UserWithToken,
+  Comment
 } from "./models.ts";
 
 class Network {
@@ -533,6 +534,28 @@ class Network {
   getFileDownloadLink(fileId: string): string {
     return `${this.apiBaseUrl}/files/download/${fileId}`;
   }
+
+  async createComment(resourceID: number, content: string): Promise<Response<any>> {
+    try {
+      const response = await axios.postForm(`${this.apiBaseUrl}/comments/${resourceID}`, { content });
+      return response.data;
+    } catch (e: any) {
+      console.error(e);
+      return { success: false, message: e.toString() };
+    }
+  }
+
+  async listComments(resourceID: number, page: number = 1): Promise<PageResponse<Comment>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/comments/${resourceID}`, {
+        params: { page }
+      });
+      return response.data;
+    } catch (e: any) {
+      console.error(e);
+      return { success: false, message: e.toString() };
+    }
+  }
 }
 
 export const network = new Network();

frontend/src/pages/resource_details_page.tsx

@@ -1,6 +1,6 @@
 import {useParams} from "react-router";
 import {createContext, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {ResourceDetails, RFile, Storage} from "../network/models.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";
@@ -10,11 +10,12 @@ import {MdAdd, MdOutlineArticle, MdOutlineComment, MdOutlineDataset, MdOutlineDo
 import {app} from "../app.ts";
 import {uploadingManager} from "../network/uploading.ts";
 import {ErrorAlert} from "../components/alert.tsx";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
+import Pagination from "../components/pagination.tsx";
 
 export default function ResourcePage() {
   const params = useParams()
-  const { t } = useTranslation();
+  const {t} = useTranslation();
 
   const idStr = params.id
 
@@ -123,7 +124,9 @@ export default function ResourcePage() {
           {t("Comments")}
         </span>
         </label>
-        <div key={"comments"} className="tab-content p-2">{t("Comments")}</div>
+        <div key={"comments"} className="tab-content p-2">
+          <Comments resourceId={resource.id}/>
+        </div>
       </div>
       <div className="h-4"></div>
     </div>
@@ -180,7 +183,7 @@ enum FileType {
 }
 
 function CreateFileDialog({resourceId}: { resourceId: number }) {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   const [isLoading, setLoading] = useState(false)
   const storages = useRef<Storage[] | null>(null)
   const mounted = useRef(true)
@@ -321,7 +324,8 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
 
         {
           fileType === FileType.upload && <>
-            <p className={"text-sm p-2"}>{t("Upload a file to server, then the file will be moved to the selected storage.")}</p>
+            <p
+              className={"text-sm p-2"}>{t("Upload a file to server, then the file will be moved to the selected storage.")}</p>
             <select className="select select-primary w-full my-2" defaultValue={""} onChange={(e) => {
               const id = parseInt(e.target.value)
               if (isNaN(id)) {
@@ -336,7 +340,8 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
               <option value={""} disabled>{t("Select Storage")}</option>
               {
                 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>
+                  return <option key={s.id}
+                                 value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
                 })
               }
             </select>
@@ -370,3 +375,113 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
   </>
 }
 
+function Comments({resourceId}: { resourceId: number }) {
+  const [page, setPage] = useState(1);
+
+  const [maxPage, setMaxPage] = useState(0);
+
+  const [listKey, setListKey] = useState(0);
+
+  const [commentContent, setCommentContent] = useState("");
+
+  const [isLoading, setLoading] = useState(false);
+
+  const reload = useCallback(() => {
+    setPage(1);
+    setMaxPage(0);
+    setListKey(prev => prev + 1);
+  }, [])
+
+  const sendComment = async () => {
+    if (isLoading) {
+      return;
+    }
+    if (commentContent === "") {
+      showToast({message: "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"});
+      reload();
+    } else {
+      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)}/>
+      <div className={"flex flex-row-reverse"}>
+        <button onClick={sendComment}
+                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}/>
+    {maxPage && <div className={"w-full flex justify-center"}>
+      <Pagination page={page} setPage={setPage} totalPages={maxPage}/>
+    </div>}
+  </div>
+}
+
+function CommentsList({resourceId, page, maxPageCallback}: {
+  resourceId: number,
+  page: number,
+  maxPageCallback: (maxPage: number) => void
+}) {
+  const [comments, setComments] = useState<Comment[] | null>(null);
+
+  useEffect(() => {
+    network.listComments(resourceId, page).then((res) => {
+      if (res.success) {
+        setComments(res.data!);
+        maxPageCallback(res.totalPages || 1);
+      } else {
+        showToast({
+          message: res.message,
+          type: "error",
+        });
+      }
+    });
+  }, [maxPageCallback, page, resourceId]);
+
+  if (comments == null) {
+    return <div className={"w-full"}>
+      <Loading/>
+    </div>
+  }
+
+  return <>
+    {
+      comments.map((comment) => {
+        return <CommentTile comment={comment} key={comment.id}/>
+      })
+    }
+  </>
+}
+
+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"}/>
+        </div>
+      </div>
+      <div className={"w-2"}></div>
+      <div className={"text-sm font-bold"}>{comment.user.username}</div>
+      <div className={"grow"}></div>
+      <div className={"text-sm text-gray-500"}>{new Date(comment.created_at).toLocaleString()}</div>
+    </div>
+    <div className={"text-sm p-2"}>
+      {comment.content}
+    </div>
+  </div>
+}