From e4d4cc388052540e0b9414067614d228ad5d51ed Mon Sep 17 00:00:00 2001
From: P-man2976 <ikmy1119924@gmail.com>
Date: Sun, 15 Oct 2023 18:52:23 +0900
Subject: [PATCH] Move router to top level, functional sidebar

---
 .../components/channel/NavigateToMusicdex.tsx |  17 ++
 .../react/src/components/header/header.tsx    |  18 +-
 .../react/src/components/layout/Frame.tsx     |  49 ++--
 .../react/src/components/sidebar/sidebar.tsx  | 139 +++++++----
 packages/react/src/main.tsx                   |  29 ++-
 packages/react/src/routes/about.tsx           |  12 +
 packages/react/src/routes/channel.tsx         |  12 +
 packages/react/src/routes/login.tsx           |   2 +-
 packages/react/src/routes/router.tsx          | 234 ++++++++----------
 packages/react/src/routes/settings.tsx        |   9 +
 10 files changed, 304 insertions(+), 217 deletions(-)
 create mode 100644 packages/react/src/components/channel/NavigateToMusicdex.tsx
 create mode 100644 packages/react/src/routes/about.tsx
 create mode 100644 packages/react/src/routes/channel.tsx
 create mode 100644 packages/react/src/routes/settings.tsx

diff --git a/packages/react/src/components/channel/NavigateToMusicdex.tsx b/packages/react/src/components/channel/NavigateToMusicdex.tsx
new file mode 100644
index 000000000..ad4d25fe3
--- /dev/null
+++ b/packages/react/src/components/channel/NavigateToMusicdex.tsx
@@ -0,0 +1,17 @@
+import { Navigate, useParams } from "react-router-dom";
+
+export function NavigateToMusicdex() {
+  const { id } = useParams();
+  const isStaging = location.origin.includes("staging");
+
+  return (
+    <Navigate
+      to={
+        isStaging
+          ? `https://music-staging.holodex.net/channel/${id}`
+          : `https://music.holodex.net/channel/${id}`
+      }
+			replace
+    />
+  );
+}
diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index a6e8b1516..762b02cc3 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -2,6 +2,8 @@ import { darkAtom } from "@/hooks/useTheme";
 import { Button } from "@/shadcn/ui/button";
 import { userAtom } from "@/store/auth";
 import { useAtom, useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 
 interface HeaderProps {
   onClick: () => void;
@@ -9,6 +11,7 @@ interface HeaderProps {
 }
 
 export function Header({ onClick, id }: HeaderProps) {
+  const { t } = useTranslation();
   const [dark, toggle] = useAtom(darkAtom);
   const user = useAtomValue(userAtom);
 
@@ -17,18 +20,15 @@ export function Header({ onClick, id }: HeaderProps) {
       id={id}
       className="bg-base-2 flex items-center px-8 py-auto gap-4 sticky top-0 z-40"
     >
-      <button
-        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded"
-        onClick={onClick}
-      >
+      <Button size="icon-lg" variant="ghost" onClick={onClick}>
         <div className="i-heroicons:bars-3 rounded-md px-3 py-3 " />
-      </button>
+      </Button>
       <div className="justify-start py-1 pl-3 text-xl">Hololive</div>
       <div className="i-heroicons:chevron-down py-5" />
       <div className="flex flex-grow" />
       <Button
-        size='icon-lg'
-        variant='ghost'
+        size="icon-lg"
+        variant="ghost"
         className="p-2"
         onClick={() => toggle(!dark)}
       >
@@ -40,7 +40,9 @@ export function Header({ onClick, id }: HeaderProps) {
           src={`https://avatars.dicebear.com/api/jdenticon/${user.id}.svg`}
         />
       ) : (
-        <button>Login</button>
+        <Button asChild>
+          <Link to="/login">{t("Login")}</Link>
+        </Button>
       )}
     </header>
   );
diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
index c093a9167..a5532279c 100644
--- a/packages/react/src/components/layout/Frame.tsx
+++ b/packages/react/src/components/layout/Frame.tsx
@@ -1,19 +1,28 @@
-import './Frame.scss'
-import { RouterProvider } from 'react-router-dom'
-import router from '@/routes/router'
-import { ReactPropTypes, useEffect } from 'react'
-import { Sidebar } from '@/components/sidebar/sidebar'
-import { isFloatingAtom, isMobileAtom, onResizeAtom, sidebarOpenAtom, sidebarShouldBeFullscreenAtom, toggleAtom } from '@/hooks/useFrame'
+import "./Frame.scss";
+import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { ReactPropTypes, useEffect } from "react";
+import { Sidebar } from "@/components/sidebar/sidebar";
+import {
+  isFloatingAtom,
+  isMobileAtom,
+  onResizeAtom,
+  sidebarOpenAtom,
+  sidebarShouldBeFullscreenAtom,
+  toggleAtom,
+} from "@/hooks/useFrame";
 import { useAtomValue, useSetAtom } from "jotai/react";
-import { darkAtom } from '@/hooks/useTheme'
-import { Header } from "@/components/header/header"
-import { Toaster } from '@/shadcn/ui/toaster'
-import clsx from 'clsx'
+import { darkAtom } from "@/hooks/useTheme";
+import { Header } from "@/components/header/header";
+import { Toaster } from "@/shadcn/ui/toaster";
+import clsx from "clsx";
+import { orgAtom } from "@/store/org";
 
 export function Frame() {
+  const location = useLocation();
   const toggle = useSetAtom(toggleAtom);
   const resize = useSetAtom(onResizeAtom);
   const dark = useAtomValue(darkAtom);
+  const org = useAtomValue(orgAtom);
 
   useEffect(() => {
     window.addEventListener("resize", resize);
@@ -26,15 +35,17 @@ export function Frame() {
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
   console.log(fs);
 
+  if (location.pathname === "/") return <Navigate to={`/org/${org}`} />;
+
   const mainClasses = clsx({
-    'mobile-footer': isMobile,
-    'sidebar-static': !floating,
-    'sidebar-floating': floating,
-    'sidebar-open': open,
-    'sidebar-closed': !open,
-    'sidebar-fullscreen': fs,
-    'dark': dark,
-  })
+    "mobile-footer": isMobile,
+    "sidebar-static": !floating,
+    "sidebar-floating": floating,
+    "sidebar-open": open,
+    "sidebar-closed": !open,
+    "sidebar-fullscreen": fs,
+    dark: dark,
+  });
 
   return (
     <div className={mainClasses} id="layout">
@@ -43,7 +54,7 @@ export function Frame() {
       </aside>
       <Header onClick={toggle} id="header" />
       <main className="">
-        <RouterProvider router={router}></RouterProvider>
+        <Outlet />
       </main>
       {isMobile && <footer className="">Footer</footer>}
       <Toaster />
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index bb5038538..d68ba3097 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -1,9 +1,12 @@
-import { darkAtom } from "@/hooks/useTheme";
 import { cn } from "@/lib/utils";
 import { Button } from "@/shadcn/ui/button";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { OrgSelectorCombobox } from "../org/OrgPicker";
 import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router-dom";
+import { orgAtom } from "@/store/org";
+import { HTMLAttributes } from "react";
+import { isMobileAtom } from "@/hooks/useFrame";
 // import { ScrollArea } from "@/shadcn/ui/scroll-area"
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,7 +15,7 @@ interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function Sidebar({ className, id, onClose }: SidebarProps) {
   const { t } = useTranslation();
-  const [dark, toggle] = useAtom(darkAtom);
+  const org = useAtomValue(orgAtom);
 
   return (
     <div className={cn("pb-12 border-r-base-5 border-r", className)} id={id}>
@@ -31,54 +34,64 @@ export function Sidebar({ className, id, onClose }: SidebarProps) {
           <OrgSelectorCombobox />
           <h2 className="mb-2 px-4 font-semibold tracking-tight">Hololive</h2>
           <div className="space-y-1">
-            <Button className="w-full justify-start" variant="default">
-              <div className="i-heroicons:home"></div>
-              {t("Home")}
-            </Button>
-            <Button className="w-full justify-start" variant="ghost">
-              <span className="i-heroicons:user-group"></span>
-              {t("Channels")}
-            </Button>
+            <SidebarItem
+              onClose={onClose}
+              label="Home"
+              href={`/org/${org}`}
+              icon="i-heroicons:home"
+            />
+            <SidebarItem
+              onClose={onClose}
+              label="Channels"
+              href={`/org/${org}/channels`}
+              icon="i-heroicons:user-group"
+            />
           </div>
         </div>
         {/* <hr className="border-base" /> */}
         <div className="px-3 py-2">
           {/* <h2 className="mb-2 px-4 font-semibold tracking-tight">Holodex</h2> */}
           <div className="space-y-2">
-            <Button className="w-full justify-start" variant="ghost">
-              <span className="i-heroicons:heart"></span>
-              {t("Favorites")}
-            </Button>
-            <Button className="w-full justify-start" variant="ghost">
-              <span className="i-heroicons:rectangle-group"></span>
-              {t("Multiview")}
-            </Button>
-            <Button className="w-full justify-start" variant="ghost">
-              <span className="i-heroicons:musical-note"></span>
-              {t("Musicdex")}
-            </Button>
+            <SidebarItem
+              label="Favorites"
+              icon="i-heroicons:heart"
+              href="/favorites"
+              onClose={onClose}
+            />
+            <SidebarItem
+              label="Multiview"
+              icon="i-heroicons:rectangle-group"
+              href="/multiview"
+              onClose={onClose}
+            />
+            <SidebarItem
+              label="Musicdex"
+              icon="i-heroicons:musical-note"
+              href="https://music.holodex.net"
+              onClose={onClose}
+            />
             <hr className="border-base" />
-            <Button
-              className="w-full justify-start text-base-11"
-              variant="ghost"
-            >
-              <span className="i-heroicons:queue-list"></span>
-              {t("Playlist")}
-            </Button>
-            <Button
-              className="w-full justify-start text-base-11"
-              variant="ghost"
-            >
-              <span className="i-heroicons:cog-6-tooth"></span>
-              {t("Settings")}
-            </Button>
-            <Button
-              className="w-full justify-start text-base-11"
-              variant="ghost"
-            >
-              <span className="i-heroicons:information-circle"></span>
-              {t("About")}
-            </Button>
+            <SidebarItem
+              className="text-base-11"
+              label="Playlist"
+              icon="i-heroicons:queue-list"
+              href="/playlists"
+              onClose={onClose}
+            />
+            <SidebarItem
+              className="text-base-11"
+              label="Settings"
+              icon="i-heroicons:cog-6-tooth"
+              href="/settings"
+              onClose={onClose}
+            />
+            <SidebarItem
+              className="text-base-11"
+              label="About"
+              icon="i-heroicons:information-circle"
+              href="/about"
+              onClose={onClose}
+            />
           </div>
         </div>
         <div className="py-2">
@@ -128,3 +141,41 @@ export function Sidebar({ className, id, onClose }: SidebarProps) {
     </div>
   );
 }
+
+function SidebarItem({
+  className,
+  onClose,
+  icon,
+  label,
+  href,
+}: {
+  className?: HTMLAttributes<HTMLButtonElement>["className"];
+  onClose: () => void;
+  icon: HTMLAttributes<HTMLSpanElement>["className"];
+  label: string;
+  href: string;
+}) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const isMobile = useAtomValue(isMobileAtom);
+
+  const isHere = href === location.pathname;
+
+  return (
+    <Button
+      asChild
+      className={cn(
+        "w-full justify-start",
+        { "text-white": isHere },
+        className,
+      )}
+      variant={isHere ? "default" : "ghost"}
+      onClick={isMobile ? onClose : undefined}
+    >
+      <Link to={href}>
+        <span className={icon}></span>
+        {t(label)}
+      </Link>
+    </Button>
+  );
+}
diff --git a/packages/react/src/main.tsx b/packages/react/src/main.tsx
index 28f0be0c7..89bf9d0e4 100644
--- a/packages/react/src/main.tsx
+++ b/packages/react/src/main.tsx
@@ -1,12 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { GoogleOAuthProvider } from "@react-oauth/google";
+import { HelmetProvider } from "react-helmet-async";
 import "./index.css";
 import "uno.css";
-import { Frame } from "./components/layout/Frame.tsx";
-import { useThemeInit } from "./hooks/useTheme.ts";
+import { useThemeInit } from "./hooks/useTheme";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import "./lib/i18n";
+import { RouterProvider } from "react-router-dom";
+import router from "./routes/router";
 
 const GOOGLE_CLIENT_ID =
   "275540829388-87s7f9v2ht3ih51ah0tjkqng8pd8bqo2.apps.googleusercontent.com";
@@ -15,23 +18,25 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnMount: false,
-      refetchOnWindowFocus: false
-    }
-  }
+      refetchOnWindowFocus: false,
+    },
+  },
 });
 
 function App() {
   useThemeInit();
-  return <Frame />;
+  return <RouterProvider router={router} />;
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools />
-      <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
-        <App />
-      </GoogleOAuthProvider>
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools />
+        <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+          <App />
+        </GoogleOAuthProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   </React.StrictMode>,
 );
diff --git a/packages/react/src/routes/about.tsx b/packages/react/src/routes/about.tsx
new file mode 100644
index 000000000..3658d6ead
--- /dev/null
+++ b/packages/react/src/routes/about.tsx
@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+
+
+export default function About () {
+
+	return (
+		<div>
+			About
+			<Outlet />
+		</div>
+	)
+}
\ No newline at end of file
diff --git a/packages/react/src/routes/channel.tsx b/packages/react/src/routes/channel.tsx
new file mode 100644
index 000000000..d6f6c369d
--- /dev/null
+++ b/packages/react/src/routes/channel.tsx
@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+
+
+export default function Channel () {
+
+	return (
+		<div>
+			Channel
+			<Outlet />
+		</div>
+	)
+}
\ No newline at end of file
diff --git a/packages/react/src/routes/login.tsx b/packages/react/src/routes/login.tsx
index 1eaa96901..192bed832 100644
--- a/packages/react/src/routes/login.tsx
+++ b/packages/react/src/routes/login.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/shadcn/ui/button";
 import { GoogleLogin } from "@react-oauth/google";
 import open from "oauth-open";
 
-export function Login() {
+export default function Login() {
   const {
     login: { mutate },
   } = useAuth();
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index fd5f72c23..6a42f11b8 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -1,159 +1,127 @@
 import Kitchensink from "@/Kitchensink";
-import { Navigate, Outlet, createBrowserRouter, redirect } from "react-router-dom";
+import { Navigate, createBrowserRouter } from "react-router-dom";
 import { Home } from "@/routes/home";
-import { Login } from "@/routes/login";
 import { ChannelsOrg } from "./channelsOrg";
-import { useAtomValue } from "jotai";
+import { getDefaultStore } from "jotai";
 import { orgAtom } from "@/store/org";
+import { Frame } from "@/components/layout/Frame";
+// import { Login } from "./login";
+// import { Settings } from "./settings";
+// import { About } from "./about";
+// import { Channel } from "./channel";
+import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
+import React from "react";
 
-const settings = {} as any; // TODO: replace with your actual settings store
-const site = {} as any; // TODO: replace with your actual site store
+const Login = React.lazy(() => import("./login"));
+const Settings = React.lazy(() => import("./settings"));
+const About = React.lazy(() => import("./about"));
+const Channel = React.lazy(() => import("./channel"));
+
+const store = getDefaultStore();
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <div />,
-    loader: async ({ params }) => {
-      // Replace with your logic
-      const orgInParam = params.org; // TODO: Get the parameter from the current location
-
-      if (orgInParam || settings.defaultOpen === "Home" || !site.jwtToken) {
-        // Do the necessary redirect logic here
-        // return redirect('/org/' + params.org)
-        return redirect('/kitchensink')
-      } else {
-        // Do the necessary redirect logic here
-        return redirect('/favorites/')
-        // return <div>Redirecting to Favorites...</div>;
-      }
-    }
-  },
-  {
-    path: "/favorites",
-    element: <div>Favorites</div>,
-  },
-  {
-    path: "/search",
-    element: <div>Search</div>,
-  },
-  {
-    path: "/org/:org",
-    element: <Home />,
-  },
-  {
-    path: "/channels",
-    element: <RedirectToChannelsOrg />,
-  },
-  {
-    path: "/org404",
-    element: <div>OrgNotFound</div>,
-  },
-  {
-    path: "/org/:org/channels",
-    element: <ChannelsOrg />,
-  },
-  {
-    path: "/channel/:id",
-    element: <Channel />,
+    element: <Frame />,
     children: [
+      {
+        path: "favorites",
+        element: <div>Favorites</div>,
+      },
+      {
+        path: "search",
+        element: <div>Search</div>,
+      },
+      {
+        path: "org/:org",
+        element: <Home />,
+      },
+      {
+        path: "channels",
+        element: <Navigate to={`/org/${store.get(orgAtom)}/channels`} />,
+      },
+      {
+        path: "org404",
+        element: <div>OrgNotFound</div>,
+      },
+      {
+        path: "org/:org/channels",
+        element: <ChannelsOrg />,
+      },
+      {
+        path: "channel/:id",
+        element: <Channel />,
+        children: [
+          {
+            path: "about",
+            element: <div>Channel_About</div>,
+          },
+          {
+            path: "clips",
+            element: <div>Channel_Clips</div>,
+          },
+          {
+            path: "collabs",
+            element: <div>Channel_Collabs</div>,
+          },
+          {
+            path: "music",
+            element: <NavigateToMusicdex />,
+          },
+        ],
+      },
+      {
+        path: "profile",
+        element: <div>Profile</div>,
+      },
+      {
+        path: "settings",
+        element: <Settings />,
+        children: [
+          // Add children routes similar to above pattern
+        ],
+      },
+      {
+        path: "playlists",
+        element: <div>Playlists</div>,
+      },
       {
         path: "about",
-        element: <div>Channel_About</div>,
+        element: <About />,
+        children: [
+          // Add children routes similar to above pattern
+        ],
       },
       {
-        path: "clips",
-        element: <div>Channel_Clips</div>,
+        path: "kitchensink",
+        element: <Kitchensink />,
       },
       {
-        path: "collabs",
-        element: <div>Channel_Collabs</div>,
+        path: "login",
+        element: <Login />,
       },
       {
-        path: "music",
-        element: <RedirectToMusicdex />,
+        path: "tlclient",
+        element: <div>Translation Client</div>,
       },
       {
-        path: "",
-        element: <div>Channel</div>,
+        path: "scripteditor",
+        element: <div>Translation Scripter</div>,
+      },
+      {
+        path: "watch/:id",
+        element: <div>Watch</div>,
+      },
+      {
+        path: "debug",
+        element: <div>Debug</div>,
+      },
+      {
+        path: "debug/run",
+        element: <div>Debug Run</div>,
       },
     ],
   },
-  {
-    path: "/profile",
-    element: <div>Profile</div>,
-  },
-  {
-    path: "/settings",
-    element: <Settings />,
-    children: [
-      // Add children routes similar to above pattern
-    ],
-  },
-  {
-    path: "/playlists",
-    element: <div>Playlists</div>,
-  },
-  {
-    path: "/about",
-    element: <About />,
-    children: [
-      // Add children routes similar to above pattern
-    ],
-  },
-  {
-    path: "/kitchensink",
-    element: <Kitchensink />,
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/tlclient",
-    element: <div>Translation Client</div>,
-  },
-  {
-    path: "/scripteditor",
-    element: <div>Translation Scripter</div>,
-  },
-  {
-    path: "/watch/:id",
-    element: <div>Watch</div>,
-  },
-  {
-    path: "/debug",
-    element: <div>Debug</div>,
-  },
-  {
-    path: "/debug/run",
-    element: <div>Debug Run</div>,
-  },
 ]);
 
 export default router;
-
-function RedirectToChannelsOrg() {
-  const org = useAtomValue(orgAtom);
-  // Replace with your logic
-  return <Navigate to={`/org/${org}/channels`} />;
-}
-
-function Channel() {
-  // Add logic if needed
-  return <div>Channel main page<Outlet /></div>;
-}
-
-function RedirectToMusicdex() {
-  // Add logic for redirection
-  return <div>Redirecting to Musicdex...</div>;
-}
-
-function Settings() {
-  // Add logic if needed
-  return <div>Settings main page<Outlet /></div>;
-}
-
-function About() {
-  // Add logic if needed
-  return <div>About main page<Outlet /></div>;
-}
diff --git a/packages/react/src/routes/settings.tsx b/packages/react/src/routes/settings.tsx
new file mode 100644
index 000000000..9025eb7e9
--- /dev/null
+++ b/packages/react/src/routes/settings.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export default function Settings() {
+  return (
+    <div>
+      Settings <Outlet />
+    </div>
+  );
+}