move hooks inside the loginForm component instead of using props

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>

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}>

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)