From 936fe5ac9dd30e3a791d5c8ac2f474a48ed941e0 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 15 Sep 2023 08:31:19 +0800 Subject: [PATCH] chore: update state initial loader --- web/src/App.tsx | 20 +++------- web/src/pages/Archived.tsx | 8 ---- web/src/pages/DailyReview.tsx | 6 --- web/src/pages/Home.tsx | 17 +-------- web/src/pages/ResourcesDashboard.tsx | 8 ---- web/src/pages/Setting.tsx | 8 +--- web/src/router/index.tsx | 57 +++++++++++++++++++++++++--- 7 files changed, 58 insertions(+), 66 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 30950217..d7805007 100644 --- a/web/src/App.tsx +++ b/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); }; diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index 2e7c358f..6c5548c5 100644 --- a/web/src/pages/Archived.tsx +++ b/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([]); @@ -21,12 +19,6 @@ const Archived = () => { const filter = filterStore.state; const { text: textQuery } = filter; - useEffect(() => { - if (!user) { - window.location.href = "/auth"; - } - }, []); - useEffect(() => { memoStore .fetchArchivedMemos() diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx index 8bd25451..033df011 100644 --- a/web/src/pages/DailyReview.tsx +++ b/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 () => { diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index f45c5807..a3b04ed2 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -1,27 +1,12 @@ -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 (
diff --git a/web/src/pages/ResourcesDashboard.tsx b/web/src/pages/ResourcesDashboard.tsx index 7ccf9cdb..ddfa6468 100644 --- a/web/src/pages/ResourcesDashboard.tsx +++ b/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(""); const [dragActive, setDragActive] = useState(false); const [isComplete, setIsComplete] = useState(false); - useEffect(() => { - if (!user) { - window.location.href = "/auth"; - } - }, []); - useEffect(() => { resourceStore .fetchResourceListWithLimit(DEFAULT_MEMO_LIMIT) diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx index cd72a7a5..d6954653 100644 --- a/web/src/pages/Setting.tsx +++ b/web/src/pages/Setting.tsx @@ -1,6 +1,6 @@ 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, diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx index 0f3abe37..de1bf552 100644 --- a/web/src/router/index.tsx +++ b/web/src/router/index.tsx @@ -1,11 +1,13 @@ 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: , + loader: async () => { + await initialGlobalStateLoader(); + return null; + }, children: [ { path: "/auth", element: , - loader: async () => { - await initialGlobalStateLoader(); - return null; - }, }, { path: "/auth/callback", @@ -53,10 +55,25 @@ const router = createBrowserRouter([ { path: "/", element: , + loader: async () => { + try { + await initialUserState(); + } catch (error) { + // do nth + } + return null; + }, children: [ { path: "", element: , + 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: , + loader: async () => { + const { user } = store.getState().user; + + if (isNullorUndefined(user)) { + return redirect("/explore"); + } + }, }, { path: "resources", element: , + loader: async () => { + const { user } = store.getState().user; + + if (isNullorUndefined(user)) { + return redirect("/explore"); + } + }, }, { path: "archived", element: , + loader: async () => { + const { user } = store.getState().user; + + if (isNullorUndefined(user)) { + return redirect("/explore"); + } + }, }, { path: "setting", element: , + loader: async () => { + const { user } = store.getState().user; + + if (isNullorUndefined(user)) { + return redirect("/explore"); + } + }, }, ], },