Add notifications to home page

src/pages/Home/Home.tsx

@@ -0,0 +1,50 @@
+import { FC, memo } from "react"
+import { RouteComponentProps, Link } from "react-router-dom"
+import { useDispatch, useSelector, shallowEqual } from "react-redux"
+import { Helmet } from "react-helmet"
+
+import { AppState, AppThunk } from "../../store"
+import { LoginForm, Notifications } from "../../components"
+import styles from "./styles.module.scss"
+import { fetchVolunteerNotifsSetIfNeed } from "../../store/volunteerNotifsSet"
+
+export type Props = RouteComponentProps
+
+const HomePage: FC<Props> = (): JSX.Element => {
+    const dispatch = useDispatch()
+    const readyStatus = useSelector((state: AppState) => state.volunteerNotifsSet.readyStatus)
+    const volunteerNotifs = useSelector(
+        (state: AppState) => state.volunteerNotifsSet.entity,
+        shallowEqual
+    )
+
+    const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
+    const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual)
+
+    if (!readyStatus || readyStatus === "idle" || readyStatus === "request")
+        return <p>Loading...</p>
+
+    if (jwt) {
+        return <Notifications dispatch={dispatch} jwt={jwt} volunteerNotifs={volunteerNotifs} />
+    }
+    return (
+        <div>
+            <div className={styles.homePage}>
+                <div className={styles.loginContent}>
+                    <Helmet title="LoginPage" />
+                    <LoginForm dispatch={dispatch} error={loginError || ""} />
+                </div>
+            </div>
+            <div className={styles.homePage}>
+                <div className={styles.preRegisterContent}>
+                    <Link to="/preRegister"> S&apos;informer sur le bénévolat </Link>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [fetchVolunteerNotifsSetIfNeed()]
+
+export default memo(HomePage)

src/pages/Home/HomePage.tsx

@@ -1,27 +0,0 @@
-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,15 +1,16 @@
 import loadable from "@loadable/component"
 
 import { Loading, ErrorBoundary } from "../../components"
-import { Props, loadData } from "./HomePage"
+import { Props, loadData } from "./Home"
 
-const Home = loadable(() => import("./HomePage"), {
+const HomePage = loadable(() => import("./Home"), {
     fallback: <Loading />,
 })
 
 export default (props: Props): JSX.Element => (
     <ErrorBoundary>
-        <Home {...props} />
+        <HomePage {...props} />
     </ErrorBoundary>
 )
+
 export { loadData }

src/pages/Home/styles.module.scss

@@ -4,6 +4,14 @@
     @include page-wrapper-center;
 }
 
-.homeContent {
-    @include page-content-wrapper(600px);
+.notificationsContent {
+    @include page-content-wrapper;
+}
+
+.loginContent {
+    @include page-content-wrapper;
+}
+
+.preRegisterContent {
+    @include page-content-wrapper;
 }

src/pages/Login/LoginPage.tsx

@@ -4,7 +4,7 @@ import React, { memo } from "react"
 import { Helmet } from "react-helmet"
 
 import { AppState } from "../../store"
-import LoginForm from "../../components/LoginForm/LoginForm"
+import { LoginForm } from "../../components"
 import styles from "./styles.module.scss"
 
 export type Props = RouteComponentProps

src/pages/PreRegister/PreRegister.tsx

@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet"
 
 import { AppState, AppThunk, ValueRequest } from "../../store"
 import { fetchPreVolunteerCountIfNeed } from "../../store/preVolunteerCount"
-import { RegisterForm } from "../../components"
+import { PreRegisterForm } from "../../components"
 import styles from "./styles.module.scss"
 
 export type Props = RouteComponentProps
@@ -29,14 +29,14 @@ function useList(
 
         if (readyStatus === "failure") return <p>Oops, Failed to load!</p>
 
-        return <RegisterForm dispatch={dispatch} preVolunteerCount={value} />
+        return <PreRegisterForm dispatch={dispatch} preVolunteerCount={value} />
     }
 }
 
-const RegisterPage: FC<Props> = (): JSX.Element => (
-    <div className={styles.registerPage}>
-        <div className={styles.registerContent}>
-            <Helmet title="RegisterPage" />
+const PreRegisterPage: FC<Props> = (): JSX.Element => (
+    <div className={styles.preRegisterPage}>
+        <div className={styles.preRegisterContent}>
+            <Helmet title="PreRegisterPage" />
             {useList((state: AppState) => state.preVolunteerCount, fetchPreVolunteerCountIfNeed)()}
         </div>
     </div>
@@ -45,4 +45,4 @@ const RegisterPage: FC<Props> = (): JSX.Element => (
 // Fetch server-side data here
 export const loadData = (): AppThunk[] => [fetchPreVolunteerCountIfNeed()]
 
-export default memo(RegisterPage)
+export default memo(PreRegisterPage)

src/pages/PreRegister/index.tsx

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

src/pages/PreRegister/styles.module.scss

@@ -1,9 +1,9 @@
 @import "../../theme/mixins";
 
-.registerPage {
+.preRegisterPage {
     @include page-wrapper-center;
 }
 
-.registerContent {
+.preRegisterContent {
     @include page-content-wrapper(600px);
 }