chore: update router config

web/package.json

@@ -18,7 +18,7 @@
     "react-dom": "^18.1.0",
     "react-feather": "^2.0.10",
     "react-redux": "^8.0.1",
-    "react-router-dom": "6"
+    "react-router-dom": "^6.4.0"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.5",

web/src/App.tsx

@@ -1,59 +1,8 @@
-import { useEffect } from "react";
+import { RouterProvider } from "react-router-dom";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import router from "./router";
-import { userService, workspaceService } from "./services";
-import useLoading from "./hooks/useLoading";
-import Only from "./components/common/OnlyWhen";
-import Auth from "./pages/Auth";
-import Home from "./pages/Home";
-import WorkspaceDetail from "./pages/WorkspaceDetail";
-import UserDetail from "./pages/UserDetail";
-import ShortcutRedirector from "./pages/ShortcutRedirector";
-
-const pathnameWhitelist = [/\/.+?\/go\/.+/];
 
 function App() {
-  const navigate = useNavigate();
+  return <RouterProvider router={router} />;
-  const location = useLocation();
-  const pageLoadingStatus = useLoading();
-
-  useEffect(() => {
-    let needAuth = true;
-
-    for (const regexp of pathnameWhitelist) {
-      if (regexp.test(location.pathname)) {
-        needAuth = false;
-        break;
-      }
-    }
-    if (!needAuth) {
-      pageLoadingStatus.setFinish();
-      return;
-    }
-
-    userService.initialState().finally(() => {
-      if (!userService.getState().user) {
-        pageLoadingStatus.setFinish();
-        navigate("/user/auth");
-        return;
-      }
-
-      Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
-        pageLoadingStatus.setFinish();
-      });
-    });
-  }, []);
-
-  return (
-    <Only when={!pageLoadingStatus.isLoading}>
-      <Routes>
-        <Route index element={<Home />} />
-        <Route path="/user/auth" element={<Auth />} />
-        <Route path="/account/" element={<UserDetail />} />
-        <Route path="/:workspaceName" element={<WorkspaceDetail />} />
-        <Route path="/:workspaceName/go/:shortcutName" element={<ShortcutRedirector />} />
-      </Routes>
-    </Only>
-  );
 }
 
 export default App;

web/src/components/Header.tsx

@@ -3,7 +3,6 @@ import { useAppSelector } from "../store";
 import { userService } from "../services";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
-import Only from "./common/OnlyWhen";
 import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
 
 const Header: React.FC = () => {
@@ -25,7 +24,7 @@ const Header: React.FC = () => {
           <Link to={"/"} className="text-base font-mono font-medium cursor-pointer">
             Corgi
           </Link>
-          <Only when={workspaceList.length > 0 && activedWorkspace !== undefined}>
+          {workspaceList.length > 0 && activedWorkspace !== undefined && (
             <>
               <span className="font-mono mx-2 text-gray-200">/</span>
               <Dropdown
@@ -45,9 +44,7 @@ const Header: React.FC = () => {
                           className="w-full px-3 leading-10 flex flex-row justify-between items-center text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                         >
                           <span className="truncate">{workspace.name}</span>
-                          <Only when={workspace.name === activedWorkspace?.name}>
+                          {workspace.name === activedWorkspace?.name && <Icon.Check className="w-4 h-auto ml-1 shrink-0" />}
-                            <Icon.Check className="w-4 h-auto ml-1 shrink-0" />
-                          </Only>
                         </Link>
                       );
                     })}
@@ -63,7 +60,7 @@ const Header: React.FC = () => {
                 actionsClassName="!w-48 !-left-4"
               ></Dropdown>
             </>
-          </Only>
+          )}
         </div>
         <div className="relative">
           {user ? (

web/src/components/common/OnlyWhen.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-interface OnlyWhenProps {
-  children: ReactNode;
-  when: boolean;
-}
-
-const OnlyWhen: React.FC<OnlyWhenProps> = (props: OnlyWhenProps) => {
-  const { children, when } = props;
-  return when ? <>{children}</> : null;
-};
-
-const Only = OnlyWhen;
-
-export default Only;

web/src/main.tsx

@@ -1,6 +1,5 @@
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import { BrowserRouter } from "react-router-dom";
 import store from "./store";
 import App from "./App";
 import "./helpers/polyfill";
@@ -9,9 +8,7 @@ import "./css/index.css";
 const container = document.getElementById("root");
 const root = createRoot(container as HTMLElement);
 root.render(
-  <BrowserRouter>
   <Provider store={store}>
     <App />
   </Provider>
-  </BrowserRouter>
 );

web/src/pages/Auth.tsx

@@ -5,7 +5,6 @@ import { validate, ValidatorConfig } from "../helpers/validator";
 import { userService } from "../services";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
 
 const validateConfig: ValidatorConfig = {
@@ -123,9 +122,7 @@ const Auth: React.FC = () => {
           <div className="flex flex-col justify-start items-start w-full mb-4">
             <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
               Corgi
-              <Only when={actionBtnLoadingState.isLoading}>
+              {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
-                <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />
-              </Only>
             </div>
           </div>
           <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>

web/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { workspaceService } from "../services";
+import { useNavigate } from "react-router-dom";
+import { userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -8,10 +9,16 @@ import WorkspaceListView from "../components/WorkspaceListView";
 import showCreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
 
 const Home: React.FC = () => {
+  const navigate = useNavigate();
   const { workspaceList } = useAppSelector((state) => state.workspace);
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
       loadingState.setFinish();
     });

web/src/pages/ShortcutRedirector.tsx

@@ -1,19 +1,26 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import Header from "../components/Header";
 import { getShortcutWithNameAndWorkspaceName } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
+import { userService } from "../services";
 
 interface State {
   errMessage?: string;
 }
 
 const ShortcutRedirector: React.FC = () => {
+  const navigate = useNavigate();
   const params = useParams();
   const [state, setState] = useState<State>();
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     const workspaceName = params.workspaceName || "";
     const shortcutName = params.shortcutName || "";
     getShortcutWithNameAndWorkspaceName(workspaceName, shortcutName)

web/src/pages/UserDetail.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
 import Header from "../components/Header";
 import { showCommonDialog } from "../components/Dialog/CommonDialog";
@@ -8,8 +10,16 @@ import toastHelper from "../components/Toast";
 import showChangePasswordDialog from "../components/ChangePasswordDialog";
 
 const UserDetail: React.FC = () => {
+  const navigate = useNavigate();
   const { user } = useAppSelector((state) => state.user);
 
+  useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+  }, []);
+
   const handleChangePasswordBtnClick = async () => {
     showChangePasswordDialog();
   };

web/src/pages/WorkspaceDetail.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
-import { shortcutService, workspaceService } from "../services";
+import { shortcutService, userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -15,6 +15,7 @@ interface State {
 }
 
 const WorkspaceDetail: React.FC = () => {
+  const navigate = useNavigate();
   const params = useParams();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
@@ -23,6 +24,11 @@ const WorkspaceDetail: React.FC = () => {
   const loadingState = useLoading();
 
   useEffect(() => {
+    if (!userService.getState().user) {
+      navigate("/user/auth");
+      return;
+    }
+
     const workspace = workspaceService.getWorkspaceByName(params.workspaceName ?? "");
     if (!workspace) {
       toastHelper.error("workspace not found");

web/src/router/index.tsx

@@ -0,0 +1,62 @@
+import { createBrowserRouter } from "react-router-dom";
+import { userService, workspaceService } from "../services";
+import Auth from "../pages/Auth";
+import Home from "../pages/Home";
+import UserDetail from "../pages/UserDetail";
+import WorkspaceDetail from "../pages/WorkspaceDetail";
+import ShortcutRedirector from "../pages/ShortcutRedirector";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+    loader: async () => {
+      try {
+        await userService.initialState();
+      } catch (error) {
+        // do nth
+      }
+    },
+  },
+  {
+    path: "/user/auth",
+    element: <Auth />,
+  },
+  {
+    path: "/account",
+    element: <UserDetail />,
+    loader: async () => {
+      try {
+        await userService.initialState();
+      } catch (error) {
+        // do nth
+      }
+    },
+  },
+  {
+    path: "/:workspaceName",
+    element: <WorkspaceDetail />,
+    loader: async () => {
+      try {
+        await userService.initialState();
+        await workspaceService.fetchWorkspaceList();
+      } catch (error) {
+        // do nth
+      }
+    },
+  },
+  {
+    path: "/:workspaceName/go/:shortcutName",
+    element: <ShortcutRedirector />,
+    loader: async () => {
+      try {
+        await userService.initialState();
+        await workspaceService.fetchWorkspaceList();
+      } catch (error) {
+        // do nth
+      }
+    },
+  },
+]);
+
+export default router;

web/yarn.lock

@@ -229,13 +229,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.7.6":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
-  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -383,6 +376,11 @@
     redux-thunk "^2.4.1"
     reselect "^4.1.5"
 
+"@remix-run/router@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.0.tgz#a2189335a5f6428aa904ccc291988567018b6e01"
+  integrity sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A==
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1497,13 +1495,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-history@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -2172,20 +2163,19 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@6:
+react-router-dom@^6.4.0:
-  version "6.3.0"
+  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0.tgz#a7d7c394c9e730b045cdd4f5d6c2d1ccb9e26947"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  integrity sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg==
   dependencies:
-    history "^5.2.0"
+    react-router "6.4.0"
-    react-router "6.3.0"
 
-react-router@6.3.0:
+react-router@6.4.0:
-  version "6.3.0"
+  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0.tgz#68449c23dc893fc7a57db068c19987be1de72edb"
-  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  integrity sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg==
   dependencies:
-    history "^5.2.0"
+    "@remix-run/router" "1.0.0"
 
 react@^18.1.0:
   version "18.2.0"