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;