chore: update state initial loader

web/src/App.tsx

@@ -5,7 +5,8 @@ import { Outlet } from "react-router-dom";
 import storage from "./helpers/storage";
 import { getSystemColorScheme } from "./helpers/utils";
 import Loading from "./pages/Loading";
-import { initialGlobalState, initialUserState, useGlobalStore } from "./store/module";
+import store from "./store";
+import { useGlobalStore } from "./store/module";
 import { useUserV1Store } from "./store/v1";
 
 const App = () => {
@@ -18,21 +19,10 @@ const App = () => {
 
   useEffect(() => {
     const initialState = async () => {
-      try {
-        await initialGlobalState();
-      } catch (error) {
-        // do nothing
+      const { user } = store.getState().user;
+      if (user) {
+        await userV1Store.getOrFetchUserByUsername(user.username);
       }
-
-      try {
-        const user = await initialUserState();
-        if (user) {
-          await userV1Store.getOrFetchUserByUsername(user.username);
-        }
-      } catch (error) {
-        // do nothing.
-      }
-
       setLoading(false);
     };
 

web/src/pages/Archived.tsx

@@ -4,7 +4,6 @@ import ArchivedMemo from "@/components/ArchivedMemo";
 import Empty from "@/components/Empty";
 import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
-import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
@@ -12,7 +11,6 @@ import "@/less/archived.less";
 
 const Archived = () => {
   const t = useTranslate();
-  const user = useCurrentUser();
   const memoStore = useMemoStore();
   const loadingState = useLoading();
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
@@ -21,12 +19,6 @@ const Archived = () => {
   const filter = filterStore.state;
   const { text: textQuery } = filter;
 
-  useEffect(() => {
-    if (!user) {
-      window.location.href = "/auth";
-    }
-  }, []);
-
   useEffect(() => {
     memoStore
       .fetchArchivedMemos()

web/src/pages/DailyReview.tsx

@@ -45,12 +45,6 @@ const DailyReview = () => {
     })
     .sort((a, b) => getTimeStampByDate(a.displayTs) - getTimeStampByDate(b.displayTs));
 
-  useEffect(() => {
-    if (!user) {
-      window.location.href = "/auth";
-    }
-  }, []);
-
   useEffect(() => {
     let offset = 0;
     const fetchMoreMemos = async () => {

web/src/pages/Home.tsx

-import { useEffect } from "react";
 import HomeSidebar from "@/components/HomeSidebar";
 import MemoEditor from "@/components/MemoEditor";
 import MemoFilter from "@/components/MemoFilter";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
-import useCurrentUser from "@/hooks/useCurrentUser";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import { useUserStore } from "@/store/module";
 
 const Home = () => {
-  const globalStore = useGlobalStore();
   const userStore = useUserStore();
-  const user = useCurrentUser();
-
-  useEffect(() => {
-    if (!user) {
-      const systemStatus = globalStore.state.systemStatus;
-      if (systemStatus.disablePublicMemos) {
-        window.location.href = "/auth";
-      } else {
-        window.location.href = "/explore";
-      }
-    }
-  }, []);
 
   return (
     <div className="w-full flex flex-row justify-start items-start">

web/src/pages/ResourcesDashboard.tsx

@@ -10,7 +10,6 @@ import ResourceCard from "@/components/ResourceCard";
 import ResourceSearchBar from "@/components/ResourceSearchBar";
 import Dropdown from "@/components/kit/Dropdown";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useResourceStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
@@ -18,19 +17,12 @@ import { useTranslate } from "@/utils/i18n";
 const ResourcesDashboard = () => {
   const t = useTranslate();
   const loadingState = useLoading();
-  const user = useCurrentUser();
   const resourceStore = useResourceStore();
   const resources = resourceStore.state.resources;
   const [queryText, setQueryText] = useState<string>("");
   const [dragActive, setDragActive] = useState(false);
   const [isComplete, setIsComplete] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (!user) {
-      window.location.href = "/auth";
-    }
-  }, []);
-
   useEffect(() => {
     resourceStore
       .fetchResourceListWithLimit(DEFAULT_MEMO_LIMIT)

web/src/pages/Setting.tsx

 import { Option, Select } from "@mui/joy";
 import { isEqual } from "lodash-es";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import BetaBadge from "@/components/BetaBadge";
 import Icon from "@/components/Icon";
 import MobileHeader from "@/components/MobileHeader";
@@ -28,12 +28,6 @@ const Setting = () => {
   });
   const isHost = isEqual(user.role, "HOST");
 
-  useEffect(() => {
-    if (!user) {
-      window.location.href = "/auth";
-    }
-  }, []);
-
   const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
     setState({
       selectedSection: settingSection,

web/src/router/index.tsx

 import { lazy } from "react";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, redirect } from "react-router-dom";
 import App from "@/App";
+import { isNullorUndefined } from "@/helpers/utils";
 import Archived from "@/pages/Archived";
 import DailyReview from "@/pages/DailyReview";
 import ResourcesDashboard from "@/pages/ResourcesDashboard";
 import Setting from "@/pages/Setting";
-import { initialGlobalState } from "@/store/module";
+import store from "@/store";
+import { initialGlobalState, initialUserState } from "@/store/module";
 
 const Root = lazy(() => import("@/layouts/Root"));
 const Auth = lazy(() => import("@/pages/Auth"));
@@ -37,14 +39,14 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
+    loader: async () => {
+      await initialGlobalStateLoader();
+      return null;
+    },
     children: [
       {
         path: "/auth",
         element: <Auth />,
-        loader: async () => {
-          await initialGlobalStateLoader();
-          return null;
-        },
       },
       {
         path: "/auth/callback",
@@ -53,10 +55,25 @@ const router = createBrowserRouter([
       {
         path: "/",
         element: <Root />,
+        loader: async () => {
+          try {
+            await initialUserState();
+          } catch (error) {
+            // do nth
+          }
+          return null;
+        },
         children: [
           {
             path: "",
             element: <Home />,
+            loader: async () => {
+              const { user } = store.getState().user;
+
+              if (isNullorUndefined(user)) {
+                return redirect("/explore");
+              }
+            },
           },
           {
             path: "explore",
@@ -65,18 +82,46 @@ const router = createBrowserRouter([
           {
             path: "review",
             element: <DailyReview />,
+            loader: async () => {
+              const { user } = store.getState().user;
+
+              if (isNullorUndefined(user)) {
+                return redirect("/explore");
+              }
+            },
           },
           {
             path: "resources",
             element: <ResourcesDashboard />,
+            loader: async () => {
+              const { user } = store.getState().user;
+
+              if (isNullorUndefined(user)) {
+                return redirect("/explore");
+              }
+            },
           },
           {
             path: "archived",
             element: <Archived />,
+            loader: async () => {
+              const { user } = store.getState().user;
+
+              if (isNullorUndefined(user)) {
+                return redirect("/explore");
+              }
+            },
           },
           {
             path: "setting",
             element: <Setting />,
+            loader: async () => {
+              const { user } = store.getState().user;
+
+              if (isNullorUndefined(user)) {
+                return redirect("/explore");
+              }
+            },
           },
         ],
       },