format

frontend/src/components/navigator.tsx

@@ -2,16 +2,21 @@ 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 {MdArrowUpward, MdOutlinePerson, MdSearch, MdSettings} from "react-icons/md";
+import {
+  MdArrowUpward,
+  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 {useAppContext} from "./AppContext.tsx";
+import { useAppContext } from "./AppContext.tsx";
 
 export default function Navigator() {
-  const outlet = useOutlet()
+  const outlet = useOutlet();
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const [key, setKey] = useState(0);
 
@@ -25,86 +30,154 @@ export default function Navigator() {
 
   const { t } = useTranslation();
 
-  return <>
-    <FloatingToTopButton/>
-    <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 items-center"}>
-        <div className="dropdown">
-          <div tabIndex={0} role="button" className="btn btn-ghost btn-circle lg:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+  return (
+    <>
+      <FloatingToTopButton />
+      <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 items-center"}>
+          <div className="dropdown">
+            <div
+              tabIndex={0}
+              role="button"
+              className="btn btn-ghost btn-circle lg:hidden"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                {" "}
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h7"
+                />{" "}
+              </svg>
+            </div>
+            <ul
+              id={"navi_menu"}
+              tabIndex={0}
+              className="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
+            >
+              <li
+                onClick={() => {
+                  const menu = document.getElementById(
+                    "navi_menu",
+                  ) as HTMLElement;
+                  menu.blur();
+                  navigate("/");
+                }}
+              >
+                <a>{t("Home")}</a>
+              </li>
+              <li
+                onClick={() => {
+                  const menu = document.getElementById(
+                    "navi_menu",
+                  ) as HTMLElement;
+                  menu.blur();
+                  navigate("/tags");
+                }}
+              >
+                <a>{t("Tags")}</a>
+              </li>
+              <li
+                onClick={() => {
+                  const menu = document.getElementById(
+                    "navi_menu",
+                  ) as HTMLElement;
+                  menu.blur();
+                  navigate("/about");
+                }}
+              >
+                <a>{t("About")}</a>
+              </li>
+            </ul>
           </div>
-          <ul  id={"navi_menu"}
-            tabIndex={0}
-            className="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
-            <li onClick={() => {
-              const menu = document.getElementById("navi_menu") as HTMLElement;
-              menu.blur();
-              navigate("/");
-            }}><a>{t("Home")}</a></li>
-            <li onClick={() => {
-              const menu = document.getElementById("navi_menu") as HTMLElement;
-              menu.blur();
-              navigate("/tags")
-            }}><a>{t("Tags")}</a></li>
-            <li onClick={() => {
-              const menu = document.getElementById("navi_menu") as HTMLElement;
-              menu.blur();
-              navigate("/about")
-            }}><a>{t("About")}</a></li>
-          </ul>
-        </div>
-        <div>
-          <button className="btn btn-ghost text-xl" onClick={() => {
-            appContext.clear()
-            navigate(`/`, { replace: true});
-          }}>{app.appName}</button>
-        </div>
-        <div className="hidden lg:flex">
-          <ul className="menu menu-horizontal px-1">
-            <li onClick={() => {
-              navigate("/");
-            }}><a>{t("Home")}</a></li>
-            <li onClick={() => {
-              navigate("/tags")
-            }}><a>{t("Tags")}</a></li>
-            <li onClick={() => {
-              navigate("/about")
-            }}><a>{t("About")}</a></li>
-          </ul>
-        </div>
-        <div className={"flex-1"}></div>
-        <div className="flex gap-2">
-          <SearchBar/>
-          <UploadingSideBar/>
-          {
-            app.isLoggedIn() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
-              navigate("/manage");
-            }}>
-              <MdSettings size={24}/>
+          <div>
+            <button
+              className="btn btn-ghost text-xl"
+              onClick={() => {
+                appContext.clear();
+                navigate(`/`, { replace: true });
+              }}
+            >
+              {app.appName}
             </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");
-              }}>
+          </div>
+          <div className="hidden lg:flex">
+            <ul className="menu menu-horizontal px-1">
+              <li
+                onClick={() => {
+                  navigate("/");
+                }}
+              >
+                <a>{t("Home")}</a>
+              </li>
+              <li
+                onClick={() => {
+                  navigate("/tags");
+                }}
+              >
+                <a>{t("Tags")}</a>
+              </li>
+              <li
+                onClick={() => {
+                  navigate("/about");
+                }}
+              >
+                <a>{t("About")}</a>
+              </li>
+            </ul>
+          </div>
+          <div className={"flex-1"}></div>
+          <div className="flex gap-2">
+            <SearchBar />
+            <UploadingSideBar />
+            {app.isLoggedIn() && (
+              <button
+                className={"btn btn-circle btn-ghost"}
+                onClick={() => {
+                  navigate("/manage");
+                }}
+              >
+                <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");
+                }}
+              >
                 <MdOutlinePerson size={24}></MdOutlinePerson>
               </button>
-          }
+            )}
+          </div>
         </div>
       </div>
-    </div>
-    <navigatorContext.Provider value={naviContext}>
-      <div className={"max-w-7xl mx-auto pt-16"}>
-        {outlet}
-      </div>
-    </navigatorContext.Provider>
-  </>
+      <navigatorContext.Provider value={naviContext}>
+        <div className={"max-w-7xl mx-auto pt-16"}>{outlet}</div>
+      </navigatorContext.Provider>
+    </>
+  );
 }
 
 interface NavigatorContext {
@@ -114,8 +187,8 @@ interface NavigatorContext {
 const navigatorContext = createContext<NavigatorContext>({
   refresh: () => {
     // do nothing
-  }
-})
+  },
+});
 
 export function useNavigator() {
   return useContext(navigatorContext);
@@ -124,61 +197,95 @@ export function useNavigator() {
 function UserButton() {
   let avatar = "./avatar.png";
   if (app.user) {
-    avatar = network.getUserAvatar(app.user)
+    avatar = network.getUserAvatar(app.user);
   }
 
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
-  return <>
-    <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
-        <div className="w-10 rounded-full">
-          <img
-            alt="Avatar"
-            src={avatar} />
+  return (
+    <>
+      <div className="dropdown dropdown-end">
+        <div
+          tabIndex={0}
+          role="button"
+          className="btn btn-ghost btn-circle avatar"
+        >
+          <div className="w-10 rounded-full">
+            <img alt="Avatar" src={avatar} />
+          </div>
         </div>
+        <ul
+          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?.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;
+                menu.blur();
+              }}
+            >
+              {t("Publish")}
+            </a>
+          </li>
+          <li>
+            <a
+              onClick={() => {
+                const dialog = document.getElementById(
+                  "confirm_logout",
+                ) as HTMLDialogElement;
+                dialog.showModal();
+              }}
+            >
+              {t("Log out")}
+            </a>
+          </li>
+        </ul>
       </div>
-      <ul
-        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?.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;
-          menu.blur();
-        }}>{t("Publish")}</a></li>
-        <li><a onClick={() => {
-          const dialog = document.getElementById("confirm_logout") as HTMLDialogElement;
-          dialog.showModal();
-        }}>{t("Log out")}</a></li>
-      </ul>
-    </div>
-    <dialog id="confirm_logout" className="modal">
-      <div className="modal-box">
-        <h3 className="text-lg font-bold">{t("Log out")}</h3>
-        <p className="py-4">{t("Are you sure you want to log out?")}</p>
-        <div className="modal-action">
-          <form method="dialog">
-            <button className="btn">{t('Cancel')}</button>
-            <button className="btn btn-error mx-2" type={"button"} onClick={() => {
-              app.user = null;
-              app.token = null;
-              app.saveData();
-              navigate(`/login`, { replace: true });
-            }}>{t('Confirm')}
-            </button>
-          </form>
+      <dialog id="confirm_logout" className="modal">
+        <div className="modal-box">
+          <h3 className="text-lg font-bold">{t("Log out")}</h3>
+          <p className="py-4">{t("Are you sure you want to log out?")}</p>
+          <div className="modal-action">
+            <form method="dialog">
+              <button className="btn">{t("Cancel")}</button>
+              <button
+                className="btn btn-error mx-2"
+                type={"button"}
+                onClick={() => {
+                  app.user = null;
+                  app.token = null;
+                  app.saveData();
+                  navigate(`/login`, { replace: true });
+                }}
+              >
+                {t("Confirm")}
+              </button>
+            </form>
+          </div>
         </div>
-      </div>
-    </dialog>
-  </>
+      </dialog>
+    </>
+  );
 }
 
 function SearchBar() {
@@ -212,64 +319,94 @@ function SearchBar() {
     }
     const replace = window.location.pathname === "/search";
     navigate(`/search?keyword=${search}`, { replace: replace });
-  }
+  };
 
-  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"
-        stroke-linecap="round"
-        stroke-width="2.5"
-        fill="none"
-        stroke="currentColor"
+  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"
       >
-        <circle cx="11" cy="11" r="8"></circle>
-        <path d="m21 21-4.3-4.3"></path>
-      </g>
-    </svg>
-    <form className={"w-full"} onSubmit={(e) => {
-      e.preventDefault();
-      doSearch();
-    }}>
-      <input type="search" className={"w-full"} required placeholder={t("Search")} value={search} onChange={(e) => setSearch(e.target.value)} />
-    </form>
-  </label>
+        <g
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          stroke-width="2.5"
+          fill="none"
+          stroke="currentColor"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </g>
+      </svg>
+      <form
+        className={"w-full"}
+        onSubmit={(e) => {
+          e.preventDefault();
+          doSearch();
+        }}
+      >
+        <input
+          type="search"
+          className={"w-full"}
+          required
+          placeholder={t("Search")}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </form>
+    </label>
+  );
 
   if (small) {
-    return <>
-      <button className={"btn btn-circle btn-ghost"} onClick={() => {
-        const dialog = document.getElementById("search_dialog") as HTMLDialogElement;
-        dialog.showModal();
-      }}>
-        <MdSearch size={24} />
-      </button>
-      <dialog id="search_dialog" className="modal">
-        <div className="modal-box">
-          <form method="dialog">
-            <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"} />
-          {searchField}
-          <div className={"h-4"} />
-          <div className={"flex flex-row-reverse"}>
-            <button className={"btn btn-primary"} onClick={() => {
-              if (search.length === 0) {
-                return;
-              }
-              const dialog = document.getElementById("search_dialog") as HTMLDialogElement;
-              dialog.close();
-              doSearch();
-            }}>
-              {t("Search")}
-            </button>
+    return (
+      <>
+        <button
+          className={"btn btn-circle btn-ghost"}
+          onClick={() => {
+            const dialog = document.getElementById(
+              "search_dialog",
+            ) as HTMLDialogElement;
+            dialog.showModal();
+          }}
+        >
+          <MdSearch size={24} />
+        </button>
+        <dialog id="search_dialog" className="modal">
+          <div className="modal-box">
+            <form method="dialog">
+              <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"} />
+            {searchField}
+            <div className={"h-4"} />
+            <div className={"flex flex-row-reverse"}>
+              <button
+                className={"btn btn-primary"}
+                onClick={() => {
+                  if (search.length === 0) {
+                    return;
+                  }
+                  const dialog = document.getElementById(
+                    "search_dialog",
+                  ) as HTMLDialogElement;
+                  dialog.close();
+                  doSearch();
+                }}
+              >
+                {t("Search")}
+              </button>
+            </div>
           </div>
-        </div>
-      </dialog>
-    </>
+        </dialog>
+      </>
+    );
   }
 
-  return searchField
+  return searchField;
 }
 
 function FloatingToTopButton() {
@@ -293,9 +430,14 @@ function FloatingToTopButton() {
     };
   }, []);
 
-  return <button className={`btn btn-circle btn-soft btn-secondary border shadow-lg btn-lg fixed right-4 ${visible ? "bottom-4" : "-bottom-12"} transition-all z-50`} onClick={() => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }}>
-    <MdArrowUpward size={20}/>
-  </button>;
-}
+  return (
+    <button
+      className={`btn btn-circle btn-soft btn-secondary border shadow-lg btn-lg fixed right-4 ${visible ? "bottom-4" : "-bottom-12"} transition-all z-50`}
+      onClick={() => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }}
+    >
+      <MdArrowUpward size={20} />
+    </button>
+  );
+}