Rename home route to wish and create an empty home route

src/pages/Home/HomePage.tsx

@@ -0,0 +1,27 @@
+import { FC, memo } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { Helmet } from "react-helmet"
+
+import { AppThunk } from "../../store"
+import styles from "./styles.module.scss"
+
+export type Props = RouteComponentProps
+
+const fetchUserData = () => () => Promise.resolve()
+
+const HomePage: FC<Props> = (): JSX.Element => (
+    <div className={styles.homePage}>
+        <div className={styles.homeContent}>
+            <Helmet title="Home" />
+            <div>Tableau de bord</div>
+        </div>
+    </div>
+)
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [
+    fetchUserData(),
+    // More pre-fetched actions...
+]
+
+export default memo(HomePage)

src/pages/Home/index.tsx

@@ -1,9 +1,9 @@
 import loadable from "@loadable/component"
 
 import { Loading, ErrorBoundary } from "../../components"
-import { Props, loadData } from "./Home"
+import { Props, loadData } from "./HomePage"
 
-const Home = loadable(() => import("./Home"), {
+const Home = loadable(() => import("./HomePage"), {
     fallback: <Loading />,
 })
 

src/pages/Home/styles.module.scss

@@ -1,3 +1,9 @@
-.home {
-    padding: 0 15px;
+@import "../../theme/mixins";
+
+.homePage {
+    @include page-wrapper-center;
+}
+
+.homeContent {
+    @include page-content-wrapper(600px);
 }

src/pages/Wish/Wish.tsx

@@ -3,7 +3,7 @@ import { RouteComponentProps } from "react-router-dom"
 import { useDispatch, useSelector, shallowEqual } from "react-redux"
 import { Helmet } from "react-helmet"
 
-import { AppState, AppThunk, EntitiesRequest } from "../../store"
+import { AppDispatch, AppState, AppThunk, EntitiesRequest } from "../../store"
 import { fetchJavGameListIfNeed } from "../../store/javGameList"
 import { fetchWishListIfNeed } from "../../store/wishList"
 import { JavGameList, WishAdd } from "../../components"
@@ -34,11 +34,11 @@ function useList<Entity>(
     }
 }
 
-const Home: FC<Props> = (): JSX.Element => {
-    const dispatch = useDispatch()
+const Wish: FC<Props> = (): JSX.Element => {
+    const dispatch = useDispatch<AppDispatch>()
     return (
-        <div className={styles.home}>
-            <Helmet title="Home" />
+        <div className={styles.wish}>
+            <Helmet title="Wish" />
             <WishAdd dispatch={dispatch} />
             {/* {useList((state: AppState) => state.wishList, fetchWishListifNeed)()} */}
             {useList((state: AppState) => state.javGameList, fetchJavGameListIfNeed)()}
@@ -56,4 +56,4 @@ export const loadData = (): AppThunk[] => [
     // More pre-fetched actions...
 ]
 
-export default memo(Home)
+export default memo(Wish)

src/pages/Wish/index.tsx

@@ -0,0 +1,15 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props, loadData } from "./Wish"
+
+const Wish = loadable(() => import("./Wish"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <Wish {...props} />
+    </ErrorBoundary>
+)
+export { loadData }

src/pages/Wish/styles.module.scss

@@ -0,0 +1,3 @@
+.wish {
+    padding: 0 15px;
+}

src/routes/index.ts

@@ -2,6 +2,7 @@ import { RouteConfig } from "react-router-config"
 
 import App from "../app"
 import AsyncHome, { loadData as loadHomeData } from "../pages/Home"
+import AsyncWish, { loadData as loadWishData } from "../pages/Wish"
 import AsyncVolunteerPage, { loadData as loadVolunteerPageData } from "../pages/VolunteerPage"
 import Login from "../pages/Login"
 import Register from "../pages/Register"
@@ -26,10 +27,15 @@ export default [
                 component: Login,
             },
             {
-                path: "/register",
+                path: "/home",
                 component: AsyncHome,
                 loadData: loadHomeData,
             },
+            {
+                path: "/wish",
+                component: AsyncWish,
+                loadData: loadWishData,
+            },
             {
                 component: NotFound,
             },