diff --git a/src/components/Notifications/index.tsx b/src/components/Notifications/index.tsx index 8419845..53f2f00 100644 --- a/src/components/Notifications/index.tsx +++ b/src/components/Notifications/index.tsx @@ -1,21 +1,21 @@ import _ from "lodash" import React, { memo, useCallback, useEffect, useRef, useState } from "react" import isNode from "detect-node" -import { AppDispatch } from "../../store" +import { useDispatch, useSelector } from "react-redux" import { fetchVolunteerNotifsSet } from "../../store/volunteerNotifsSet" import styles from "./styles.module.scss" -import { logoutUser } from "../../store/auth" +import { logoutUser, selectUserJwtToken } from "../../store/auth" import { unsetJWT } from "../../services/auth" import { VolunteerNotifs } from "../../services/volunteers" interface Props { - dispatch: AppDispatch - jwt: string // eslint-disable-next-line react/require-default-props volunteerNotifs?: VolunteerNotifs } -const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element | null => { +const Notifications = ({ volunteerNotifs }: Props): JSX.Element | null => { + const dispatch = useDispatch() + const jwtToken = useSelector(selectUserJwtToken) const hidden = volunteerNotifs?.hiddenNotifs || [] const notifs: JSX.Element[] = [] @@ -23,12 +23,12 @@ const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element | (event: React.SyntheticEvent): void => { event.preventDefault() dispatch( - fetchVolunteerNotifsSet(jwt, 0, { + fetchVolunteerNotifsSet(jwtToken, 0, { hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 1], }) ) }, - [dispatch, jwt, volunteerNotifs] + [dispatch, jwtToken, volunteerNotifs] ) if (!_.includes(hidden, 1)) { @@ -66,13 +66,13 @@ const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element | } dispatch( - fetchVolunteerNotifsSet(jwt, 0, { + fetchVolunteerNotifsSet(jwtToken, 0, { hiddenNotifs: [...(volunteerNotifs?.hiddenNotifs || []), 2], active: participation, }) ) }, - [dispatch, jwt, volunteerNotifs, participation] + [dispatch, jwtToken, volunteerNotifs, participation] ) if (!_.includes(hidden, 2)) { @@ -195,7 +195,7 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique. setNotifMessage("") setAcceptsNotifs("non") dispatch( - fetchVolunteerNotifsSet(jwt, 0, { + fetchVolunteerNotifsSet(jwtToken, 0, { acceptsNotifs: "non", }) ) @@ -263,7 +263,7 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique. setAcceptsNotifs("oui") dispatch( - fetchVolunteerNotifsSet(jwt, 0, { + fetchVolunteerNotifsSet(jwtToken, 0, { pushNotifSubscription: JSON.stringify(newSubscription), acceptsNotifs: "oui", }) @@ -297,7 +297,7 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique. setAcceptsNotifs("oui") dispatch( - fetchVolunteerNotifsSet(jwt, 0, { + fetchVolunteerNotifsSet(jwtToken, 0, { pushNotifSubscription: JSON.stringify(existedSubscription), acceptsNotifs: "oui", }) @@ -309,7 +309,7 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique. ) } }, - [dispatch, jwt, volunteerNotifs] + [dispatch, jwtToken, volunteerNotifs] ) function subscriptionEqualsSave(toCheck: PushSubscription, save: string | undefined): boolean { diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 9badac8..5e98968 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,6 +1,6 @@ import { FC, memo } from "react" import { RouteComponentProps, Link } from "react-router-dom" -import { useDispatch, useSelector, shallowEqual } from "react-redux" +import { useSelector, shallowEqual } from "react-redux" import { Helmet } from "react-helmet" import { AppState, AppThunk } from "../../store" @@ -8,13 +8,14 @@ import { LoginForm, Notifications } from "../../components" import styles from "./styles.module.scss" import { fetchVolunteerNotifsSetIfNeed } from "../../store/volunteerNotifsSet" import { VolunteerNotifs } from "../../services/volunteers" +import { selectUserJwtToken } from "../../store/auth" export type Props = RouteComponentProps let prevNotifs: VolunteerNotifs | undefined const HomePage: FC = (): JSX.Element => { - const dispatch = useDispatch() + const jwtToken = useSelector(selectUserJwtToken) const volunteerNotifs = useSelector((state: AppState) => { const notifs = state.volunteerNotifsSet?.entity @@ -25,12 +26,10 @@ const HomePage: FC = (): JSX.Element => { return prevNotifs }, shallowEqual) - const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual) + if (jwtToken === undefined) return

Loading...

- if (jwt === undefined) return

Loading...

- - if (jwt) { - return + if (jwtToken) { + return } return (
diff --git a/src/store/auth.ts b/src/store/auth.ts index 4dc468c..3e3b12c 100644 --- a/src/store/auth.ts +++ b/src/store/auth.ts @@ -1,4 +1,4 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit" +import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit" import { AppState } from "." // Define a type for the slice state @@ -30,6 +30,10 @@ export const auth = createSlice({ export const { setCurrentUser, logoutUser } = auth.actions -export const selectCount = (state: AppState): AuthState => state.auth +export const selectAuthData = (state: AppState): AuthState => state.auth + +export const selectUserJwtToken = createSelector(selectAuthData, (authData) => authData.jwt) + +export const isUserConnected = createSelector(selectUserJwtToken, (token) => !!token) export default auth.reducer