create some selectors, move hooks

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 (jwt) {
-        return <Notifications dispatch={dispatch} jwt={jwt} volunteerNotifs={volunteerNotifs} />
+    if (jwtToken) {
+        return <Notifications volunteerNotifs={volunteerNotifs} />
     }
     return (
         <div>