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,20 +11,45 @@ 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 (
-        <ul className={styles.boxList}>
-            {detailedBoxes.map((detailedBox: any) => (
-                <BoxItem
-                    detailedBox={detailedBox}
-                    volunteerKnowledge={volunteerKnowledge}
-                    saveVolunteerKnowledge={saveVolunteerKnowledge}
-                    key={detailedBox.id}
-                />
-            ))}
-        </ul>
+        <div>
+            <label className={styles.showUnknownOnlyLabel}>
+                <input
+                    type="checkbox"
+                    name="showUnknownOnly"
+                    onChange={onShowUnknownOnly}
+                    checked={showUnknownOnly}
+                />{" "}
+                Uniquement les non-renseignés
+            </label>
+            <ul className={styles.boxList}>
+                {boxesToShow.map((detailedBox: any) => (
+                    <BoxItem
+                        detailedBox={detailedBox}
+                        volunteerKnowledge={volunteerKnowledge}
+                        saveVolunteerKnowledge={saveVolunteerKnowledge}
+                        key={detailedBox.id}
+                    />
+                ))}
+            </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,22 +1,31 @@
 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 => (
-    <div className={styles.knowledgesPage}>
-        <div className={styles.knowledgesContent}>
-            <Helmet title="KnowledgesPage" />
-            <KnowledgeIntro />
-            <BoxList />
+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" />
+                <KnowledgeIntro />
+                <BoxList />
+            </div>
         </div>
-    </div>
-)
+    )
+}
 
 // Fetch server-side data here
 export const loadData = (): AppThunk[] => [...fetchForKnowledge.map((f) => f())]