From 9885e2cafec5f346ff2ba0df477833ebd61e74ce Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Fri, 14 Jan 2022 11:08:45 +0100
Subject: [PATCH] move hooks inside the loginForm component instead of using
 props

---
 src/components/LoginForm/index.tsx | 13 ++++++-------
 src/pages/Home/Home.tsx            |  3 +--
 src/pages/Login/LoginPage.tsx      | 21 +++++++--------------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx
index 806de2c..772a071 100644
--- a/src/components/LoginForm/index.tsx
+++ b/src/components/LoginForm/index.tsx
@@ -1,15 +1,14 @@
 import React, { memo, useCallback } from "react"
 import { Link } from "react-router-dom"
-import { AppDispatch } from "../../store"
+import { shallowEqual, useDispatch, useSelector } from "react-redux"
+import { AppState } from "../../store"
 import { fetchVolunteerLogin } from "../../store/volunteerLogin"
 import styles from "./styles.module.scss"
 
-interface Props {
-    dispatch: AppDispatch
-    error: string
-}
+const LoginForm = (): JSX.Element => {
+    const dispatch = useDispatch()
+    const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
 
-const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
     const onSubmit = useCallback(
         (event: React.SyntheticEvent): void => {
             event.preventDefault()
@@ -41,7 +40,7 @@ const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
             <div className={styles.formButtons}>
                 <button type="submit">Connexion</button>
             </div>
-            <div className={styles.error}>{error}</div>
+            {loginError && <div className={styles.error}>{loginError}</div>}
             <div className={styles.link}>
                 <Link to="/forgot"> Demander un nouveau mot de passe </Link>
             </div>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index f356ebe..9badac8 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -25,7 +25,6 @@ const HomePage: FC<Props> = (): JSX.Element => {
         return prevNotifs
     }, shallowEqual)
 
-    const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
     const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual)
 
     if (jwt === undefined) return <p>Loading...</p>
@@ -38,7 +37,7 @@ const HomePage: FC<Props> = (): JSX.Element => {
             <div className={styles.homePage}>
                 <div className={styles.loginContent}>
                     <Helmet title="LoginPage" />
-                    <LoginForm dispatch={dispatch} error={loginError || ""} />
+                    <LoginForm />
                 </div>
             </div>
             <div className={styles.homePage}>
diff --git a/src/pages/Login/LoginPage.tsx b/src/pages/Login/LoginPage.tsx
index 9f0dac0..295ebfc 100644
--- a/src/pages/Login/LoginPage.tsx
+++ b/src/pages/Login/LoginPage.tsx
@@ -1,26 +1,19 @@
 import { RouteComponentProps } from "react-router-dom"
-import { useDispatch, useSelector, shallowEqual } from "react-redux"
 import React, { memo } from "react"
 import { Helmet } from "react-helmet"
 
-import { AppState } from "../../store"
 import { LoginForm } from "../../components"
 import styles from "./styles.module.scss"
 
 export type Props = RouteComponentProps
 
-const LoginPage: React.FC<Props> = (): JSX.Element => {
-    const dispatch = useDispatch()
-    const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
-
-    return (
-        <div className={styles.loginPage}>
-            <div className={styles.loginContent}>
-                <Helmet title="LoginPage" />
-                <LoginForm dispatch={dispatch} error={loginError || ""} />
-            </div>
+const LoginPage: React.FC<Props> = (): JSX.Element => (
+    <div className={styles.loginPage}>
+        <div className={styles.loginContent}>
+            <Helmet title="LoginPage" />
+            <LoginForm />
         </div>
-    )
-}
+    </div>
+)
 
 export default memo(LoginPage)