Add user management features.

frontend/src/components/navigator.tsx

@@ -1,19 +1,27 @@
-import {app} from "../app.ts";
-import {network} from "../network/network.ts";
-import {useNavigate, useOutlet} from "react-router";
-import {useEffect, useState} from "react";
-import {MdOutlinePerson, MdSearch, MdSettings} from "react-icons/md";
+import { app } from "../app.ts";
+import { network } from "../network/network.ts";
+import { useNavigate, useOutlet } from "react-router";
+import { createContext, useContext, 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";
+import { IoLogoGithub } from "react-icons/io";
 
 export default function Navigator() {
   const outlet = useOutlet()
 
   const navigate = useNavigate()
 
+  const [key, setKey] = useState(0);
+
+  const [naviContext, _] = useState<NavigatorContext>({
+    refresh: () => {
+      setKey(key + 1);
+    },
+  });
+
   return <>
-    <div className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10">
+    <div className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10" key={key}>
       <div className={"flex-1 max-w-7xl mx-auto flex"}>
         <div className="flex-1">
           <button className="btn btn-ghost text-xl" onClick={() => {
@@ -21,22 +29,22 @@ export default function Navigator() {
           }}>{app.appName}</button>
         </div>
         <div className="flex gap-2">
-          <SearchBar/>
-          <UploadingSideBar/>
+          <SearchBar />
+          <UploadingSideBar />
           {
             app.isAdmin() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
               navigate("/manage");
             }}>
-              <MdSettings size={24}/>
+              <MdSettings size={24} />
             </button>
           }
           <button className={"btn btn-circle btn-ghost"} onClick={() => {
             window.open("https://github.com/wgh136/nysoure", "_blank");
           }}>
-            <IoLogoGithub size={24}/>
+            <IoLogoGithub size={24} />
           </button>
           {
-            app.isLoggedIn() ? <UserButton/> : <button className={"btn btn-primary btn-square btn-soft"} onClick={() => {
+            app.isLoggedIn() ? <UserButton /> : <button className={"btn btn-primary btn-square btn-soft"} onClick={() => {
               navigate("/login");
             }}>
               <MdOutlinePerson size={24}></MdOutlinePerson>
@@ -45,12 +53,28 @@ export default function Navigator() {
         </div>
       </div>
     </div>
-    <div className={"max-w-7xl mx-auto pt-16"}>
-      {outlet}
-    </div>
+    <navigatorContext.Provider value={naviContext}>
+      <div className={"max-w-7xl mx-auto pt-16"}>
+        {outlet}
+      </div>
+    </navigatorContext.Provider>
   </>
 }
 
+interface NavigatorContext {
+  refresh: () => void;
+}
+
+const navigatorContext = createContext<NavigatorContext>({
+  refresh: () => {
+    // do nothing
+  }
+})
+
+export function useNavigator() {
+  return useContext(navigatorContext);
+}
+
 function UserButton() {
   let avatar = "./avatar.png";
   if (app.user) {
@@ -59,7 +83,7 @@ function UserButton() {
 
   const navigate = useNavigate()
 
-  const {t} = useTranslation()
+  const { t } = useTranslation()
 
   return <>
     <div className="dropdown dropdown-end">
@@ -67,7 +91,7 @@ function UserButton() {
         <div className="w-10 rounded-full">
           <img
             alt="Avatar"
-            src={avatar}/>
+            src={avatar} />
         </div>
       </div>
       <ul
@@ -101,7 +125,7 @@ function UserButton() {
               app.user = null;
               app.token = null;
               app.saveData();
-              navigate(`/login`, {replace: true});
+              navigate(`/login`, { replace: true });
             }}>{t('Confirm')}
             </button>
           </form>
@@ -118,7 +142,7 @@ function SearchBar() {
 
   const [search, setSearch] = useState("");
 
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const handleResize = () => {
@@ -141,10 +165,10 @@ function SearchBar() {
       return;
     }
     const replace = window.location.pathname === "/search";
-    navigate(`/search?keyword=${search}`, {replace: replace});
+    navigate(`/search?keyword=${search}`, { replace: replace });
   }
 
-  const searchField = <label className={`input input-primary ${small ? "w-full": "w-64"}`}>
+  const searchField = <label className={`input input-primary ${small ? "w-full" : "w-64"}`}>
     <svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <g
         stroke-linejoin="round"
@@ -161,7 +185,7 @@ function SearchBar() {
       e.preventDefault();
       doSearch();
     }}>
-      <input type="search" className={"w-full"} required placeholder={t("Search")} value={search} onChange={(e) => setSearch(e.target.value)}/>
+      <input type="search" className={"w-full"} required placeholder={t("Search")} value={search} onChange={(e) => setSearch(e.target.value)} />
     </form>
   </label>
 
@@ -171,7 +195,7 @@ function SearchBar() {
         const dialog = document.getElementById("search_dialog") as HTMLDialogElement;
         dialog.showModal();
       }}>
-        <MdSearch size={24}/>
+        <MdSearch size={24} />
       </button>
       <dialog id="search_dialog" className="modal">
         <div className="modal-box">
@@ -179,9 +203,9 @@ function SearchBar() {
             <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
           </form>
           <h3 className="text-lg font-bold">{t("Search")}</h3>
-          <div className={"h-4"}/>
+          <div className={"h-4"} />
           {searchField}
-          <div className={"h-4"}/>
+          <div className={"h-4"} />
           <div className={"flex flex-row-reverse"}>
             <button className={"btn btn-primary"} onClick={() => {
               if (search.length === 0) {