Add Mes connaissances

src/components/Knowledge/BoxItem.tsx

@@ -0,0 +1,97 @@
+import { cloneDeep, pull, sortBy } from "lodash"
+import React, { memo, useCallback, useEffect, useState } from "react"
+import classnames from "classnames"
+import styles from "./styles.module.scss"
+import { DetailedBox } from "../../services/boxes"
+import { VolunteerKnowledge, VolunteerKnowledgeWithoutId } from "../../services/volunteers"
+
+interface Props {
+    detailedBox: DetailedBox
+    volunteerKnowledge: VolunteerKnowledge | undefined
+    saveVolunteerKnowledge: (newVolunteerKnowledge: VolunteerKnowledge) => void
+}
+
+const BoxItem: React.FC<Props> = ({
+    detailedBox,
+    volunteerKnowledge,
+    saveVolunteerKnowledge,
+}): JSX.Element => {
+    type ChoiceValue = keyof VolunteerKnowledgeWithoutId | "unknown"
+    const [choice, setChoice] = useState("unknown")
+    // const discordInvitation = useSelector(selectMiscDiscordInvitation)
+    const { gameId, bggPhoto, title, bggId, poufpaf } = detailedBox
+    const knowledgeChoices: { name: string; value: ChoiceValue }[] = [
+        { name: "?", value: "unknown" },
+        { name: "OK", value: "ok" },
+        { name: "Bof", value: "bof" },
+        { name: "Niet", value: "niet" },
+    ]
+
+    useEffect(() => {
+        if (!volunteerKnowledge) return
+        let providedchoice = "unknown"
+        if (volunteerKnowledge.ok.includes(gameId)) providedchoice = "ok"
+        if (volunteerKnowledge.bof.includes(gameId)) providedchoice = "bof"
+        if (volunteerKnowledge.niet.includes(gameId)) providedchoice = "niet"
+        setChoice(providedchoice)
+    }, [gameId, setChoice, volunteerKnowledge])
+
+    const onChoiceClick = useCallback(
+        (value: ChoiceValue) => {
+            if (!volunteerKnowledge) return
+            const newVolunteerKnowledge: VolunteerKnowledge = cloneDeep(volunteerKnowledge)
+            pull(newVolunteerKnowledge.ok, gameId)
+            pull(newVolunteerKnowledge.bof, gameId)
+            pull(newVolunteerKnowledge.niet, gameId)
+            if (value !== "unknown") {
+                newVolunteerKnowledge[value] = sortBy([...newVolunteerKnowledge[value], gameId])
+            }
+            saveVolunteerKnowledge(newVolunteerKnowledge)
+        },
+        [volunteerKnowledge, gameId, saveVolunteerKnowledge]
+    )
+
+    return (
+        <li className={styles.boxItem}>
+            <div className={styles.photoContainer}>
+                <img className={styles.photo} src={bggPhoto} alt="" />
+            </div>
+            <div className={classnames(styles.titleContainer, poufpaf && styles.shorterTitle)}>
+                <a
+                    href={`https://boardgamegeek.com/boardgame/${bggId}`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={styles.title}
+                >
+                    {title}
+                </a>
+            </div>
+            <a
+                href={`https://sites.google.com/site/poufpafpasteque/fiches_alpha/${poufpaf}`}
+                target="_blank"
+                rel="noreferrer"
+            >
+                <div className={poufpaf ? styles.poufpaf : styles.noPoufpaf}> </div>
+            </a>
+            <ul className={styles.knowledgeList}>
+                {knowledgeChoices.map(({ name, value }) => (
+                    <li key={value} className={styles.knowledgeItem}>
+                        <button
+                            type="button"
+                            onClick={() => onChoiceClick(value)}
+                            className={classnames(
+                                styles.knowledgeButton,
+                                styles[value],
+                                choice === value && styles.active
+                            )}
+                        >
+                            {name}
+                        </button>
+                    </li>
+                ))}
+            </ul>
+        </li>
+    )
+}
+
+export default memo(BoxItem)

src/components/Knowledge/BoxList.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from "react"
+import { useSelector } from "react-redux"
+import styles from "./styles.module.scss"
+import BoxItem from "./BoxItem"
+import { fetchBoxListIfNeed, selectSortedUniqueDetailedBoxes } from "../../store/boxList"
+import {
+    fetchVolunteerKnowledgeSetIfNeed,
+    useVolunteerKnowledge,
+} from "../../store/volunteerKnowledgeSet"
+
+const BoxList: React.FC = (): JSX.Element | null => {
+    const detailedBoxes = useSelector(selectSortedUniqueDetailedBoxes)
+    const [volunteerKnowledge, saveVolunteerKnowledge] = useVolunteerKnowledge()
+
+    if (!detailedBoxes || detailedBoxes.length === 0) return null
+
+    return (
+        <ul className={styles.boxList}>
+            {detailedBoxes.map((detailedBox: any) => (
+                <BoxItem
+                    detailedBox={detailedBox}
+                    volunteerKnowledge={volunteerKnowledge}
+                    saveVolunteerKnowledge={saveVolunteerKnowledge}
+                    key={detailedBox.id}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default memo(BoxList)
+
+export const fetchFor = [fetchBoxListIfNeed, fetchVolunteerKnowledgeSetIfNeed]

src/components/Knowledge/KnowledgeIntro.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+const KnowledgeIntro: React.FC = (): JSX.Element => (
+    <div>
+        <h1>Tes connaissances en jeux</h1>
+        <p>
+            Lors du festival, si tu es aux Jeux à Volonté, il sera très utile de savoir qui peut
+            expliquer quoi. Ce sera même indiqué dans chaque boîte de jeu ! Mais pour ça il faut que
+            tu nous dises à quel point tu peux les expliquer.
+        </p>
+        <p>
+            OK signifie que tu peux expliquer le jeu, avec au maximum un coup d'oeil aux règles sur
+            un nombre de cartes à distribuer, ou un nombre de PV déclancheur de fin de partie.
+            <br />
+            Bof signifie que tu seras plus utile que la lecture des règles.
+        </p>
+    </div>
+)
+
+export default KnowledgeIntro

src/components/Knowledge/styles.module.scss

@@ -0,0 +1,117 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.boxList {
+    padding: 0;
+    list-style: none;
+}
+
+.boxItem {
+    padding: 10px 0;
+}
+
+.photoContainer {
+    height: 50px;
+    width: 73px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+.photo {
+    height: 50px;
+    max-width: 73px;
+    position: absolute;
+    left: 0;
+}
+
+.titleContainer {
+    height: 50px;
+    width: 198px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+.shorterTitle {
+    width: 168px;
+}
+.title {
+    height: 50px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+}
+
+.poufpaf {
+    width: 30px;
+    height: 30px;
+    position: relative;
+    display: inline-block;
+    background: url("../../app/img/poufpaf.png");
+    background-size: contain;
+    vertical-align: middle;
+}
+
+.noPoufpaf {
+    display: none;
+}
+
+.knowledgeList {
+    @include clear-ul-style;
+
+    width: 266px;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.knowledgeItem {
+    display: inline-block;
+    margin: 3px;
+}
+
+.knowledgeButton {
+    margin: 0;
+    padding: 7px 2px 6px;
+    border: 0;
+    border-radius: 0;
+    width: 60px;
+    text-align: center;
+    color: $color-grey-medium;
+    cursor: pointer;
+
+    &.active {
+        color: $color-yellow;
+    }
+}
+
+.unknown {
+    background-color: $color-unknown;
+
+    &.active {
+        background-color: $color-active-unknown;
+    }
+}
+
+.ok {
+    background-color: $color-ok;
+
+    &.active {
+        background-color: $color-active-ok;
+    }
+}
+
+.bof {
+    background-color: $color-bof;
+
+    &.active {
+        background-color: $color-active-bof;
+    }
+}
+
+.niet {
+    background-color: $color-niet;
+
+    &.active {
+        background-color: $color-active-niet;
+    }
+}