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,7 +1,11 @@
-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 }) {
+export default function Pagination({page, setPage, totalPages}: {
+  page: number,
+  setPage: (page: number) => void,
+  totalPages: number
+}) {
   const items: ReactNode[] = [];
 
   if (page > 1) {
@@ -10,26 +14,34 @@ export default function Pagination({ page, setPage, totalPages }: { page: number
   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>);
+  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 + 1 < totalPages) {
+    items.push(<button className="join-item btn" onClick={() => setPage(page + 1)}>{page + 1}</button>);
   }
-    if (page+2 < totalPages) {
+  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)}>
+  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 ${page === totalPages && "btn-disabled"}`} onClick={() => setPage(page+1)}>
+    <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>
+}

main.go

@@ -32,6 +32,7 @@ func main() {
 		api.AddResourceRoutes(apiG)
 		api.AddStorageRoutes(apiG)
 		api.AddFileRoutes(apiG)
+		api.AddCommentRoutes(apiG)
 	}
 
 	log.Fatal(app.Listen(":3000"))

server/api/comment.go

@@ -0,0 +1,62 @@
+package api
+
+import (
+	"github.com/gofiber/fiber/v3"
+	"nysoure/server/model"
+	"nysoure/server/service"
+	"strconv"
+)
+
+func AddCommentRoutes(router fiber.Router) {
+	api := router.Group("/comments")
+	api.Post("/:resourceID", createComment)
+	api.Get("/:resourceID", listComments)
+}
+
+func createComment(c fiber.Ctx) error {
+	userID, ok := c.Locals("uid").(uint)
+	if !ok {
+		return model.NewRequestError("You must be logged in to comment")
+	}
+	resourceIDStr := c.Params("resourceID")
+	resourceID, err := strconv.Atoi(resourceIDStr)
+	if err != nil {
+		return model.NewRequestError("Invalid resource ID")
+	}
+	content := c.FormValue("content")
+	if content == "" {
+		return model.NewRequestError("Content cannot be empty")
+	}
+	comment, err := service.CreateComment(content, userID, uint(resourceID))
+	if err != nil {
+		return err
+	}
+	return c.Status(fiber.StatusCreated).JSON(model.Response[model.CommentView]{
+		Success: true,
+		Data:    *comment,
+		Message: "Comment created successfully",
+	})
+}
+
+func listComments(c fiber.Ctx) error {
+	resourceIDStr := c.Params("resourceID")
+	resourceID, err := strconv.Atoi(resourceIDStr)
+	if err != nil {
+		return model.NewRequestError("Invalid resource ID")
+	}
+	pageStr := c.Query("page", "1")
+	page, err := strconv.Atoi(pageStr)
+	if err != nil {
+		return model.NewRequestError("Invalid page number")
+	}
+	comments, totalPages, err := service.ListComments(uint(resourceID), page)
+	if err != nil {
+		return err
+	}
+	return c.JSON(model.PageResponse[model.CommentView]{
+		Success:    true,
+		Data:       comments,
+		TotalPages: totalPages,
+		Message:    "Comments retrieved successfully",
+	})
+}

server/dao/comment.go

@@ -0,0 +1,30 @@
+package dao
+
+import "nysoure/server/model"
+
+func CreateComment(content string, userID uint, resourceID uint) (model.Comment, error) {
+	c := model.Comment{
+		Content:    content,
+		UserID:     userID,
+		ResourceID: resourceID,
+	}
+	err := db.Save(&c).Error
+	return c, err
+}
+
+func GetCommentByResourceID(resourceID uint, page, pageSize int) ([]model.Comment, int, error) {
+	var comments []model.Comment
+	var total int64
+
+	if err := db.Model(&model.Comment{}).Where("resource_id = ?", resourceID).Count(&total).Error; err != nil {
+		return nil, 0, err
+	}
+
+	if err := db.Where("resource_id = ?", resourceID).Offset((page - 1) * pageSize).Limit(pageSize).Preload("User").Order("created_at DESC").Find(&comments).Error; err != nil {
+		return nil, 0, err
+	}
+
+	totalPages := (int(total) + pageSize - 1) / pageSize
+
+	return comments, totalPages, nil
+}

server/dao/db.go

@@ -15,7 +15,7 @@ func init() {
 		panic("failed to connect database")
 	}
 
-	_ = db.AutoMigrate(&model.User{}, &model.Resource{}, &model.Image{}, &model.Tag{}, &model.Storage{}, &model.File{}, &model.UploadingFile{}, &model.Statistic{})
+	_ = db.AutoMigrate(&model.User{}, &model.Resource{}, &model.Image{}, &model.Tag{}, &model.Storage{}, &model.File{}, &model.UploadingFile{}, &model.Statistic{}, &model.Comment{})
 }
 
 func GetDB() *gorm.DB {

server/dao/resource.go

@@ -167,3 +167,14 @@ func GetResourceByTag(tagID uint, page int, pageSize int) ([]model.Resource, int
 
 	return tag.Resources, totalPages, nil
 }
+
+func ExistsResource(id uint) (bool, error) {
+	var r model.Resource
+	if err := db.Model(&model.Resource{}).Where("id = ?", id).First(&r).Error; err != nil {
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			return false, nil
+		}
+		return false, err
+	}
+	return true, nil
+}

server/dao/user.go

@@ -39,6 +39,14 @@ func ExistsUser(username string) (bool, error) {
 	return count > 0, nil
 }
 
+func ExistsUserByID(id uint) (bool, error) {
+	var count int64
+	if err := db.Model(&model.User{}).Where("id = ?", id).Count(&count).Error; err != nil {
+		return false, err
+	}
+	return count > 0, nil
+}
+
 func GetUserByUsername(username string) (model.User, error) {
 	var user model.User
 	if err := db.Where("username = ?", username).First(&user).Error; err != nil {
@@ -76,17 +84,14 @@ func IsUserDataBaseEmpty() (bool, error) {
 	return false, nil
 }
 
-// 获取分页用户列表
 func ListUsers(page, pageSize int) ([]model.User, int64, error) {
 	var users []model.User
 	var total int64
 
-	// 获取总数
 	if err := db.Model(&model.User{}).Count(&total).Error; err != nil {
 		return nil, 0, err
 	}
 
-	// 分页获取用户
 	offset := (page - 1) * pageSize
 	if err := db.Offset(offset).Limit(pageSize).Order("id desc").Find(&users).Error; err != nil {
 		return nil, 0, err
@@ -95,17 +100,14 @@ func ListUsers(page, pageSize int) ([]model.User, int64, error) {
 	return users, total, nil
 }
 
-// 根据用户名搜索用户
 func SearchUsersByUsername(username string, page, pageSize int) ([]model.User, int64, error) {
 	var users []model.User
 	var total int64
 
-	// 获取符合条件的总数
 	if err := db.Model(&model.User{}).Where("username LIKE ?", "%"+username+"%").Count(&total).Error; err != nil {
 		return nil, 0, err
 	}
 
-	// 分页获取符合条件的用户
 	offset := (page - 1) * pageSize
 	if err := db.Where("username LIKE ?", "%"+username+"%").Offset(offset).Limit(pageSize).Order("id desc").Find(&users).Error; err != nil {
 		return nil, 0, err
@@ -114,7 +116,6 @@ func SearchUsersByUsername(username string, page, pageSize int) ([]model.User, i
 	return users, total, nil
 }
 
-// 删除用户
 func DeleteUser(id uint) error {
 	return db.Delete(&model.User{}, id).Error
 }

server/model/comment.go

@@ -0,0 +1,31 @@
+package model
+
+import (
+	"gorm.io/gorm"
+	"time"
+)
+
+type Comment struct {
+	gorm.Model
+	Content    string   `gorm:"not null"`
+	ResourceID uint     `gorm:"not null"`
+	UserID     uint     `gorm:"not null"`
+	User       User     `gorm:"foreignKey:UserID"`
+	Resource   Resource `gorm:"foreignKey:ResourceID"`
+}
+
+type CommentView struct {
+	ID        uint      `json:"id"`
+	Content   string    `json:"content"`
+	CreatedAt time.Time `json:"created_at"`
+	User      UserView  `json:"user"`
+}
+
+func (c *Comment) ToView() *CommentView {
+	return &CommentView{
+		ID:        c.ID,
+		Content:   c.Content,
+		CreatedAt: c.CreatedAt,
+		User:      c.User.ToView(),
+	}
+}

server/service/comment.go

@@ -0,0 +1,53 @@
+package service
+
+import (
+	"github.com/gofiber/fiber/v3/log"
+	"nysoure/server/dao"
+	"nysoure/server/model"
+)
+
+func CreateComment(content string, userID uint, resourceID uint) (*model.CommentView, error) {
+	resourceExists, err := dao.ExistsResource(resourceID)
+	if err != nil {
+		log.Error("Error checking resource existence:", err)
+		return nil, model.NewInternalServerError("Error checking resource existence")
+	}
+	if !resourceExists {
+		return nil, model.NewNotFoundError("Resource not found")
+	}
+	userExists, err := dao.ExistsUserByID(userID)
+	if err != nil {
+		log.Error("Error checking user existence:", err)
+		return nil, model.NewInternalServerError("Error checking user existence")
+	}
+	if !userExists {
+		return nil, model.NewNotFoundError("User not found")
+	}
+	c, err := dao.CreateComment(content, userID, resourceID)
+	if err != nil {
+		log.Error("Error creating comment:", err)
+		return nil, model.NewInternalServerError("Error creating comment")
+	}
+	return c.ToView(), nil
+}
+
+func ListComments(resourceID uint, page int) ([]model.CommentView, int, error) {
+	resourceExists, err := dao.ExistsResource(resourceID)
+	if err != nil {
+		log.Error("Error checking resource existence:", err)
+		return nil, 0, model.NewInternalServerError("Error checking resource existence")
+	}
+	if !resourceExists {
+		return nil, 0, model.NewNotFoundError("Resource not found")
+	}
+	comments, totalPages, err := dao.GetCommentByResourceID(resourceID, page, pageSize)
+	if err != nil {
+		log.Error("Error getting comments:", err)
+		return nil, 0, model.NewInternalServerError("Error getting comments")
+	}
+	res := make([]model.CommentView, 0, len(comments))
+	for _, c := range comments {
+		res = append(res, *c.ToView())
+	}
+	return res, totalPages, nil
+}

server/service/consts.go

@@ -0,0 +1,5 @@
+package service
+
+const (
+	pageSize = 20
+)

server/service/resource.go

@@ -7,10 +7,6 @@ import (
 	"gorm.io/gorm"
 )
 
-const (
-	pageSize = 20
-)
-
 type ResourceCreateParams struct {
 	Title             string   `json:"title" binding:"required"`
 	AlternativeTitles []string `json:"alternative_titles"`