chore: tweak route layout

web/src/App.tsx

@@ -1,5 +1,5 @@
 import { useColorScheme } from "@mui/joy";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 import storage from "./helpers/storage";
@@ -16,7 +16,6 @@ const App = () => {
   const globalStore = useGlobalStore();
   const workspaceSettingStore = useWorkspaceSettingStore();
   const userStore = useUserStore();
-  const [loading, setLoading] = useState(true);
   const { appearance, locale, systemStatus } = globalStore.state;
   const userSetting = userStore.userSetting;
   const workspaceGeneralSetting =
@@ -30,19 +29,6 @@ const App = () => {
     }
   }, [systemStatus.host]);
 
-  useEffect(() => {
-    const initialState = async () => {
-      await workspaceSettingStore.fetchWorkspaceSetting(WorkspaceSettingKey.WORKSPACE_SETTING_GENERAL);
-      try {
-        await userStore.fetchCurrentUser();
-      } catch (error) {
-        // Do nothing.
-      }
-    };
-
-    Promise.all([initialState()]).then(() => setLoading(false));
-  }, []);
-
   useEffect(() => {
     const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleColorSchemeChange = (e: MediaQueryListEvent) => {
@@ -132,7 +118,7 @@ const App = () => {
     }
   }, [mode]);
 
-  return loading ? null : <Outlet />;
+  return <Outlet />;
 };
 
 export default App;

web/src/layouts/CommonContextProvider.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { initialGlobalState } from "@/store/module";
+import { useUserStore, useWorkspaceSettingStore } from "@/store/v1";
+import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const CommonContextProvider = (props: Props) => {
+  const workspaceSettingStore = useWorkspaceSettingStore();
+  const userStore = useUserStore();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const initialState = async () => {
+      await initialGlobalState();
+      await workspaceSettingStore.fetchWorkspaceSetting(WorkspaceSettingKey.WORKSPACE_SETTING_GENERAL);
+      try {
+        await userStore.fetchCurrentUser();
+      } catch (error) {
+        // Do nothing.
+      }
+    };
+
+    Promise.all([initialState()]).then(() => setLoading(false));
+  }, []);
+
+  return loading ? null : <>{props.children}</>;
+};
+
+export default CommonContextProvider;

web/src/layouts/HomeLayout.tsx

@@ -1,17 +1,34 @@
 import { Button, IconButton, Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import { Suspense } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import Icon from "@/components/Icon";
 import Navigation from "@/components/Navigation";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import Loading from "@/pages/Loading";
+import { Routes } from "@/router";
 
-function Root() {
+const HomeLayout = () => {
+  const navigateTo = useNavigateTo();
+  const location = useLocation();
   const { sm } = useResponsiveWidth();
+  const currentUser = useCurrentUser();
   const [collapsed, setCollapsed] = useLocalStorage<boolean>("navigation-collapsed", false);
 
+  // Redirect to explore page if not logged in.
+  if (
+    !currentUser &&
+    ([Routes.HOME, Routes.TIMELINE, Routes.RESOURCES, Routes.INBOX, Routes.ARCHIVED, Routes.SETTING] as string[]).includes(
+      location.pathname,
+    )
+  ) {
+    navigateTo("/explore");
+    return;
+  }
+
   return (
     <div className="w-full min-h-full">
       <div
@@ -56,6 +73,6 @@ function Root() {
       </div>
     </div>
   );
-}
+};
 
-export default Root;
+export default HomeLayout;

web/src/main.tsx

@@ -9,6 +9,7 @@ import "./css/global.css";
 import "./css/tailwind.css";
 import "./helpers/polyfill";
 import "./i18n";
+import CommonContextProvider from "./layouts/CommonContextProvider";
 import "./less/highlight.less";
 import router from "./router";
 import store from "./store";
@@ -25,7 +26,9 @@ import theme from "./theme";
   root.render(
     <Provider store={store}>
       <CssVarsProvider theme={theme}>
-        <RouterProvider router={router} />
+        <CommonContextProvider>
+          <RouterProvider router={router} />
+        </CommonContextProvider>
         <Toaster position="top-right" />
       </CssVarsProvider>
     </Provider>,

web/src/router/AuthStatusProvider.tsx

@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-import useCurrentUser from "@/hooks/useCurrentUser";
-import useNavigateTo from "@/hooks/useNavigateTo";
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const AuthStatusProvider = (props: Props) => {
-  const navigateTo = useNavigateTo();
-  const currentUser = useCurrentUser();
-
-  useEffect(() => {
-    if (!currentUser) {
-      // If not logged in, redirect to explore page by default.
-      navigateTo("/explore");
-    }
-  }, []);
-
-  if (!currentUser) {
-    return null;
-  }
-
-  return <>{props.children}</>;
-};
-
-export default AuthStatusProvider;

web/src/router/index.tsx

@@ -1,11 +1,9 @@
 import { lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
+import HomeLayout from "@/layouts/HomeLayout";
 import SuspenseWrapper from "@/layouts/SuspenseWrapper";
-import { initialGlobalState } from "@/store/module";
-import AuthStatusProvider from "./AuthStatusProvider";
 
-const Root = lazy(() => import("@/layouts/Root"));
 const SignIn = lazy(() => import("@/pages/SignIn"));
 const SignUp = lazy(() => import("@/pages/SignUp"));
 const AuthCallback = lazy(() => import("@/pages/AuthCallback"));
@@ -22,23 +20,22 @@ const About = lazy(() => import("@/pages/About"));
 const NotFound = lazy(() => import("@/pages/NotFound"));
 const PermissionDenied = lazy(() => import("@/pages/PermissionDenied"));
 
-const initialGlobalStateLoader = async () => {
-  try {
-    await initialGlobalState();
-  } catch (error) {
-    // do nothing.
-  }
-  return null;
-};
+export enum Routes {
+  HOME = "/",
+  TIMELINE = "/timeline",
+  RESOURCES = "/resources",
+  INBOX = "/inbox",
+  ARCHIVED = "/archived",
+  SETTING = "/setting",
+}
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
-    loader: () => initialGlobalStateLoader(),
     children: [
       {
-        path: "/auth/",
+        path: "/auth",
         element: <SuspenseWrapper />,
         children: [
           {
@@ -57,55 +54,31 @@ const router = createBrowserRouter([
       },
       {
         path: "/",
-        element: <Root />,
+        element: <HomeLayout />,
         children: [
           {
-            path: "",
-            element: (
-              <AuthStatusProvider>
-                <Home />
-              </AuthStatusProvider>
-            ),
+            path: Routes.HOME,
+            element: <Home />,
           },
           {
-            path: "timeline",
-            element: (
-              <AuthStatusProvider>
-                <Timeline />
-              </AuthStatusProvider>
-            ),
+            path: Routes.TIMELINE,
+            element: <Timeline />,
           },
           {
-            path: "resources",
-            element: (
-              <AuthStatusProvider>
-                <Resources />
-              </AuthStatusProvider>
-            ),
+            path: Routes.RESOURCES,
+            element: <Resources />,
           },
           {
-            path: "inbox",
-            element: (
-              <AuthStatusProvider>
-                <Inboxes />
-              </AuthStatusProvider>
-            ),
+            path: Routes.INBOX,
+            element: <Inboxes />,
           },
           {
-            path: "archived",
-            element: (
-              <AuthStatusProvider>
-                <Archived />
-              </AuthStatusProvider>
-            ),
+            path: Routes.ARCHIVED,
+            element: <Archived />,
           },
           {
-            path: "setting",
-            element: (
-              <AuthStatusProvider>
-                <Setting />
-              </AuthStatusProvider>
-            ),
+            path: Routes.SETTING,
+            element: <Setting />,
           },
           {
             path: "explore",