Fix login not updating redux store by reloading whole page

This commit is contained in:
pikiou 2022-02-16 02:44:23 +01:00
parent 4b2a68174b
commit 140891c4c0
5 changed files with 33 additions and 38 deletions

View File

@ -1,21 +1,18 @@
import React, { FC, memo, useCallback } from "react" import React, { FC, memo, useCallback } from "react"
import { useDispatch, useSelector } from "react-redux" import { useSelector } from "react-redux"
import { unsetJWT } from "../../services/auth" import { unsetJWT } from "../../services/auth"
import { isUserConnected, logoutUser } from "../../store/auth" import { isUserConnected } from "../../store/auth"
import styles from "./styles.module.scss" import styles from "./styles.module.scss"
const LogoutButton: FC = (): JSX.Element | null => { const LogoutButton: FC = (): JSX.Element | null => {
const dispatch = useDispatch()
const connected = useSelector(isUserConnected) const connected = useSelector(isUserConnected)
const onClick = useCallback( const onClick = useCallback((event: React.SyntheticEvent): void => {
(event: React.SyntheticEvent): void => {
event.preventDefault() event.preventDefault()
unsetJWT() unsetJWT()
dispatch(logoutUser()) // eslint-disable-next-line no-restricted-globals
}, location?.reload()
[dispatch] }, [])
)
if (!connected) return null if (!connected) return null

View File

@ -7,7 +7,7 @@ import styles from "./styles.module.scss"
import { selectUserJwtToken } from "../../store/auth" import { selectUserJwtToken } from "../../store/auth"
import { VolunteerNotifs } from "../../services/volunteers" import { VolunteerNotifs } from "../../services/volunteers"
import LogoutButton from "../LogoutButton/LogoutButton" import LogoutButton from "../LogoutButton/LogoutButton"
import { TeamWishesForm } from ".." // import { TeamWishesForm } from ".."
import { fetchFor as fetchForTeamWishesForm } from "../VolunteerBoard/TeamWishesForm/TeamWishesForm" import { fetchFor as fetchForTeamWishesForm } from "../VolunteerBoard/TeamWishesForm/TeamWishesForm"
interface Props { interface Props {
@ -144,25 +144,25 @@ const Notifications = ({ volunteerNotifs }: Props): JSX.Element | null => {
) )
} }
const onSubmit3 = useCallback((): void => { // const onSubmit3 = useCallback((): void => {
dispatch( // dispatch(
fetchVolunteerNotifsSet(jwtToken, 0, { // fetchVolunteerNotifsSet(jwtToken, 0, {
hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 3], // hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 3],
}) // })
) // )
}, [dispatch, jwtToken, volunteerNotifs]) // }, [dispatch, jwtToken, volunteerNotifs])
if (!_.includes(hidden, 3)) { // if (!_.includes(hidden, 3)) {
notifs.push( // notifs.push(
<div key="1"> // <div key="1">
<div className={styles.notificationsPage}> // <div className={styles.notificationsPage}>
<div className={styles.notificationsContent}> // <div className={styles.notificationsContent}>
<TeamWishesForm afterSubmit={onSubmit3} /> // <TeamWishesForm afterSubmit={onSubmit3} />
</div> // </div>
</div> // </div>
</div> // </div>
) // )
} // }
/* DISCORD /* DISCORD
Discord nous donne à tous la parole via nos téléphone ou navigateurs, pour organiser le meilleur des festivals ! Discord nous donne à tous la parole via nos téléphone ou navigateurs, pour organiser le meilleur des festivals !

View File

@ -48,13 +48,13 @@ const AnnouncementsPage: FC<Props> = (): JSX.Element => {
} }
return ( return (
<div> <div>
<div className={styles.announcement}> <div className={styles.announcements}>
<div className={styles.loginContent}> <div className={styles.loginContent}>
<Helmet title="LoginPage" /> <Helmet title="LoginPage" />
<LoginForm /> <LoginForm />
</div> </div>
</div> </div>
<div className={styles.announcement}> <div className={styles.announcements}>
<div className={styles.navigationLink}> <div className={styles.navigationLink}>
<Link to="/sinscrire"> S&apos;informer sur le bénévolat </Link> <Link to="/sinscrire"> S&apos;informer sur le bénévolat </Link>
</div> </div>

View File

@ -22,6 +22,7 @@ export const auth = createSlice({
state.jwt = action.payload.jwt state.jwt = action.payload.jwt
}, },
logoutUser: (state) => { logoutUser: (state) => {
// Unused, just reload page :/
state.id = 0 state.id = 0
state.jwt = "" state.jwt = ""
}, },

View File

@ -3,9 +3,6 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit"
import { StateRequest, elementFetch } from "./utils" import { StateRequest, elementFetch } from "./utils"
import { VolunteerLogin } from "../services/volunteers" import { VolunteerLogin } from "../services/volunteers"
import { setJWT } from "../services/auth" import { setJWT } from "../services/auth"
import { AppDispatch } from "."
import { setCurrentUser } from "./auth"
import { fetchVolunteerNotifsSet } from "./volunteerNotifsSet"
import { volunteerLogin } from "../services/volunteersAccessors" import { volunteerLogin } from "../services/volunteersAccessors"
type StateVolunteer = { entity?: VolunteerLogin } & StateRequest type StateVolunteer = { entity?: VolunteerLogin } & StateRequest
@ -41,9 +38,9 @@ export const fetchVolunteerLogin = elementFetch<VolunteerLogin, Parameters<typeo
getSuccess, getSuccess,
getFailure, getFailure,
undefined, undefined,
(login: VolunteerLogin, dispatch: AppDispatch) => { (login: VolunteerLogin) => {
setJWT(login.jwt, login.id) setJWT(login.jwt, login.id)
dispatch(setCurrentUser(login)) // eslint-disable-next-line no-restricted-globals
dispatch(fetchVolunteerNotifsSet(login.jwt, login.id, {})) location?.reload()
} }
) )