chore: update router

web/src/hooks/useLoading.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-function useLoading(initialState = true) {
+export default function useLoading(initialState = true) {
   const [state, setState] = useState({ isLoading: initialState, isFailed: false, isSucceed: false });
 
   return {
@@ -31,5 +31,3 @@ function useLoading(initialState = true) {
     },
   };
 }
-
-export default useLoading;

web/src/hooks/useRefresh.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 
-function useRefresh() {
+export default function useRefresh() {
   const [, setBoolean] = useState<boolean>(false);
 
   const refresh = useCallback(() => {
@@ -11,5 +11,3 @@ function useRefresh() {
 
   return refresh;
 }
-
-export default useRefresh;

web/src/less/home.less

@@ -1,4 +1,5 @@
 @import "./mixin.less";
+@import "./memos-header.less";
 
 #root {
   background-color: #f6f5f4;
@@ -7,4 +8,8 @@
 #page-wrapper {
   @apply w-full h-full m-auto grid max-w-4xl mx-auto;
   grid-template-columns: min-content 1fr;
+
+  .memos-wrapper {
+    @apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10;
+  }
 }

web/src/less/memos.less

@@ -1,6 +0,0 @@
-@import "./mixin.less";
-@import "./memos-header.less";
-
-.memos-wrapper {
-  @apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10;
-}

web/src/pages/Home.tsx

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
 import { locationService, userService } from "../services";
-import { homeRouterSwitch } from "../routers";
-import { useAppSelector } from "../store";
 import Sidebar from "../components/Sidebar";
 import useLoading from "../hooks/useLoading";
+import MemosHeader from "../components/MemosHeader";
+import MemoEditor from "../components/MemoEditor";
+import MemoFilter from "../components/MemoFilter";
+import MemoList from "../components/MemoList";
 import "../less/home.less";
 
 function Home() {
-  const pathname = useAppSelector((state) => state.location.pathname);
   const loadingState = useLoading();
 
   useEffect(() => {
@@ -35,7 +36,12 @@ function Home() {
       {loadingState.isLoading ? null : (
         <section id="page-wrapper">
           <Sidebar />
-          {homeRouterSwitch(pathname)}
+          <main className="memos-wrapper">
+            <MemosHeader />
+            <MemoEditor />
+            <MemoFilter />
+            <MemoList />
+          </main>
         </section>
       )}
     </>

web/src/pages/Memos.tsx

@@ -1,18 +0,0 @@
-import MemoEditor from "../components/MemoEditor";
-import MemosHeader from "../components/MemosHeader";
-import MemoFilter from "../components/MemoFilter";
-import MemoList from "../components/MemoList";
-import "../less/memos.less";
-
-function Memos() {
-  return (
-    <main className="memos-wrapper">
-      <MemosHeader />
-      <MemoEditor />
-      <MemoFilter />
-      <MemoList />
-    </main>
-  );
-}
-
-export default Memos;

web/src/routers/homeRouter.tsx

@@ -1,7 +0,0 @@
-import Memos from "../pages/Memos";
-
-const homeRouter = {
-  "*": <Memos />,
-};
-
-export default homeRouter;

web/src/routers/index.ts

@@ -1,5 +1,4 @@
 import appRouter from "./appRouter";
-import homeRouter from "./homeRouter";
 
 // just like React-Router
 interface Router {
@@ -19,4 +18,3 @@ const routerSwitch = (router: Router) => {
 };
 
 export const appRouterSwitch = routerSwitch(appRouter);
-export const homeRouterSwitch = routerSwitch(homeRouter);