user details page

frontend/package-lock.json

@@ -5891,6 +5891,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",

frontend/src/app.tsx

@@ -6,9 +6,9 @@ import HomePage from "./pages/home_page.tsx";
 import PublishPage from "./pages/publish_page.tsx";
 import SearchPage from "./pages/search_page.tsx";
 import ResourcePage from "./pages/resource_details_page.tsx";
-import "./i18n.ts"
 import ManagePage from "./pages/manage_page.tsx";
 import TaggedResourcesPage from "./pages/tagged_resources_page.tsx";
+import UserPage from "./pages/user_page.tsx";
 
 export default function App() {
   return (
@@ -23,6 +23,7 @@ export default function App() {
           <Route path={"/resources/:id"} element={<ResourcePage/>}/>
           <Route path={"/manage"} element={<ManagePage/>}/>
           <Route path={"/tag/:tag"} element={<TaggedResourcesPage/>}/>
+          <Route path={"/user/:username"} element={<UserPage/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/components/navigator.tsx

@@ -74,7 +74,11 @@ function UserButton() {
         id={"navi_dropdown_menu"}
         tabIndex={0}
         className="menu dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
-        <li><a onClick={() => navigate(`/user/${app.user?.id}`)}>{t("My Profile")}</a></li>
+        <li><a onClick={() => {
+          navigate(`/user/${app.user?.username}`);
+          const menu = document.getElementById("navi_dropdown_menu") as HTMLUListElement;
+          menu.blur();
+        }}>{t("My Profile")}</a></li>
         <li><a onClick={() => {
           navigate(`/publish`);
           const menu = document.getElementById("navi_dropdown_menu") as HTMLUListElement;

frontend/src/components/popup.tsx

@@ -2,60 +2,60 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 export default function showPopup(content: React.ReactNode, element: HTMLElement) {
-    const eRect = element.getBoundingClientRect();
+  const eRect = element.getBoundingClientRect();
 
-    const div = document.createElement("div");
-    div.style.position = "fixed";
-    if (eRect.x > window.innerWidth / 2) {
-        div.style.right = `${window.innerWidth - eRect.x}px`;
-    } else {
-        div.style.left = `${eRect.x}px`;
-    }
-    if (eRect.y > window.innerHeight / 2) {
-        div.style.bottom = `${window.innerHeight - eRect.y}px`;
-    } else {
-        div.style.top = `${eRect.y}px`;
-    }
+  const div = document.createElement("div");
+  div.style.position = "fixed";
+  if (eRect.x > window.innerWidth / 2) {
+    div.style.right = `${window.innerWidth - eRect.x}px`;
+  } else {
+    div.style.left = `${eRect.x}px`;
+  }
+  if (eRect.y > window.innerHeight / 2) {
+    div.style.bottom = `${window.innerHeight - eRect.y}px`;
+  } else {
+    div.style.top = `${eRect.y}px`;
+  }
 
-    div.style.zIndex = "9999";
-    div.className = "animate-appearance-in";
+  div.style.zIndex = "9999";
+  div.className = "animate-appearance-in";
 
-    document.body.appendChild(div);
+  document.body.appendChild(div);
 
-    const mask = document.createElement("div");
+  const mask = document.createElement("div");
 
-    const close = () => {
-        console.log("close popup");
-        document.body.removeChild(div);
-        document.body.removeChild(mask);
-    };
+  const close = () => {
+    console.log("close popup");
+    document.body.removeChild(div);
+    document.body.removeChild(mask);
+  };
 
-    mask.style.position = "fixed";
-    mask.style.top = "0";
-    mask.style.left = "0";
-    mask.style.width = "100%";
-    mask.style.height = "100%";
-    mask.style.zIndex = "9998";
-    mask.onclick = close;
-    document.body.appendChild(mask);
+  mask.style.position = "fixed";
+  mask.style.top = "0";
+  mask.style.left = "0";
+  mask.style.width = "100%";
+  mask.style.height = "100%";
+  mask.style.zIndex = "9998";
+  mask.onclick = close;
+  document.body.appendChild(mask);
 
-    createRoot(div).render(<context.Provider value={close}>
-        {content}
-    </context.Provider>)
+  createRoot(div).render(<context.Provider value={close}>
+    {content}
+  </context.Provider>)
 }
 
-const context = React.createContext<() => void>(() => {});
+const context = React.createContext<() => void>(() => { });
 
 export function useClosePopup() {
-    return React.useContext(context);
+  return React.useContext(context);
 }
 
 export function PopupMenuItem({ children, onClick }: { children: React.ReactNode, onClick: () => void }) {
-    const close = useClosePopup();
-    return <li onClick={() => {
-        close();
-        onClick();
-    }}>
-        {children}
-    </li>
+  const close = useClosePopup();
+  return <li onClick={() => {
+    close();
+    onClick();
+  }}>
+    {children}
+  </li>
 }

frontend/src/network/models.ts

@@ -100,3 +100,11 @@ export interface Comment {
   created_at: string;
   user: User;
 }
+
+export interface CommentWithResource {
+  id: number;
+  content: string;
+  created_at: string;
+  user: User;
+  resource: Resource;
+}

frontend/src/network/network.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import {app} from "../app.ts";
+import { app } from "../app.ts";
 import {
   CreateResourceParams,
   RFile,
@@ -12,7 +12,8 @@ import {
   UploadingFile,
   User,
   UserWithToken,
-  Comment
+  Comment,
+  CommentWithResource
 } from "./models.ts";
 
 class Network {
@@ -88,6 +89,23 @@ class Network {
     }
   }
 
+  async getUserInfo(username: string): Promise<Response<User>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/user/info`, {
+        params: {
+          username
+        }
+      })
+      return response.data
+    } catch (e: any) {
+      console.error(e)
+      return {
+        success: false,
+        message: e.toString(),
+      }
+    }
+  }
+
   async changePassword(oldPassword: string, newPassword: string): Promise<Response<UserWithToken>> {
     try {
       const response = await axios.postForm(`${this.apiBaseUrl}/user/password`, {
@@ -177,7 +195,7 @@ class Network {
   async searchUsers(username: string, page: number): Promise<PageResponse<User>> {
     try {
       const response = await axios.get(`${this.apiBaseUrl}/user/search`, {
-        params: { 
+        params: {
           username,
           page
         }
@@ -325,6 +343,23 @@ class Network {
     }
   }
 
+  async getResourcesByUser(username: string, page: number): Promise<PageResponse<Resource>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/resource/user/${username}`, {
+        params: {
+          page
+        }
+      })
+      return response.data
+    } catch (e: any) {
+      console.error(e)
+      return {
+        success: false,
+        message: e.toString(),
+      }
+    }
+  }
+
   async searchResources(keyword: string, page: number): Promise<PageResponse<Resource>> {
     try {
       const response = await axios.get(`${this.apiBaseUrl}/resource/search`, {
@@ -357,7 +392,7 @@ class Network {
   }
 
   async createS3Storage(name: string, endPoint: string, accessKeyID: string,
-                        secretAccessKey: string, bucketName: string, maxSizeInMB: number): Promise<Response<any>> {
+    secretAccessKey: string, bucketName: string, maxSizeInMB: number): Promise<Response<any>> {
     try {
       const response = await axios.post(`${this.apiBaseUrl}/storage/s3`, {
         name,
@@ -420,8 +455,8 @@ class Network {
     }
   }
 
-  async initFileUpload(filename: string, description: string, fileSize: number, 
-                      resourceId: number, storageId: number): Promise<Response<UploadingFile>> {
+  async initFileUpload(filename: string, description: string, fileSize: number,
+    resourceId: number, storageId: number): Promise<Response<UploadingFile>> {
     try {
       const response = await axios.post(`${this.apiBaseUrl}/files/upload/init`, {
         filename,
@@ -487,8 +522,8 @@ class Network {
     }
   }
 
-  async createRedirectFile(filename: string, description: string, 
-                          resourceId: number, redirectUrl: string): Promise<Response<RFile>> {
+  async createRedirectFile(filename: string, description: string,
+    resourceId: number, redirectUrl: string): Promise<Response<RFile>> {
     try {
       const response = await axios.post(`${this.apiBaseUrl}/files/redirect`, {
         filename,
@@ -573,6 +608,18 @@ class Network {
       return { success: false, message: e.toString() };
     }
   }
+
+  async listCommentsByUser(username: string, page: number = 1): Promise<PageResponse<CommentWithResource>> {
+    try {
+      const response = await axios.get(`${this.apiBaseUrl}/comments/user/${username}`, {
+        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

@@ -72,6 +72,9 @@ export default function ResourcePage() {
         })
       }
       <button
+        onClick={() => {
+          navigate(`/user/${resource.author.username}`)
+        }}
         className="border-b-2 mx-4 py-1 cursor-pointer border-transparent hover:border-primary transition-colors duration-200 ease-in-out">
         <div className="flex items-center ">
           <div className="avatar">

frontend/src/pages/tagged_resources_page.tsx

@@ -13,8 +13,8 @@ export default function TaggedResourcesPage() {
   }
 
   return <div>
-    <h1 className={"text-2xl pt-4 pb-2 px-4"}>
-      {tag}
+    <h1 className={"text-2xl pt-6 pb-2 px-4 font-bold"}>
+      Tag: {tag}
     </h1>
     <ResourcesView loader={(page) => {
       return network.getResourcesByTag(tag, page)

frontend/src/pages/user_page.tsx

@@ -0,0 +1,153 @@
+import { useNavigate, useParams } from "react-router";
+import { CommentWithResource, User } from "../network/models";
+import { network } from "../network/network";
+import showToast from "../components/toast";
+import { useEffect, useState } from "react";
+import ResourcesView from "../components/resources_view";
+import Loading from "../components/loading";
+import Pagination from "../components/pagination";
+import { MdOutlineArrowForward, MdOutlineArrowRight } from "react-icons/md";
+
+export default function UserPage() {
+  const [user, setUser] = useState<User | null>(null);
+
+  const { username } = useParams();
+
+  const [page, setPage] = useState(0);
+
+  useEffect(() => {
+    network.getUserInfo(username || "").then((res) => {
+      if (res.success) {
+        setUser(res.data!);
+      } else {
+        showToast({
+          message: res.message,
+          type: "error",
+        })
+      }
+    });
+  }, [username]);
+
+  if (!user) {
+    return <div className="w-full">
+      <Loading />
+    </div>;
+  }
+
+  return <div>
+    <UserCard user={user!} />
+    <div role="tablist" className="border-b border-base-300 mx-2 flex">
+      <div role="tab" className={`text-sm py-2 px-4 cursor-pointer border-b-2 border-base-100 ${page === 0 ? "border-primary text-primary" : "text-base-content/80"} transition-all`} onClick={() => setPage(0)}>Resources</div>
+      <div role="tab" className={`text-sm py-2 px-4 cursor-pointer border-b-2 border-base-100 ${page === 1 ? "border-primary text-primary" : "text-base-content/80"}`} onClick={() => setPage(1)}>Comments</div>
+    </div>
+    <div className="w-full">
+      {page === 0 && <UserResources user={user} />}
+      {page === 1 && <UserComments user={user} />}
+    </div>
+    <div className="h-16"></div>
+  </div>;
+}
+
+function UserCard({ user }: { user: User }) {
+  return <div className={"flex m-4 items-center"}>
+    <div className={"avatar py-2"}>
+      <div className="w-24 rounded-full ring-2 ring-offset-2 ring-primary ring-offset-base-100">
+        <img src={network.getUserAvatar(user)} />
+      </div>
+    </div>
+    <div className="w-6"></div>
+    <div>
+      <h1 className="text-2xl font-bold">{user.username}</h1>
+      <div className="h-4"></div>
+      <p>
+        <span className="text-sm font-bold mr-1"> {user.uploads_count}</span>
+        <span className="text-sm">Resources</span>
+        <span className="mx-2"></span>
+        <span className="text-sm font-bold mr-1"> {user.comments_count}</span>
+        <span className="text-base-content text-sm">Comments</span>
+      </p>
+    </div>
+  </div>
+}
+
+function UserResources({ user }: { user: User }) {
+  return <ResourcesView loader={(page) => {
+    return network.getResourcesByUser(user.username, page);
+  }}></ResourcesView>
+}
+
+function UserComments({ user }: { user: User }) {
+  const [page, setPage] = useState(1);
+
+  const [maxPage, setMaxPage] = useState(0);
+
+  return <div className="px-2">
+    <CommentsList username={user.username} page={page} maxPageCallback={setMaxPage} />
+    {maxPage && <div className={"w-full flex justify-center"}>
+      <Pagination page={page} setPage={setPage} totalPages={maxPage} />
+    </div>}
+  </div>
+}
+
+function CommentsList({ username, page, maxPageCallback }: {
+  username: string,
+  page: number,
+  maxPageCallback: (maxPage: number) => void
+}) {
+  const [comments, setComments] = useState<CommentWithResource[] | null>(null);
+
+  useEffect(() => {
+    network.listCommentsByUser(username, page).then((res) => {
+      if (res.success) {
+        setComments(res.data!);
+        maxPageCallback(res.totalPages || 1);
+      } else {
+        showToast({
+          message: res.message,
+          type: "error",
+        });
+      }
+    });
+  }, [maxPageCallback, page, username]);
+
+  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: CommentWithResource }) {
+  const navigate = useNavigate();
+
+  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={"p-2"}>
+      {comment.content}
+    </div>
+    <a className="text-sm text-base-content/80 p-1 hover:text-primary cursor-pointer transition-all" onClick={() => {
+      navigate("/resources/" + comment.resource.id);
+    }}>
+      <MdOutlineArrowRight className="inline-block mr-1 mb-0.5" size={18} />
+      {comment.resource.title}
+    </a>
+  </div>
+}