Merge remote-tracking branch 'origin/master'

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/NotFound/__tests__/NotFound.tsx

@@ -1,21 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from "@testing-library/react"
-import { MemoryRouter } from "react-router-dom"
-
-import NotFound from "../index"
-
-describe("<NotFound />", () => {
-    it("renders", () => {
-        const tree = render(
-            <MemoryRouter>
-                {/*
-          @ts-expect-error */}
-                <NotFound />
-            </MemoryRouter>
-        ).container.firstChild
-
-        expect(tree).toMatchSnapshot()
-    })
-})

src/pages/NotFound/__tests__/__snapshots__/NotFound.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NotFound /> renders 1`] = `
-<div
-  class="NotFound"
->
-  <p>
-    Oops, Page was not found!
-  </p>
-</div>
-`;

src/pages/NotFound/index.tsx

@@ -13,9 +13,11 @@ const NotFound = ({ staticContext }: Props) => {
     if (staticContext) staticContext.statusCode = 404
 
     return (
-        <div className={styles.NotFound}>
-            <Helmet title="Oops" />
-            <p>Oops, Page was not found!</p>
+        <div className={styles.notFoundPage}>
+            <div className={styles.notFoundContent}>
+                <Helmet title="Oops" />
+                <p>Oops, page was not found!</p>
+            </div>
         </div>
     )
 }

src/pages/NotFound/styles.module.scss

@@ -1,3 +1,9 @@
-.NotFound {
-    padding: 0 15px;
+@import "../../theme/mixins";
+
+.notFoundPage {
+    @include page-wrapper-center;
+}
+
+.notFoundContent {
+    @include page-content-wrapper;
 }

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)()}
@@ -52,4 +52,4 @@ const Home: FC<Props> = (): JSX.Element => {
 // Fetch server-side data here
 export const loadData = (): AppThunk[] => [fetchWishListIfNeed(), fetchJavGameListIfNeed()]
 
-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,
             },