Add knowledge identification requirement and unknown filter

src/components/Knowledge/BoxList.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react"
+import React, { memo, useState } from "react"
 import { useSelector } from "react-redux"
 import styles from "./styles.module.scss"
 import BoxItem from "./BoxItem"
@@ -11,12 +11,36 @@ import {
 const BoxList: React.FC = (): JSX.Element | null => {
     const detailedBoxes = useSelector(selectSortedUniqueDetailedBoxes)
     const [volunteerKnowledge, saveVolunteerKnowledge] = useVolunteerKnowledge()
+    const [showUnknownOnly, setShowUnknownOnly] = useState(false)
+
+    const onShowUnknownOnly = (e: React.ChangeEvent<HTMLInputElement>) =>
+        setShowUnknownOnly(e.target.checked)
 
     if (!detailedBoxes || detailedBoxes.length === 0) return null
 
+    const boxesToShow = detailedBoxes.filter(
+        (box) =>
+            !box ||
+            !showUnknownOnly ||
+            !volunteerKnowledge ||
+            (!volunteerKnowledge.ok.includes(box.gameId) &&
+                !volunteerKnowledge.bof.includes(box.gameId) &&
+                !volunteerKnowledge.niet.includes(box.gameId))
+    )
+
     return (
+        <div>
+            <label className={styles.showUnknownOnlyLabel}>
+                <input
+                    type="checkbox"
+                    name="showUnknownOnly"
+                    onChange={onShowUnknownOnly}
+                    checked={showUnknownOnly}
+                />{" "}
+                Uniquement les non-renseignés
+            </label>
             <ul className={styles.boxList}>
-            {detailedBoxes.map((detailedBox: any) => (
+                {boxesToShow.map((detailedBox: any) => (
                     <BoxItem
                         detailedBox={detailedBox}
                         volunteerKnowledge={volunteerKnowledge}
@@ -25,6 +49,7 @@ const BoxList: React.FC = (): JSX.Element | null => {
                     />
                 ))}
             </ul>
+        </div>
     )
 }
 

src/components/Knowledge/styles.module.scss

@@ -1,6 +1,13 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
 
+.showUnknownOnlyLabel {
+    text-align: left;
+    display: inline-block;
+    margin-bottom: 10px;
+    width: 280px;
+}
+
 .boxList {
     padding: 0;
     list-style: none;

src/pages/Knowledge/KnowledgesPage.tsx

@@ -1,14 +1,22 @@
 import { FC, memo } from "react"
+import { useSelector } from "react-redux"
 import { RouteComponentProps } from "react-router-dom"
 import { Helmet } from "react-helmet"
 
 import { AppThunk } from "../../store"
 import styles from "./styles.module.scss"
 import { BoxList, KnowledgeIntro, fetchForKnowledge } from "../../components"
+import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
 
-const KnowledgesPage: FC<Props> = (): JSX.Element => (
+const KnowledgesPage: FC<Props> = (): JSX.Element => {
+    const jwtToken = useSelector(selectUserJwtToken)
+    if (jwtToken === undefined) return <p>Loading...</p>
+    if (!jwtToken) {
+        return <div>Besoin d'être identifié</div>
+    }
+    return (
         <div className={styles.knowledgesPage}>
             <div className={styles.knowledgesContent}>
                 <Helmet title="KnowledgesPage" />
@@ -16,7 +24,8 @@ const KnowledgesPage: FC<Props> = (): JSX.Element => (
                 <BoxList />
             </div>
         </div>
-)
+    )
+}
 
 // Fetch server-side data here
 export const loadData = (): AppThunk[] => [...fetchForKnowledge.map((f) => f())]