create a logout component

src/components/LogoutButton/LogoutButton.tsx

@@ -0,0 +1,31 @@
+import React, { FC, memo, useCallback } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { unsetJWT } from "../../services/auth"
+import { isUserConnected, logoutUser } from "../../store/auth"
+import styles from "./styles.module.scss"
+
+const LogoutButton: FC = (): JSX.Element | null => {
+    const dispatch = useDispatch()
+    const connected = useSelector(isUserConnected)
+
+    const onClick = useCallback(
+        (event: React.SyntheticEvent): void => {
+            event.preventDefault()
+            unsetJWT()
+            dispatch(logoutUser())
+        },
+        [dispatch]
+    )
+
+    if (!connected) return null
+
+    return (
+        <div key="logout" className={styles.logoutButton}>
+            <button type="button" onClick={onClick}>
+                Se déconnecter
+            </button>
+        </div>
+    )
+}
+
+export default memo(LogoutButton)

src/components/LogoutButton/styles.module.scss

@@ -0,0 +1,8 @@
+.logoutButton {
+    text-align: center;
+
+    button {
+        font-weight: normal;
+        font-size: 0.9em;
+    }
+}

src/components/Notifications/index.tsx

@@ -4,9 +4,9 @@ import isNode from "detect-node"
 import { useDispatch, useSelector } from "react-redux"
 import { fetchVolunteerNotifsSet } from "../../store/volunteerNotifsSet"
 import styles from "./styles.module.scss"
-import { logoutUser, selectUserJwtToken } from "../../store/auth"
+import { selectUserJwtToken } from "../../store/auth"
-import { unsetJWT } from "../../services/auth"
 import { VolunteerNotifs } from "../../services/volunteers"
+import LogoutButton from "../LogoutButton/LogoutButton"
 
 interface Props {
     // eslint-disable-next-line react/require-default-props
@@ -360,28 +360,16 @@ Tu n'y es absolument pas obligé(e) ! C'est juste plus pratique.
         )
     }
 
-    const onClick = useCallback(
-        (event: React.SyntheticEvent): void => {
-            event.preventDefault()
-            unsetJWT()
-            dispatch(logoutUser())
-        },
-        [dispatch]
-    )
-
-    notifs.push(
-        <div key="logout" className={styles.formButtons}>
-            <button type="button" onClick={onClick}>
-                Se déconnecter
-            </button>
-        </div>
-    )
-
     if (volunteerNotifs === undefined) {
         return null
     }
 
-    return <div>{notifs.map<React.ReactNode>((t) => t).reduce((prev, curr) => [prev, curr])}</div>
+    return (
+        <div>
+            {notifs.map<React.ReactNode>((t) => t).reduce((prev, curr) => [prev, curr])}
+            <LogoutButton />
+        </div>
+    )
 }
 
 export default memo(Notifications)