create some selectors, move hooks

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 {

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<Props> = (): 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<Props> = (): JSX.Element => {
         return prevNotifs
     }, shallowEqual)
 
-    const jwt = useSelector((state: AppState) => state.auth.jwt, shallowEqual)
+    if (jwtToken === undefined) return <p>Loading...</p>
 
-    if (jwt === undefined) return <p>Loading...</p>
+    if (jwtToken) {
-
+        return <Notifications volunteerNotifs={volunteerNotifs} />
-    if (jwt) {
-        return <Notifications dispatch={dispatch} jwt={jwt} volunteerNotifs={volunteerNotifs} />
     }
     return (
         <div>

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