diff --git a/web/src/pages/ResourcesDashboard.tsx b/web/src/pages/ResourcesDashboard.tsx
index 1b2785d9..284d194b 100644
--- a/web/src/pages/ResourcesDashboard.tsx
+++ b/web/src/pages/ResourcesDashboard.tsx
@@ -11,6 +11,7 @@ import ResourceItem from "@/components/ResourceItem";
import ResourceSearchBar from "@/components/ResourceSearchBar";
import Dropdown from "@/components/kit/Dropdown";
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import useCurrentUser from "@/hooks/useCurrentUser";
import useEvent from "@/hooks/useEvent";
import useLoading from "@/hooks/useLoading";
import { useResourceStore } from "@/store/module";
@@ -19,6 +20,7 @@ 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 [selectedList, setSelectedList] = useState
>([]);
@@ -27,6 +29,12 @@ const ResourcesDashboard = () => {
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 cc8141a8..0866d633 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -1,5 +1,6 @@
import { Option, Select } from "@mui/joy";
-import { useState } from "react";
+import { isEqual } from "lodash-es";
+import { useEffect, useState } from "react";
import BetaBadge from "@/components/BetaBadge";
import Icon from "@/components/Icon";
import MobileHeader from "@/components/MobileHeader";
@@ -9,7 +10,7 @@ import PreferencesSection from "@/components/Settings/PreferencesSection";
import SSOSection from "@/components/Settings/SSOSection";
import StorageSection from "@/components/Settings/StorageSection";
import SystemSection from "@/components/Settings/SystemSection";
-import { useUserStore } from "@/store/module";
+import useCurrentUser from "@/hooks/useCurrentUser";
import { useTranslate } from "@/utils/i18n";
import "@/less/setting.less";
@@ -21,12 +22,17 @@ interface State {
const Setting = () => {
const t = useTranslate();
- const userStore = useUserStore();
- const user = userStore.state.user;
+ const user = useCurrentUser();
const [state, setState] = useState({
selectedSection: "my-account",
});
- const isHost = user?.role === "HOST";
+ const isHost = isEqual(user.role, "HOST");
+
+ useEffect(() => {
+ if (!user) {
+ window.location.href = "/auth";
+ }
+ }, []);
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
setState({
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index 48674e00..0f3abe37 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -1,12 +1,11 @@
import { lazy } from "react";
-import { createBrowserRouter, redirect } from "react-router-dom";
-import { isNullorUndefined } from "@/helpers/utils";
+import { createBrowserRouter } from "react-router-dom";
+import App from "@/App";
import Archived from "@/pages/Archived";
import DailyReview from "@/pages/DailyReview";
import ResourcesDashboard from "@/pages/ResourcesDashboard";
import Setting from "@/pages/Setting";
-import store from "@/store";
-import { initialGlobalState, initialUserState } from "@/store/module";
+import { initialGlobalState } from "@/store/module";
const Root = lazy(() => import("@/layouts/Root"));
const Auth = lazy(() => import("@/pages/Auth"));
@@ -35,210 +34,70 @@ const initialGlobalStateLoader = (() => {
})();
const router = createBrowserRouter([
- {
- path: "/auth",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
- return null;
- },
- },
- {
- path: "/auth/callback",
- element: ,
- },
{
path: "/",
- element: ,
+ element: ,
children: [
{
- path: "",
- element: ,
+ path: "/auth",
+ element: ,
loader: async () => {
await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
- const { systemStatus } = store.getState().global;
-
- // if user is authenticated, then show home
- if (!isNullorUndefined(user)) {
- return null;
- }
-
- // if user is anonymous, then redirect to auth if disabled public memos, else redirect to explore
- if (systemStatus.disablePublicMemos) {
- return redirect("/auth");
- }
-
- return redirect("/explore");
+ return null;
},
},
{
- path: "explore",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
- const { systemStatus } = store.getState().global;
-
- if (isNullorUndefined(user) && systemStatus.disablePublicMemos) {
- return redirect("/auth");
- }
- return null;
- },
+ path: "/auth/callback",
+ element: ,
},
{
- path: "review",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
-
- if (isNullorUndefined(user)) {
- return redirect("/auth");
- }
- return null;
- },
+ path: "/",
+ element: ,
+ children: [
+ {
+ path: "",
+ element: ,
+ },
+ {
+ path: "explore",
+ element: ,
+ },
+ {
+ path: "review",
+ element: ,
+ },
+ {
+ path: "resources",
+ element: ,
+ },
+ {
+ path: "archived",
+ element: ,
+ },
+ {
+ path: "setting",
+ element: ,
+ },
+ ],
},
{
- path: "resources",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
-
- if (isNullorUndefined(user)) {
- return redirect("/auth");
- }
- return null;
- },
+ path: "/m/:memoId",
+ element: ,
},
{
- path: "archived",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
-
- if (isNullorUndefined(user)) {
- return redirect("/auth");
- }
- return null;
- },
+ path: "/m/:memoId/embed",
+ element: ,
},
{
- path: "setting",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
-
- if (isNullorUndefined(user)) {
- return redirect("/auth");
- }
- return null;
- },
+ path: "/u/:username",
+ element: ,
+ },
+ {
+ path: "*",
+ element: ,
},
],
},
- {
- path: "/m/:memoId",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
-
- const { user } = store.getState().user;
- const { systemStatus } = store.getState().global;
-
- if (isNullorUndefined(user) && systemStatus.disablePublicMemos) {
- return redirect("/auth");
- }
- return null;
- },
- },
- {
- path: "/m/:memoId/embed",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
- return null;
- },
- },
- {
- path: "/u/:username",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
-
- try {
- await initialUserState();
- } catch (error) {
- // do nth
- }
- return null;
- },
- },
- {
- path: "*",
- element: ,
- loader: async () => {
- await initialGlobalStateLoader();
- return null;
- },
- },
]);
export default router;
diff --git a/web/src/store/module/user.ts b/web/src/store/module/user.ts
index 5662cbdb..471e8d0d 100644
--- a/web/src/store/module/user.ts
+++ b/web/src/store/module/user.ts
@@ -68,6 +68,7 @@ export const initialUserState = async () => {
if (user.setting.appearance) {
store.dispatch(setAppearance(user.setting.appearance));
}
+ return user;
}
};
diff --git a/web/src/store/v1/user.ts b/web/src/store/v1/user.ts
index 58fad286..87cc4548 100644
--- a/web/src/store/v1/user.ts
+++ b/web/src/store/v1/user.ts
@@ -39,7 +39,7 @@ const useUserV1Store = create()((set, get) => ({
},
getUserByUsername: (username: string) => {
const userMap = get().userMapByUsername;
- return userMap[username] as User;
+ return userMap[username];
},
updateUser: async (user: Partial, updateMask: string[]) => {
const {