PeL/force-orange-2022
PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-06-10 09:34:21 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

move hooks inside the loginForm component instead of using props

Browse Source
This commit is contained in:
memeriau 2022-01-14 11:08:45 +01:00
parent 40985b3a73
commit 9885e2cafe
3 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/LoginForm/index.tsx
View File

@ -1,15 +1,14 @@
import React, { memo, useCallback } from "react" import React, { memo, useCallback } from "react"
import { Link } from "react-router-dom" 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 { fetchVolunteerLogin } from "../../store/volunteerLogin"
import styles from "./styles.module.scss" import styles from "./styles.module.scss"
interface Props { const LoginForm = (): JSX.Element => {
dispatch: AppDispatch const dispatch = useDispatch()
error: string const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
}
const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
const onSubmit = useCallback( const onSubmit = useCallback(
(event: React.SyntheticEvent): void => { (event: React.SyntheticEvent): void => {
event.preventDefault() event.preventDefault()
@ -41,7 +40,7 @@ const LoginForm = ({ dispatch, error }: Props): JSX.Element => {
<div className={styles.formButtons}> <div className={styles.formButtons}>
<button type="submit">Connexion</button> <button type="submit">Connexion</button>
</div> </div>
<div className={styles.error}>{error}</div> {loginError && <div className={styles.error}>{loginError}</div>}
<div className={styles.link}> <div className={styles.link}>
<Link to="/forgot"> Demander un nouveau mot de passe </Link> <Link to="/forgot"> Demander un nouveau mot de passe </Link>
</div> </div>

3
src/pages/Home/Home.tsx
View File

@ -25,7 +25,6 @@ const HomePage: FC<Props> = (): JSX.Element => {
return prevNotifs return prevNotifs
}, shallowEqual) }, shallowEqual)
const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual)
const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual) const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual)
if (jwt === undefined) return <p>Loading...</p> if (jwt === undefined) return <p>Loading...</p>
@ -38,7 +37,7 @@ const HomePage: FC<Props> = (): JSX.Element => {
<div className={styles.homePage}> <div className={styles.homePage}>
<div className={styles.loginContent}> <div className={styles.loginContent}>
<Helmet title="LoginPage" /> <Helmet title="LoginPage" />
<LoginForm dispatch={dispatch} error={loginError || ""} /> <LoginForm />
</div> </div>
</div> </div>
<div className={styles.homePage}> <div className={styles.homePage}>

21
src/pages/Login/LoginPage.tsx
View File

@ -1,26 +1,19 @@
import { RouteComponentProps } from "react-router-dom" import { RouteComponentProps } from "react-router-dom"
import { useDispatch, useSelector, shallowEqual } from "react-redux"
import React, { memo } from "react" import React, { memo } from "react"
import { Helmet } from "react-helmet" import { Helmet } from "react-helmet"
import { AppState } from "../../store"
import { LoginForm } from "../../components" import { LoginForm } from "../../components"
import styles from "./styles.module.scss" import styles from "./styles.module.scss"
export type Props = RouteComponentProps export type Props = RouteComponentProps
const LoginPage: React.FC<Props> = (): JSX.Element => { const LoginPage: React.FC<Props> = (): JSX.Element => (
const dispatch = useDispatch() <div className={styles.loginPage}>
const loginError = useSelector((state: AppState) => state.volunteerLogin.error, shallowEqual) <div className={styles.loginContent}>
<Helmet title="LoginPage" />
return ( <LoginForm />
<div className={styles.loginPage}>
<div className={styles.loginContent}>
<Helmet title="LoginPage" />
<LoginForm dispatch={dispatch} error={loginError || ""} />
</div>
</div> </div>
) </div>
} )
export default memo(LoginPage) export default memo(LoginPage)