chore: update router

web/src/pages/Explore.tsx

@@ -1,9 +1,8 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
-import { memoService, userService } from "../services";
+import { memoService } from "../services";
-import { isNullorUndefined } from "../helpers/utils";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import MemoContent from "../components/MemoContent";
@@ -16,7 +15,6 @@ interface State {
 
 const Explore = () => {
   const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
   const user = useAppSelector((state) => state.user.user);
   const location = useAppSelector((state) => state.location);
   const [state, setState] = useState<State>({
@@ -25,12 +23,6 @@ const Explore = () => {
   const loadingState = useLoading();
 
   useEffect(() => {
-    const { host } = userService.getState();
-    if (isNullorUndefined(host)) {
-      navigate("/auth");
-      return;
-    }
-
     memoService.fetchAllMemos().then((memos) => {
       setState({
         memos,

web/src/pages/Home.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { globalService, userService } from "../services";
 import { useAppSelector } from "../store";
-import { isNullorUndefined } from "../helpers/utils";
 import toastHelper from "../components/Toast";
 import Sidebar from "../components/Sidebar";
 import MemosHeader from "../components/MemosHeader";
@@ -15,25 +14,15 @@ import "../less/home.less";
 function Home() {
   const { t } = useTranslation();
   const location = useLocation();
-  const navigate = useNavigate();
   const user = useAppSelector((state) => state.user.user);
 
   useEffect(() => {
-    const { host, owner, user } = userService.getState();
+    const { owner } = userService.getState();
-
-    if (isNullorUndefined(host)) {
-      navigate("/auth");
-      return;
-    }
 
     if (userService.isVisitorMode()) {
       if (!owner) {
         toastHelper.error(t("message.user-not-found"));
       }
-    } else {
-      if (isNullorUndefined(user)) {
-        navigate("/explore");
-      }
     }
   }, [location]);
 

web/src/pages/MemoDetail.tsx

@@ -1,10 +1,9 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
-import { memoService, userService } from "../services";
+import { memoService } from "../services";
 import { UNKNOWN_ID } from "../helpers/consts";
-import { isNullorUndefined } from "../helpers/utils";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import toastHelper from "../components/Toast";
@@ -18,7 +17,6 @@ interface State {
 
 const MemoDetail = () => {
   const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
   const params = useParams();
   const user = useAppSelector((state) => state.user.user);
   const location = useAppSelector((state) => state.location);
@@ -30,12 +28,6 @@ const MemoDetail = () => {
   const loadingState = useLoading();
 
   useEffect(() => {
-    const { host } = userService.getState();
-    if (isNullorUndefined(host)) {
-      navigate("/auth");
-      return;
-    }
-
     const memoId = Number(params.memoId);
     if (memoId && !isNaN(memoId)) {
       memoService

web/src/router/index.tsx

@@ -1,4 +1,5 @@
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, redirect } from "react-router-dom";
+import { isNullorUndefined } from "../helpers/utils";
 import { userService } from "../services";
 import Auth from "../pages/Auth";
 import Explore from "../pages/Explore";
@@ -6,6 +7,10 @@ import Home from "../pages/Home";
 import MemoDetail from "../pages/MemoDetail";
 
 const router = createBrowserRouter([
+  {
+    path: "/auth",
+    element: <Auth />,
+  },
   {
     path: "/",
     element: <Home />,
@@ -15,12 +20,15 @@ const router = createBrowserRouter([
       } catch (error) {
         // do nth
       }
+
+      const { host, user } = userService.getState();
+      if (isNullorUndefined(host)) {
+        return redirect("/auth");
+      } else if (isNullorUndefined(user)) {
+        return redirect("/explore");
+      }
     },
   },
-  {
-    path: "/auth",
-    element: <Auth />,
-  },
   {
     path: "/u/:userId",
     element: <Home />,
@@ -30,6 +38,11 @@ const router = createBrowserRouter([
       } catch (error) {
         // do nth
       }
+
+      const { host } = userService.getState();
+      if (isNullorUndefined(host)) {
+        return redirect("/auth");
+      }
     },
   },
   {
@@ -41,6 +54,11 @@ const router = createBrowserRouter([
       } catch (error) {
         // do nth
       }
+
+      const { host } = userService.getState();
+      if (isNullorUndefined(host)) {
+        return redirect("/auth");
+      }
     },
   },
   {
@@ -52,6 +70,11 @@ const router = createBrowserRouter([
       } catch (error) {
         // do nth
       }
+
+      const { host } = userService.getState();
+      if (isNullorUndefined(host)) {
+        return redirect("/auth");
+      }
     },
   },
 ]);

web/src/store/index.ts

@@ -1,5 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useSelector } from "react-redux";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import globalReducer from "./modules/global";
 import userReducer from "./modules/user";
 import memoReducer from "./modules/memo";
@@ -19,7 +19,9 @@ const store = configureStore({
 });
 
 type AppState = ReturnType<typeof store.getState>;
+type AppDispatch = typeof store.dispatch;
 
 export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
+export const useAppDispatch: () => AppDispatch = useDispatch;
 
 export default store;