From e6a049d0d1d312b8532e0b5642744855a12929d6 Mon Sep 17 00:00:00 2001
From: pikiou <pikiou.sub@gmail.com>
Date: Sat, 29 Oct 2022 01:01:11 +0200
Subject: [PATCH] Update sign up message and available meetup location

---
 package.json                                  |   1 +
 src/components/Asks/index.tsx                 |   6 +-
 src/components/Knowledge/KnowledgeBoxList.tsx |   2 +-
 src/components/Knowledge/styles.module.scss   |   1 -
 src/components/Loan/BoxItem.tsx               | 156 ---------
 src/components/Loan/DetailedGameItem.tsx      | 164 ++++++++++
 .../Loan/GamesWithVolunteersItem.tsx          |  64 ++++
 .../Loan/{LoanBoxList.tsx => Loaning.tsx}     |  24 +-
 .../Loan/{LoanIntro.tsx => LoaningIntro.tsx}  |   4 +-
 src/components/Loan/Loans.tsx                 |  46 +++
 src/components/Loan/LoansIntro.tsx            |  14 +
 src/components/Loan/styles.module.scss        |  23 +-
 src/components/Navigation/MainMenu.tsx        |   1 +
 src/components/RegisterForm/index.tsx         | 307 +++---------------
 src/components/VolunteerBoard/Board.tsx       |  14 +-
 .../VolunteerBoard/Brunch/Brunch.tsx          |   5 +-
 .../VolunteerBoard/DayWishes/DayWishes.tsx    |   8 +-
 .../DayWishesForm/DayWishesForm.tsx           |   4 +-
 src/components/index.ts                       |  15 +-
 src/pages/Loaning/LoaningPage.tsx             |  33 ++
 src/pages/Loaning/index.tsx                   |  16 +
 .../{Loan => Loaning}/styles.module.scss      |   8 +-
 .../LoanPage.tsx => Loans/LoansPage.tsx}      |  18 +-
 src/pages/{Loan => Loans}/index.tsx           |   6 +-
 src/pages/Loans/styles.module.scss            |  13 +
 src/routes/index.ts                           |  12 +-
 src/server/gsheets/boxes.ts                   |   2 +-
 src/server/gsheets/games.ts                   | 235 +++++++++++++-
 src/server/gsheets/localDb.ts                 |   8 +-
 src/server/gsheets/tools.ts                   |  16 +
 src/server/gsheets/volunteers.ts              |  17 +-
 src/server/index.ts                           |  11 +-
 src/services/accessors.ts                     |  31 ++
 src/services/games.ts                         |   9 +
 src/services/gamesAccessors.ts                |   7 +-
 src/store/boxList.ts                          |   9 +-
 src/store/gameWithVolunteersList.ts           |  73 +++++
 src/store/rootReducer.ts                      |   2 +
 src/store/utils.ts                            | 127 ++++++++
 39 files changed, 1014 insertions(+), 498 deletions(-)
 delete mode 100644 src/components/Loan/BoxItem.tsx
 create mode 100644 src/components/Loan/DetailedGameItem.tsx
 create mode 100644 src/components/Loan/GamesWithVolunteersItem.tsx
 rename src/components/Loan/{LoanBoxList.tsx => Loaning.tsx} (74%)
 rename src/components/Loan/{LoanIntro.tsx => LoaningIntro.tsx} (96%)
 create mode 100644 src/components/Loan/Loans.tsx
 create mode 100644 src/components/Loan/LoansIntro.tsx
 create mode 100644 src/pages/Loaning/LoaningPage.tsx
 create mode 100755 src/pages/Loaning/index.tsx
 rename src/pages/{Loan => Loaning}/styles.module.scss (64%)
 rename src/pages/{Loan/LoanPage.tsx => Loans/LoansPage.tsx} (59%)
 rename src/pages/{Loan => Loans}/index.tsx (65%)
 create mode 100755 src/pages/Loans/styles.module.scss
 create mode 100644 src/server/gsheets/tools.ts
 create mode 100644 src/store/gameWithVolunteersList.ts

diff --git a/package.json b/package.json
index 62a1c9e..5b6c268 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     },
     "scripts": {
         "dev": "yarn dev:build && nodemon ./public/server",
+        "ser": "yarn dev:build && node ./public/server",
         "dev:build": "cross-env NODE_ENV=development webpack --config ./webpack/server.config.ts",
         "local-start": "cross-env LOCAL=true yarn build && node ./public/server",
         "start": "node ./public/server",
diff --git a/src/components/Asks/index.tsx b/src/components/Asks/index.tsx
index 8f1aa8d..1b70cb8 100644
--- a/src/components/Asks/index.tsx
+++ b/src/components/Asks/index.tsx
@@ -6,7 +6,7 @@ import { AskWelcome } from "./AskWelcome"
 import { AskBrunch, fetchFor as fetchForBrunch } from "./AskBrunch"
 import { AskRetex, fetchFor as fetchForRetex } from "./AskRetex"
 import { AskDiscord, fetchFor as fetchForDiscord } from "./AskDiscord"
-// import { AskDayWishes, fetchFor as fetchForDayWishes } from "./AskDayWishes"
+import { AskDayWishes, fetchFor as fetchForDayWishes } from "./AskDayWishes"
 // import { AskHosting, fetchFor as fetchForHosting } from "./AskHosting"
 // import { AskMeals, fetchFor as fetchForMeals } from "./AskMeals"
 // import { AskPersonalInfo, fetchFor as fetchForPersonalInfo } from "./AskPersonalInfo"
@@ -26,7 +26,7 @@ const Asks = (): JSX.Element | null => {
     AskRetex(asks, 3)
     AskDiscord(asks, 5)
 
-    // AskDayWishes(asks, 10)
+    AskDayWishes(asks, 10)
     // AskTeamWishes(asks, 11)
     // AskParticipationDetails(asks, 12)
     // AskPersonalInfo(asks, 15)
@@ -69,7 +69,7 @@ export const fetchFor = [
     ...fetchForBrunch,
     ...fetchForRetex,
     ...fetchForDiscord,
-    // ...fetchForDayWishes,
+    ...fetchForDayWishes,
     // ...fetchForHosting,
     // ...fetchForMeals,
     // ...fetchForTeamWishes,
diff --git a/src/components/Knowledge/KnowledgeBoxList.tsx b/src/components/Knowledge/KnowledgeBoxList.tsx
index 5035ce6..da2d02a 100644
--- a/src/components/Knowledge/KnowledgeBoxList.tsx
+++ b/src/components/Knowledge/KnowledgeBoxList.tsx
@@ -37,7 +37,7 @@ const KnowledgeBoxList: React.FC = (): JSX.Element | null => {
                     onChange={onShowUnknownOnly}
                     checked={showUnknownOnly}
                 />{" "}
-                Uniquement les non-renseignés
+                Afficher uniquement les non-renseignés
             </label>
             <ul className={styles.boxList}>
                 {boxesToShow.map((detailedBox: any) => (
diff --git a/src/components/Knowledge/styles.module.scss b/src/components/Knowledge/styles.module.scss
index 487b1d0..e724490 100755
--- a/src/components/Knowledge/styles.module.scss
+++ b/src/components/Knowledge/styles.module.scss
@@ -5,7 +5,6 @@
     text-align: left;
     display: inline-block;
     margin-bottom: 10px;
-    width: 280px;
 }
 
 .boxList {
diff --git a/src/components/Loan/BoxItem.tsx b/src/components/Loan/BoxItem.tsx
deleted file mode 100644
index 644c993..0000000
--- a/src/components/Loan/BoxItem.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { cloneDeep, pull, sortBy, uniq } 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 { VolunteerLoan, VolunteerLoanWithoutId } from "../../services/volunteers"
-
-interface Props {
-    detailedBox: DetailedBox
-    volunteerLoan: VolunteerLoan | undefined
-    saveVolunteerLoan: (newVolunteerLoan: VolunteerLoan) => void
-}
-
-const BoxItem: React.FC<Props> = ({
-    detailedBox,
-    volunteerLoan,
-    saveVolunteerLoan,
-}): JSX.Element => {
-    type ChoiceValue = keyof VolunteerLoanWithoutId
-    const [loanable, setLoanable] = useState(false)
-    const [playable, setPlayable] = useState(false)
-    const [giftable, setGiftable] = useState(false)
-    const [noOpinion, setNoOpinion] = useState(false)
-    const { gameId, bggPhoto, title, bggId, poufpaf, bggIdAlternative } = detailedBox
-    const isBggPhoto = !/^[0-9]+\.[a-zA-Z]+$/.test(bggPhoto)
-    const loanChoices: { name: string; value: ChoiceValue }[] = [
-        { name: "Empruntable", value: "loanable" },
-        { name: "Jouable", value: "playable" },
-        { name: "Offrable", value: "giftable" },
-        { name: "SansAvis", value: "noOpinion" },
-    ]
-    const loanValues = {
-        loanable,
-        playable,
-        giftable,
-        noOpinion,
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const loanSetters = {
-        loanable: setLoanable,
-        playable: setPlayable,
-        giftable: setGiftable,
-        noOpinion: setNoOpinion,
-    }
-
-    useEffect(() => {
-        if (!volunteerLoan) return
-        setLoanable(volunteerLoan.loanable.includes(gameId))
-        setPlayable(volunteerLoan.playable.includes(gameId))
-        setGiftable(volunteerLoan.giftable.includes(gameId))
-        setNoOpinion(volunteerLoan.noOpinion.includes(gameId))
-    }, [gameId, volunteerLoan])
-
-    const onChoiceClick = useCallback(
-        (value: ChoiceValue) => {
-            if (!volunteerLoan) return
-            const adding = !volunteerLoan[value].includes(gameId)
-            const newVolunteerLoan: VolunteerLoan = cloneDeep(volunteerLoan)
-            if (adding) {
-                newVolunteerLoan[value] = sortBy(uniq([...newVolunteerLoan[value], gameId]))
-            } else {
-                pull(newVolunteerLoan[value], gameId)
-            }
-
-            if (adding && value === "noOpinion") {
-                pull(newVolunteerLoan.loanable, gameId)
-                pull(newVolunteerLoan.playable, gameId)
-                pull(newVolunteerLoan.giftable, gameId)
-                setLoanable(volunteerLoan.loanable.includes(gameId))
-                setPlayable(volunteerLoan.playable.includes(gameId))
-                setGiftable(volunteerLoan.giftable.includes(gameId))
-                setNoOpinion(true)
-            } else {
-                pull(newVolunteerLoan.noOpinion, gameId)
-                setNoOpinion(false)
-                loanSetters[value](adding)
-            }
-            saveVolunteerLoan(newVolunteerLoan)
-        },
-        [volunteerLoan, gameId, saveVolunteerLoan, loanSetters]
-    )
-
-    const onCheckboxChange = useCallback(() => {
-        // Do nothing
-    }, [])
-
-    return (
-        <li className={styles.boxItem}>
-            <div className={styles.photoContainer}>
-                {isBggPhoto && <img className={styles.photo} src={bggPhoto} alt="" />}
-                {!isBggPhoto && (
-                    <div
-                        className={classnames(
-                            styles.alternateBox,
-                            styles[`a${bggPhoto.replace(/\..*/, "")}`]
-                        )}
-                    >
-                        {" "}
-                    </div>
-                )}
-            </div>
-            <div className={classnames(styles.titleContainer, poufpaf && styles.shorterTitle)}>
-                <a
-                    href={
-                        bggId > 0
-                            ? `https://boardgamegeek.com/boardgame/${bggId}`
-                            : bggIdAlternative
-                    }
-                    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.loanList}>
-                {loanChoices.map(({ name, value }) => (
-                    <li key={value} className={styles.loanItem}>
-                        <button
-                            type="button"
-                            onClick={() => onChoiceClick(value)}
-                            className={classnames(
-                                styles.loanButton,
-                                styles[value],
-                                loanValues[value] && styles.active
-                            )}
-                            data-message={name}
-                        >
-                            <input
-                                type="checkbox"
-                                className={styles.loanCheckbox}
-                                checked={loanValues[value]}
-                                onChange={() => onCheckboxChange()}
-                            />
-                            <div
-                                className={classnames(
-                                    styles.loanCheckboxImg,
-                                    styles[`${value}Checkbox`]
-                                )}
-                            />
-                        </button>
-                    </li>
-                ))}
-            </ul>
-        </li>
-    )
-}
-
-export default memo(BoxItem)
diff --git a/src/components/Loan/DetailedGameItem.tsx b/src/components/Loan/DetailedGameItem.tsx
new file mode 100644
index 0000000..95dcd9d
--- /dev/null
+++ b/src/components/Loan/DetailedGameItem.tsx
@@ -0,0 +1,164 @@
+// import { cloneDeep, pull, sortBy, uniq } from "lodash"
+import { toast } from "react-toastify"
+import React, { memo, useCallback, useEffect, useState } from "react"
+import classnames from "classnames"
+import styles from "./styles.module.scss"
+import { DetailedBox } from "../../services/boxes"
+import { VolunteerLoan, VolunteerLoanWithoutId } from "../../services/volunteers"
+
+interface Props {
+    detailedGame: DetailedBox
+    volunteerLoan: VolunteerLoan | undefined
+    saveVolunteerLoan: (newVolunteerLoan: VolunteerLoan) => void
+}
+
+const DetailedGameItem: React.FC<Props> = ({
+    detailedGame,
+    volunteerLoan,
+    saveVolunteerLoan,
+}): JSX.Element => {
+    type ChoiceValue = keyof VolunteerLoanWithoutId
+    const [loanable, setLoanable] = useState(false)
+    const [playable, setPlayable] = useState(false)
+    const [giftable, setGiftable] = useState(false)
+    const [noOpinion, setNoOpinion] = useState(false)
+    const { gameId, bggPhoto, title, bggId, poufpaf, bggIdAlternative } = detailedGame
+    const isBggPhoto = !/^[0-9]+\.[a-zA-Z]+$/.test(bggPhoto)
+    const loanChoices: { name: string; value: ChoiceValue }[] = [
+        { name: "Empruntable", value: "loanable" },
+        { name: "Jouable", value: "playable" },
+        { name: "Offrable", value: "giftable" },
+        { name: "SansAvis", value: "noOpinion" },
+    ]
+    const loanValues = {
+        loanable,
+        playable,
+        giftable,
+        noOpinion,
+    }
+
+    useEffect(() => {
+        if (!volunteerLoan) return
+        setLoanable(volunteerLoan.loanable.includes(gameId))
+        setPlayable(volunteerLoan.playable.includes(gameId))
+        setGiftable(volunteerLoan.giftable.includes(gameId))
+        setNoOpinion(volunteerLoan.noOpinion.includes(gameId))
+    }, [gameId, volunteerLoan])
+
+    const onChoiceClick = useCallback(
+        (_value: ChoiceValue) => {
+            toast.warning("Il n'est plus possible de changer ses choix", {
+                position: "top-center",
+                autoClose: 500,
+                hideProgressBar: true,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+            })
+        },
+        []
+
+        // (value: ChoiceValue) => {
+        //     if (!volunteerLoan) return
+        //     const adding = !volunteerLoan[value].includes(gameId)
+        //     const newVolunteerLoan: VolunteerLoan = cloneDeep(volunteerLoan)
+        //     if (adding) {
+        //         newVolunteerLoan[value] = sortBy(uniq([...newVolunteerLoan[value], gameId]))
+        //     } else {
+        //         pull(newVolunteerLoan[value], gameId)
+        //     }
+
+        //     if (adding && value === "noOpinion") {
+        //         pull(newVolunteerLoan.loanable, gameId)
+        //         pull(newVolunteerLoan.playable, gameId)
+        //         pull(newVolunteerLoan.giftable, gameId)
+        //     } else {
+        //         pull(newVolunteerLoan.noOpinion, gameId)
+        //     }
+        //     saveVolunteerLoan(newVolunteerLoan)
+        // },
+        // [volunteerLoan, gameId, saveVolunteerLoan]
+    )
+
+    // Just to keep saveVolunteerLoan necessary to prevent errors while changes are prevented
+    if (!saveVolunteerLoan) {
+        console.log("")
+    }
+
+    const onCheckboxChange = useCallback(() => {
+        // Do nothing
+    }, [])
+
+    return (
+        <>
+            <li className={classnames(styles.boxItem, !volunteerLoan && styles.hide)}>
+                <div className={styles.photoContainer}>
+                    {isBggPhoto && <img className={styles.photo} src={bggPhoto} alt="" />}
+                    {!isBggPhoto && (
+                        <div
+                            className={classnames(
+                                styles.alternateBox,
+                                styles[`a${bggPhoto.replace(/\..*/, "")}`]
+                            )}
+                        >
+                            {" "}
+                        </div>
+                    )}
+                </div>
+                <div className={classnames(styles.titleContainer, poufpaf && styles.shorterTitle)}>
+                    <a
+                        href={
+                            bggId > 0
+                                ? `https://boardgamegeek.com/boardgame/${bggId}`
+                                : bggIdAlternative
+                        }
+                        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.loanList}>
+                    {loanChoices.map(({ name, value }) => (
+                        <li key={value} className={styles.loanItem}>
+                            <button
+                                type="button"
+                                onClick={() => onChoiceClick(value)}
+                                className={classnames(
+                                    styles.loanButton,
+                                    styles[value],
+                                    loanValues[value] && styles.active
+                                )}
+                                data-message={name}
+                            >
+                                <input
+                                    type="checkbox"
+                                    className={styles.loanCheckbox}
+                                    checked={loanValues[value]}
+                                    onChange={() => onCheckboxChange()}
+                                />
+                                <div
+                                    className={classnames(
+                                        styles.loanCheckboxImg,
+                                        styles[`${value}Checkbox`]
+                                    )}
+                                />
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </li>
+        </>
+    )
+}
+
+export default memo(DetailedGameItem)
diff --git a/src/components/Loan/GamesWithVolunteersItem.tsx b/src/components/Loan/GamesWithVolunteersItem.tsx
new file mode 100644
index 0000000..381fddb
--- /dev/null
+++ b/src/components/Loan/GamesWithVolunteersItem.tsx
@@ -0,0 +1,64 @@
+import React, { memo } from "react"
+import classnames from "classnames"
+import styles from "./styles.module.scss"
+import { GameWithVolunteers } from "../../services/games"
+import { gameTitleExactCategory } from "../../store/utils"
+
+interface Props {
+    gameWithLoans: GameWithVolunteers
+}
+
+const LoanGamesItem: React.FC<Props> = ({ gameWithLoans }): JSX.Element => {
+    const { bggPhoto, title, bggId, poufpaf, bggIdAlternative, volunteerNicknames, boxCount } =
+        gameWithLoans
+    const isBggPhoto = !/^[0-9]+\.[a-zA-Z]+$/.test(bggPhoto)
+
+    return (
+        <li className={styles.boxItem}>
+            <div className={styles.photoContainer}>
+                {isBggPhoto && <img className={styles.photo} src={bggPhoto} alt="" />}
+                {!isBggPhoto && (
+                    <div
+                        className={classnames(
+                            styles.alternateBox,
+                            styles[`a${bggPhoto.replace(/\..*/, "")}`]
+                        )}
+                    >
+                        {" "}
+                    </div>
+                )}
+            </div>
+            <div className={classnames(styles.titleContainer, poufpaf && styles.shorterTitle)}>
+                <a
+                    href={
+                        bggId > 0
+                            ? `https://boardgamegeek.com/boardgame/${bggId}`
+                            : bggIdAlternative
+                    }
+                    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>
+            <div className={styles.boxCount}>
+                {boxCount > 1 ? `${boxCount} boîtes` : ""}
+                <br />
+                {gameTitleExactCategory({ title })}
+            </div>
+            <div className={styles.volunteerList}>
+                Bénévoles intéressés: {volunteerNicknames.join(", ")}
+            </div>
+        </li>
+    )
+}
+
+export default memo(LoanGamesItem)
diff --git a/src/components/Loan/LoanBoxList.tsx b/src/components/Loan/Loaning.tsx
similarity index 74%
rename from src/components/Loan/LoanBoxList.tsx
rename to src/components/Loan/Loaning.tsx
index 116e9d3..abfa5b9 100644
--- a/src/components/Loan/LoanBoxList.tsx
+++ b/src/components/Loan/Loaning.tsx
@@ -1,23 +1,21 @@
 import React, { memo, useState } from "react"
 import { useSelector } from "react-redux"
 import styles from "./styles.module.scss"
-import BoxItem from "./BoxItem"
 import { fetchBoxListIfNeed, selectSortedUniqueDetailedBoxes } from "../../store/boxList"
 import { fetchVolunteerLoanSetIfNeed, useVolunteerLoan } from "../../store/volunteerLoanSet"
+import { DetailedBox } from "../../services/boxes"
+import DetailedGameItem from "./DetailedGameItem"
 
-const LoanBoxList: React.FC = (): JSX.Element | null => {
-    const detailedBoxes = useSelector(selectSortedUniqueDetailedBoxes)
+const Loaning: React.FC = (): JSX.Element | null => {
+    const detailedBoxes: DetailedBox[] = useSelector(selectSortedUniqueDetailedBoxes)
     const [volunteerLoan, saveVolunteerLoan] = useVolunteerLoan()
     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 ||
             !volunteerLoan ||
             (!volunteerLoan.loanable.includes(box.gameId) &&
@@ -28,22 +26,22 @@ const LoanBoxList: React.FC = (): JSX.Element | null => {
 
     return (
         <div className={styles.loanThings}>
-            <label className={styles.showUnknownOnlyLabel}>
+            <label className={styles.showCheckboxLabel}>
                 <input
                     type="checkbox"
                     name="showUnknownOnly"
                     onChange={onShowUnknownOnly}
                     checked={showUnknownOnly}
                 />{" "}
-                Uniquement les non-renseignés
+                Afficher uniquement les non-renseignés
             </label>
             <ul className={styles.boxList}>
-                {boxesToShow.map((detailedBox: any) => (
-                    <BoxItem
-                        detailedBox={detailedBox}
+                {boxesToShow.map((game) => (
+                    <DetailedGameItem
+                        detailedGame={game}
                         volunteerLoan={volunteerLoan}
                         saveVolunteerLoan={saveVolunteerLoan}
-                        key={detailedBox.id}
+                        key={game.id}
                     />
                 ))}
             </ul>
@@ -51,6 +49,6 @@ const LoanBoxList: React.FC = (): JSX.Element | null => {
     )
 }
 
-export default memo(LoanBoxList)
+export default memo(Loaning)
 
 export const fetchFor = [fetchBoxListIfNeed, fetchVolunteerLoanSetIfNeed]
diff --git a/src/components/Loan/LoanIntro.tsx b/src/components/Loan/LoaningIntro.tsx
similarity index 96%
rename from src/components/Loan/LoanIntro.tsx
rename to src/components/Loan/LoaningIntro.tsx
index c23bc82..c9058bd 100644
--- a/src/components/Loan/LoanIntro.tsx
+++ b/src/components/Loan/LoaningIntro.tsx
@@ -2,7 +2,7 @@ import classnames from "classnames"
 import React from "react"
 import styles from "./styles.module.scss"
 
-const LoanIntro: React.FC = (): JSX.Element => (
+const LoaningIntro: React.FC = (): JSX.Element => (
     <div className={styles.loanThings}>
         <h1>Emprunt et tri des jeux</h1>
         <p>
@@ -54,4 +54,4 @@ const LoanIntro: React.FC = (): JSX.Element => (
     </div>
 )
 
-export default LoanIntro
+export default LoaningIntro
diff --git a/src/components/Loan/Loans.tsx b/src/components/Loan/Loans.tsx
new file mode 100644
index 0000000..9419ea5
--- /dev/null
+++ b/src/components/Loan/Loans.tsx
@@ -0,0 +1,46 @@
+import React, { memo } from "react"
+import { useSelector } from "react-redux"
+import styles from "./styles.module.scss"
+import {
+    fetchGameWithVolunteersListIfNeed,
+    selectSortedUniqueGamesWithVolunteers,
+} from "../../store/gameWithVolunteersList"
+import { GameWithVolunteers } from "../../services/games"
+import GamesWithVolunteersItem from "./GamesWithVolunteersItem"
+
+const Loans: React.FC = (): JSX.Element | null => {
+    const gameWithLoans: GameWithVolunteers[] = useSelector(selectSortedUniqueGamesWithVolunteers)
+
+    const loanGames = gameWithLoans.filter((game) => game.toLoan)
+    // const giftGames = gameWithLoans.filter(game => !game.toLoan)
+
+    return (
+        <div>
+            <h3>Jeux que tu veux emprunter</h3>
+            {loanGames.length > 0 && (
+                <ul className={styles.boxList}>
+                    {loanGames.map((game) => (
+                        <GamesWithVolunteersItem gameWithLoans={game} key={game.id} />
+                    ))}
+                </ul>
+            )}
+            {loanGames.length === 0 && <>Aucun jeu.</>}
+
+            {/* {giftGames.length > 0 && <>
+            <h3>Jeux que tu voudrais récupérer définitivement</h3>
+            <ul className={styles.boxList}>
+                {giftGames.map(game => (
+                    <GamesWithVolunteersItem
+                        gameWithLoans={game}
+                        key={game.id}
+                    />
+                ))}
+            </ul>
+        </>} */}
+        </div>
+    )
+}
+
+export default memo(Loans)
+
+export const fetchFor = [fetchGameWithVolunteersListIfNeed]
diff --git a/src/components/Loan/LoansIntro.tsx b/src/components/Loan/LoansIntro.tsx
new file mode 100644
index 0000000..b3e28f6
--- /dev/null
+++ b/src/components/Loan/LoansIntro.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import styles from "./styles.module.scss"
+
+const LoansIntro: React.FC = (): JSX.Element => (
+    <div className={styles.loanThings}>
+        <h1>Jeux à emprunter</h1>
+        <p>
+            Si un jeu qui t'intéresse est emprunté par un autre bénévole, son nom sera affiché ici.
+            Vous pourrez peut-être envisager d'y jouer ensemble !
+        </p>
+    </div>
+)
+
+export default LoansIntro
diff --git a/src/components/Loan/styles.module.scss b/src/components/Loan/styles.module.scss
index bb05bac..3408809 100755
--- a/src/components/Loan/styles.module.scss
+++ b/src/components/Loan/styles.module.scss
@@ -1,11 +1,14 @@
 @import "../../theme/variables";
 @import "../../theme/mixins";
 
-.showUnknownOnlyLabel {
+.showCheckboxLabel {
     text-align: left;
     display: inline-block;
     margin-bottom: 10px;
-    width: 280px;
+}
+
+.hide {
+    display: none;
 }
 
 .boxList {
@@ -200,6 +203,22 @@
     display: none;
 }
 
+.boxCount {
+    height: 50px;
+    width: 73px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.volunteerList {
+    height: 50px;
+    width: 198px;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .loanList {
     @include clear-ul-style;
 
diff --git a/src/components/Navigation/MainMenu.tsx b/src/components/Navigation/MainMenu.tsx
index 6ab488b..4ca80a9 100644
--- a/src/components/Navigation/MainMenu.tsx
+++ b/src/components/Navigation/MainMenu.tsx
@@ -52,6 +52,7 @@ const MainMenu: FC = (): JSX.Element => {
                 <MenuItem name="Questions" pathname="/" />
                 <MenuItem name="Annonces" pathname="/annonces" />
                 <MenuItem name="Mon profil" pathname="/profil" />
+                <MenuItem name="Emprunter" pathname="/emprunter" />
                 <MenuItem name="Emprunts" pathname="/emprunts" />
                 {/* <MenuItem name="Mes connaissances" pathname="/connaissances" /> */}
                 <RestrictMenuItem
diff --git a/src/components/RegisterForm/index.tsx b/src/components/RegisterForm/index.tsx
index 080ed06..3c757c0 100644
--- a/src/components/RegisterForm/index.tsx
+++ b/src/components/RegisterForm/index.tsx
@@ -8,7 +8,6 @@ import styles from "./styles.module.scss"
 
 import { fetchPostulantAdd } from "../../store/postulantAdd"
 import { AppDispatch, AppState } from "../../store"
-import { fetchVolunteerPartialAdd } from "../../store/volunteerPartialAdd"
 import FormButton from "../Form/FormButton/FormButton"
 import { validEmail } from "../../utils/standardization"
 import { toastError } from "../../store/utils"
@@ -38,24 +37,21 @@ const animations = [
     [styles.imgTransitionShow, styles.imgTransitionAbouToShow],
 ]
 const RegisterForm = ({ dispatch }: Props): JSX.Element => {
-    const [potentialVolunteer, setPotentialVolunteer] = useState(true)
     const [firstname, setFirstname] = useState("")
     const [lastname, setLastname] = useState("")
     const [email, setEmail] = useState("")
     const [mobile, setMobile] = useState("")
-    const [alreadyVolunteer, setAlreadyVolunteer] = useState(false)
     const [comment, setComment] = useState("")
     const [alreadyCame, setAlreadyCame] = useState(true)
     const [firstMeeting, setFirstMeeting] = useState("")
     const [commentFirstMeeting, setCommentFirstMeeting] = useState("")
-    const [canHelpBefore, setCanHelpBefore] = useState("")
     const [howToContact, setHowToContact] = useState("Email")
     const [sending, setSending] = useState(false)
     const [changingBackground, setChangingBackground] = useState(0)
 
     const meetingDateList = useSelector(selectMiscMeetingDateList)
 
-    const enableRegistering = false
+    const enableRegistering = true
 
     useEffect(() => {
         const timer = setInterval(() => {
@@ -83,47 +79,29 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
             return
         }
 
-        if (potentialVolunteer) {
-            dispatch(
-                fetchPostulantAdd({
-                    potential: true,
-                    firstname,
-                    lastname,
-                    email,
-                    mobile,
-                    howToContact,
-                    alreadyCame,
-                    firstMeeting,
-                    commentFirstMeeting: firstMeeting ? "" : commentFirstMeeting,
-                    comment,
-                })
-            )
-        } else {
-            dispatch(
-                fetchVolunteerPartialAdd({
-                    firstname,
-                    lastname,
-                    email,
-                    mobile,
-                    howToContact,
-                    canHelpBefore,
-                })
-            )
-            dispatch(
-                fetchPostulantAdd({
-                    potential: false,
-                    firstname,
-                    lastname,
-                    email,
-                    mobile,
-                    howToContact,
-                    alreadyCame,
-                    firstMeeting,
-                    commentFirstMeeting: firstMeeting ? "" : commentFirstMeeting,
-                    comment,
-                })
-            )
-        }
+        dispatch(
+            fetchPostulantAdd({
+                potential: true,
+                firstname,
+                lastname,
+                email,
+                mobile,
+                howToContact,
+                alreadyCame,
+                firstMeeting,
+                commentFirstMeeting: firstMeeting ? "" : commentFirstMeeting,
+                comment,
+            })
+        )
+        // dispatch(
+        //     fetchVolunteerPartialAdd({
+        //         firstname,
+        //         lastname,
+        //         email,
+        //         mobile,
+        //         howToContact,
+        //     })
+        // )
 
         setSending(true)
     }
@@ -141,11 +119,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     let sendSuccess
     let sendError
     let sendingElement
-    if (
-        !postulantError &&
-        !_.isEmpty(postulant) &&
-        (potentialVolunteer || (!volunteerError && !_.isEmpty(volunteer)))
-    ) {
+    if (!postulantError && !_.isEmpty(postulant)) {
         if (sending) {
             setSending(false)
         }
@@ -181,11 +155,11 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
             <dd>
                 <p>
                     Un festival en plein air dédié aux <b>jeux de société modernes</b> sous toutes
-                    leurs formes. Les samedi 2 et dimanche 3 juillet 2022 !
+                    leurs formes. Les samedi 24 et dimanche 25 juin 2023 !
                 </p>
                 <p>
-                    En 2019 lors de la dernière édition, ce sont <b>16 000</b> joueurs qui se sont
-                    réunis sous 300 chapiteaux et 2 000 tables.
+                    En 2022, ce sont <b>18 000</b> visiteurs qui sont venus sous 300 chapiteaux et 2
+                    000 tables.
                 </p>
                 <p>
                     Les 2 jours que durent le festival sont entièrement dédiés à ce que le public{" "}
@@ -211,7 +185,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                     toute l&apos;année ^^
                 </p>
                 <p>
-                    Pendant le festival de 2019, nous étions <b>187 bénévoles</b> organisés en
+                    Pendant le festival de 2022, nous étions <b>196 bénévoles</b> organisés en
                     équipes qui chouchoutent les visiteurs en les accueillant, en s&apos;assurant
                     que tout se passe bien, ou encore en expliquant des règles de jeux.
                 </p>
@@ -224,9 +198,9 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                 <p>
                     La majorité d'entre nous sommes bénévoles les <b>samedi et dimanche</b>, mais
                     certains bénévoles ne sont pas disponibles les deux jours. On leur demande alors
-                    d'aider à la mise en place jeudi ou vendredi, ou au rangement le lundi, à la
-                    place d'un des jours du weekend. Bref, chacun participe comme il peut mais deux
-                    jours minimum !
+                    d'aider à la mise en place mercredi, jeudi ou vendredi, ou au rangement le
+                    lundi, à la place d'un des jours du weekend. Bref, chacun participe comme il
+                    peut mais <b>deux jours minimum</b> !
                 </p>
                 <p>
                     Le samedi soir quand les visiteurs sont partis, nous prolongeons la fête en
@@ -238,8 +212,8 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
 
             {!enableRegistering && (
                 <dt>
-                    L'inscription est clôturée pour l'édition 2022, mais si l'expérience vous tente,
-                    remplissez le formulaire suivant pour devenir bénévole à PeL 2023 !<br />
+                    L'inscription est clôturée pour l'édition 2023, mais si l'expérience te tente,
+                    remplis le formulaire suivant pour devenir bénévole à PeL 2024 !<br />
                     Dès septembre on se rencontrera sur Paris en petits groupes pour discuter du
                     festival, du bénévolat et surtout faire connaissance :)
                     <br />
@@ -248,98 +222,15 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
 
             {enableRegistering && (
                 <dt>
-                    Si l&apos;expérience vous tente, remplissez le formulaire suivant pour devenir
-                    bénévole !<br />
-                    Vous pouvez aussi juste nous rencontrer avant de vous décider à devenir
-                    bénévole, on comprend qu&apos;un saut pareil dans l&apos;inconnu soit difficile.
-                    <br />
-                    Dans les deux cas, venez rencontrer une poignée d'entre nous dans un bar/resto
-                    près de Châtelet ! :) Sur inscription uniquement...
+                    Si tu as envie de donner le sourire à des milliers de gens, remplis le
+                    formulaire suivant pour rencontrer une poignée d'entre nous dans un bar/resto
+                    près de Châtelet, avant de te décider ou non à devenir bénévole :)
                     <br />
                 </dt>
             )}
         </dl>
     )
 
-    const potentialVolunteerQuestion = enableRegistering && (
-        <div className={styles.inputWrapper}>
-            <div className={styles.leftCol}>
-                <div className={styles.multipleChoiceTitle}>Je veux devenir bénévole :</div>
-            </div>
-            <div className={styles.rightCol}>
-                {["Tout de suite !", "Peut-être après une rencontre avec des bénévoles"].map(
-                    (option) => (
-                        <label className={styles.longAnswerLabel} key={option}>
-                            <input
-                                type="radio"
-                                name="potentialVolunteer"
-                                onChange={sendBooleanRadioboxDispatch(
-                                    setPotentialVolunteer,
-                                    option !== "Tout de suite !"
-                                )}
-                                checked={potentialVolunteer === (option !== "Tout de suite !")}
-                            />{" "}
-                            {option}
-                        </label>
-                    )
-                )}
-            </div>
-        </div>
-    )
-
-    const alreadyVolunteerQuestion = !potentialVolunteer && (
-        <>
-            <div className={styles.inputWrapper}>
-                <div className={styles.leftCol}>
-                    <div className={styles.multipleChoiceTitle}>J'ai déjà été bénévole à PeL</div>
-                </div>
-                <div className={styles.rightCol}>
-                    <div className={styles.rightColContainer}>
-                        {["Oui", "Non"].map((option) => (
-                            <label className={styles.shortAnswerLabel} key={option}>
-                                <input
-                                    type="radio"
-                                    name="alreadyVolunteer"
-                                    onChange={sendBooleanRadioboxDispatch(
-                                        setAlreadyVolunteer,
-                                        option === "Oui"
-                                    )}
-                                    checked={alreadyVolunteer === (option === "Oui")}
-                                />{" "}
-                                {option}
-                            </label>
-                        ))}
-                    </div>
-                </div>
-            </div>
-
-            {alreadyVolunteer && (
-                <dl className={styles.registerIntro}>
-                    <dd>
-                        <p>Dans ce cas pourquoi t'inscris-tu ici ? ^^</p>
-                        <p>
-                            Si tu te rappelles de l'email que tu avais utilisé à ta dernière
-                            inscription sur le site Force Orange des bénévoles (même sur l'ancienne
-                            version) tu peux{" "}
-                            <a href="/sidentifier" target="_blank" rel="noreferrer">
-                                t'identifier ici
-                            </a>{" "}
-                            avec ton ancien mot de passe, ou en{" "}
-                            <a href="/sinscrire" target="_blank" rel="noreferrer">
-                                demander un nouveau ici
-                            </a>
-                            .
-                        </p>
-                        <p>
-                            Autrement, si tu as changé d'email, mieux vaut nous le communiquer à
-                            benevoles@parisestludique.fr en précisant bien tes nom et prénom :)
-                        </p>
-                    </dd>
-                </dl>
-            )}
-        </>
-    )
-
     const commentQuestion = (
         <dl className={styles.inputWrapper}>
             <dd className={styles.commentWrapper}>
@@ -448,10 +339,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     const meeting = enableRegistering && (
         <>
             <dl className={styles.registerIntro}>
-                {!potentialVolunteer && <dt>Faisons connaissance !</dt>}
-                {potentialVolunteer && (
-                    <dt>Se rencontrer avant de se décider à devenir bénévole ?</dt>
-                )}
+                <dt>Faisons connaissance !</dt>
                 <dd>
                     <p>
                         On organise des rencontres entre de nouvelles personnes comme toi, et des
@@ -461,23 +349,13 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                     <p>
                         Ces rencontres ont lieu à 19h dans un bar/resto calme à Châtelet, le{" "}
                         <a
-                            href="https://goo.gl/maps/N5NYWDF66vNQDFMh8"
+                            href="https://g.page/lerhinocerosparis?share"
                             id="sfmMap"
                             key="sfmMap"
                             target="_blank"
                             rel="noreferrer"
                         >
-                            Street Food Market
-                        </a>
-                        , ou à une soirée festive à 2 pas du lieu du festival, aux{" "}
-                        <a
-                            href="https://www.captainturtle.fr/aperos-petanque-paris/"
-                            id="petanque"
-                            key="petanque"
-                            target="_blank"
-                            rel="noreferrer"
-                        >
-                            apéros de la pétanque
+                            Rhinocéros
                         </a>
                         .
                     </p>
@@ -535,11 +413,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
                             name="commentFirstMeeting"
                             id="commentFirstMeeting"
                             className={styles.inputWrapper}
-                            placeholder={
-                                potentialVolunteer
-                                    ? "Mince. Quelles dates t'arrangeraient ? Ou si c'est plus simple, quels jours sont à éviter ? Est-ce trop loin de chez toi ? Préfères-tu nous rencontrer en visio ?"
-                                    : "Ce n'est pas obligé mais ça aurait été top ! Manques-tu de temps ? Préfères-tu une autre date ? Est-ce trop loin de chez toi ? Préfères-tu nous rencontrer en visio ?"
-                            }
+                            placeholder="Mince. Quelles dates t'arrangeraient ? Ou si c'est plus simple, quels jours sont à éviter ? Est-ce trop loin de chez toi ? Préfères-tu nous rencontrer en visio ?"
                             value={commentFirstMeeting}
                             onChange={sendTextareaDispatch(setCommentFirstMeeting)}
                         />
@@ -549,79 +423,6 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
         </>
     )
 
-    const helpBefore = enableRegistering && !potentialVolunteer && (
-        <>
-            <dl className={styles.registerIntro}>
-                <dt>Bénévolat en amont du festival</dt>
-                <dd>
-                    <p>
-                        En tant que bénévole, tu fais selon tes envies, tes disponibilités, ton
-                        énergie. Si personne ne veut faire quelque chose de primordial pour le
-                        festival, on paye quelqu'un de l'extérieur. Par exemple le transport+montage
-                        des tentes+tables, ou la sécurité de nuit sont délégués à des prestataires.
-                        Et si ce quelque chose n'est pas primordiale et que personne ne veut s'en
-                        occuper, bah tant pis on le fait pas ^^
-                    </p>
-                    <p>
-                        Après on essaye de faire plein de choses sans aide extérieure. Pour le
-                        plaisir de collaborer à un projet entre bénévoles parfois devenus amis, pour
-                        acquérir de nouvelles compétences, parce que chaque économie d'argent fait
-                        baisser le prix d'entrée au festival et contribue à le rendre plus
-                        accessible.
-                    </p>
-                </dd>
-            </dl>
-            <div className={styles.inputWrapper}>
-                <div className={styles.leftCol}>
-                    <div className={styles.multipleChoiceTitle}>
-                        Bref, as-tu le temps et l'envie de voir si tu peux aider en amont du
-                        festival ?
-                    </div>
-                </div>
-                <div className={styles.rightCol}>
-                    <div className={styles.rightColContainer}>
-                        {[
-                            { value: "oui", desc: "Oui" },
-                            { value: "non", desc: "Non" },
-                            { value: "", desc: "Ne sais pas" },
-                        ].map((option) => (
-                            <label className={styles.shortAnswerLabel} key={option.value}>
-                                <input
-                                    type="radio"
-                                    name="canHelpBefore"
-                                    value={option.value}
-                                    onChange={sendRadioboxDispatch(setCanHelpBefore)}
-                                    checked={canHelpBefore === option.value}
-                                />{" "}
-                                {option.desc}
-                            </label>
-                        ))}
-                    </div>
-                </div>
-            </div>
-            <dl className={styles.registerIntro}>
-                <dd>
-                    {canHelpBefore === "oui" && (
-                        <p>
-                            Génial ! Quand tu auras fini de t'inscrire et que tu seras identifié sur
-                            le site, nous t'en parlerons plus en détail.
-                        </p>
-                    )}
-                    {canHelpBefore === "non" && (
-                        <p>
-                            Aucun souci tu nous seras d'une aide précieuse le jour J c'est déjà
-                            énorme !
-                        </p>
-                    )}
-                    <p>
-                        Si tu changes d'avis, il sera possible de revenir sur cette décision dans
-                        ton profil sur le site.
-                    </p>
-                </dd>
-            </dl>
-        </>
-    )
-
     const pelMember = enableRegistering && (
         <>
             <dl className={styles.registerIntro}>
@@ -744,9 +545,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     const submitButton = (
         <>
             <div className={styles.buttonWrapper}>
-                <FormButton onClick={onSubmit} disabled={!potentialVolunteer && alreadyVolunteer}>
-                    Envoyer
-                </FormButton>
+                <FormButton onClick={onSubmit}>Envoyer</FormButton>
             </div>
             <div className={styles.formReactions}>
                 {sendingElement}
@@ -759,21 +558,13 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     return (
         <form>
             {intro}
-            {potentialVolunteerQuestion}
-            {alreadyVolunteerQuestion}
-
-            {(potentialVolunteer || !alreadyVolunteer) && (
-                <>
-                    {enableRegistering && commentQuestion}
-                    {cameAsVisitor}
-                    {meeting}
-                    {helpBefore}
-                    {pelMember}
-                    {nameMobileEmail}
-                    {!enableRegistering && commentQuestion}
-                    {howToContact !== "Aucun" && submitButton}
-                </>
-            )}
+            {enableRegistering && commentQuestion}
+            {cameAsVisitor}
+            {meeting}
+            {pelMember}
+            {nameMobileEmail}
+            {!enableRegistering && commentQuestion}
+            {howToContact !== "Aucun" && submitButton}
         </form>
     )
 }
diff --git a/src/components/VolunteerBoard/Board.tsx b/src/components/VolunteerBoard/Board.tsx
index 953b3c5..3f17984 100644
--- a/src/components/VolunteerBoard/Board.tsx
+++ b/src/components/VolunteerBoard/Board.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from "react"
-// import DayWishes from "./DayWishes/DayWishes"
-// import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
+import DayWishes from "./DayWishes/DayWishes"
+import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
 // import Hosting from "./Hosting/Hosting"
 // import HostingFormModal from "./HostingForm/HostingFormModal"
 // import Meals from "./Meals/Meals"
@@ -12,7 +12,7 @@ import { FC, memo } from "react"
 // import VolunteerTeam from "./VolunteerTeam/VolunteerTeam"
 import withUserConnected from "../../utils/withUserConnected"
 import ContentTitle from "../ui/Content/ContentTitle"
-// import { fetchFor as fetchForDayWishesForm } from "./DayWishesForm/DayWishesForm"
+import { fetchFor as fetchForDayWishesForm } from "./DayWishesForm/DayWishesForm"
 // import { fetchFor as fetchForHostingForm } from "./HostingForm/HostingForm"
 // import { fetchFor as fetchForMealsForm } from "./MealsForm/MealsForm"
 // import { fetchFor as fetchForParticipationDetailsForm } from "./ParticipationDetailsForm/ParticipationDetailsForm"
@@ -39,9 +39,9 @@ const Board: FC = (): JSX.Element => {
             {retex && <BrunchFormModal />}
             {retex && <Retex />}
             {retex && <RetexFormModal />}
-            {/* <DayWishes />
-        <DayWishesFormModal />
-        <ParticipationDetails />
+            <DayWishes />
+            <DayWishesFormModal />
+            {/* <ParticipationDetails />
         <ParticipationDetailsFormModal />
         <TeamWishes />
         <TeamWishesFormModal />
@@ -60,7 +60,7 @@ export const fetchFor = [
     ...fetchForPersonalInfoForm,
     ...fetchForRetexForm,
     ...fetchForBrunchForm,
-    // ...fetchForDayWishesForm,
+    ...fetchForDayWishesForm,
     // ...fetchForHostingForm,
     // ...fetchForMealsForm,
     // ...fetchForParticipationDetailsForm,
diff --git a/src/components/VolunteerBoard/Brunch/Brunch.tsx b/src/components/VolunteerBoard/Brunch/Brunch.tsx
index b067b29..ad5a5cd 100644
--- a/src/components/VolunteerBoard/Brunch/Brunch.tsx
+++ b/src/components/VolunteerBoard/Brunch/Brunch.tsx
@@ -27,7 +27,10 @@ const Brunch: FC<Props> = (): JSX.Element | null => {
                 )}
                 {question1 === 0 && <>Je ne viendrai pas au brunch </>}
                 {question1 > 0 && (
-                    <>Je viendrai au brunch{question1 > 1 && <> avec {question1} personne(s)</>}</>
+                    <>
+                        Je viendrai au brunch
+                        {question1 > 1 && <> avec {+question1 - 1} personne(s)</>}
+                    </>
                 )}
             </div>
             <div className={styles.editButton}>
diff --git a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
index e7cf811..2db65d5 100644
--- a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
+++ b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
@@ -18,22 +18,22 @@ const DayWishes: FC = (): JSX.Element | null => {
             <div className={styles.title}>Mes présences</div>
             {participation === "non" && (
                 <div className={styles.participationLabel}>
-                    Je <b>ne participerai pas</b> à PeL 2022 :(
+                    Je <b>ne participerai pas</b> à PeL 2023 :(
                 </div>
             )}
             {participation === "oui" && (
                 <div className={styles.participationLabel}>
-                    Je <b className={styles.yesParticipation}>participerai</b> à PeL 2022 !
+                    Je <b className={styles.yesParticipation}>participerai</b> à PeL 2023 !
                 </div>
             )}
             {participation === "peut-etre" && (
                 <div className={styles.participationLabel}>
-                    Je <b>ne sais pas encore</b> si je participerai à PeL 2022
+                    Je <b>ne sais pas encore</b> si je participerai à PeL 2023
                 </div>
             )}
             {participation === "inconnu" && (
                 <div className={styles.lineEmpty}>
-                    Participation à PeL 2022{" "}
+                    Participation à PeL 2023{" "}
                     <span className={styles.lineEmpty}>non renseignées</span>
                 </div>
             )}
diff --git a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
index b06f89e..2e57ef0 100644
--- a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
+++ b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
@@ -72,7 +72,7 @@ const DayWishesForm: FC<Props> = ({ children, afterSubmit }): JSX.Element => {
                 <div className={styles.leftCol}>
                     <div className={styles.participationTitle}>
                         Si les conditions sanitaires te le permettent, souhaites-tu être bénévole à
-                        PeL 2022 ?
+                        PeL les 24 & 25 juin 2023 ?
                     </div>
                 </div>
                 <div className={styles.rightCol}>
@@ -124,6 +124,8 @@ const DayWishesForm: FC<Props> = ({ children, afterSubmit }): JSX.Element => {
                 <div className={styles.leftCol}>
                     <div className={styles.dayWishesTitle}>
                         Quels jours viendras-tu ?<br />
+                        Il est tôt pour le dire, tu peux y repondre plus tard sur la page profil.
+                        <br />
                         (Minimum 2 jours dont l'un sera samedi ou dimanche, idéalement samedi{" "}
                         <b>et</b> dimanche ^^)
                     </div>
diff --git a/src/components/index.ts b/src/components/index.ts
index e962db6..c8386e5 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,8 +8,10 @@ import DayWishesForm, {
 import ErrorBoundary from "./ErrorBoundary"
 import GameList from "./GameList"
 import Loading from "./Loading"
-import LoanBoxList, { fetchFor as fetchForLoan } from "./Loan/LoanBoxList"
-import LoanIntro from "./Loan/LoanIntro"
+import LoaningIntro from "./Loan/LoaningIntro"
+import Loaning, { fetchFor as fetchForLoaning } from "./Loan/Loaning"
+import LoansIntro from "./Loan/LoansIntro"
+import Loans, { fetchFor as fetchForLoans } from "./Loan/Loans"
 import LoginForm from "./LoginForm"
 import KnowledgeBoxList, { fetchFor as fetchForKnowledge } from "./Knowledge/KnowledgeBoxList"
 import KnowledgeCard, { fetchFor as fetchForKnowledgeCard } from "./Knowledge/KnowledgeCard"
@@ -45,9 +47,12 @@ export {
     fetchForKnowledge,
     KnowledgeIntro,
     Loading,
-    LoanBoxList,
-    fetchForLoan,
-    LoanIntro,
+    LoaningIntro,
+    Loaning,
+    fetchForLoaning,
+    LoansIntro,
+    Loans,
+    fetchForLoans,
     LoginForm,
     Asks,
     fetchForAsks,
diff --git a/src/pages/Loaning/LoaningPage.tsx b/src/pages/Loaning/LoaningPage.tsx
new file mode 100644
index 0000000..b911258
--- /dev/null
+++ b/src/pages/Loaning/LoaningPage.tsx
@@ -0,0 +1,33 @@
+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 { LoaningIntro, Loaning, fetchForLoaning } from "../../components"
+import { selectUserJwtToken } from "../../store/auth"
+
+export type Props = RouteComponentProps
+
+const LoaningPage: 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.loaningPage}>
+            <div className={styles.loaningContent}>
+                <Helmet title="LoaningPage" />
+                <LoaningIntro />
+                <Loaning />
+            </div>
+        </div>
+    )
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [...fetchForLoaning.map((f) => f())]
+
+export default memo(LoaningPage)
diff --git a/src/pages/Loaning/index.tsx b/src/pages/Loaning/index.tsx
new file mode 100755
index 0000000..d0c4b80
--- /dev/null
+++ b/src/pages/Loaning/index.tsx
@@ -0,0 +1,16 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props, loadData } from "./LoaningPage"
+
+const Loaning = loadable(() => import("./LoaningPage"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <Loaning {...props} />
+    </ErrorBoundary>
+)
+
+export { loadData }
diff --git a/src/pages/Loan/styles.module.scss b/src/pages/Loaning/styles.module.scss
similarity index 64%
rename from src/pages/Loan/styles.module.scss
rename to src/pages/Loaning/styles.module.scss
index db1afb2..a50181c 100755
--- a/src/pages/Loan/styles.module.scss
+++ b/src/pages/Loaning/styles.module.scss
@@ -1,9 +1,13 @@
 @import "../../theme/mixins";
 
-.loanPage {
+.loaningPage {
     @include page-wrapper-center;
 }
 
-.loanContent {
+.loaningContent {
     @include page-content-wrapper(700px);
 }
+
+.hide {
+    display: none;
+}
diff --git a/src/pages/Loan/LoanPage.tsx b/src/pages/Loans/LoansPage.tsx
similarity index 59%
rename from src/pages/Loan/LoanPage.tsx
rename to src/pages/Loans/LoansPage.tsx
index b7fe0ed..68f21f2 100644
--- a/src/pages/Loan/LoanPage.tsx
+++ b/src/pages/Loans/LoansPage.tsx
@@ -5,29 +5,29 @@ import { Helmet } from "react-helmet"
 
 import { AppThunk } from "../../store"
 import styles from "./styles.module.scss"
-import { LoanBoxList, LoanIntro, fetchForLoan } from "../../components"
+import { LoansIntro, Loans, fetchForLoans } from "../../components"
 import { selectUserJwtToken } from "../../store/auth"
 
 export type Props = RouteComponentProps
 
-const LoanPage: FC<Props> = (): JSX.Element => {
+const LoansPage: 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.loanPage}>
-            <div className={styles.loanContent}>
-                <Helmet title="LoanPage" />
-                <LoanIntro />
-                <LoanBoxList />
+        <div className={styles.loaningPage}>
+            <div className={styles.loaningContent}>
+                <Helmet title="LoansPage" />
+                <LoansIntro />
+                <Loans />
             </div>
         </div>
     )
 }
 
 // Fetch server-side data here
-export const loadData = (): AppThunk[] => [...fetchForLoan.map((f) => f())]
+export const loadData = (): AppThunk[] => [...fetchForLoans.map((f) => f())]
 
-export default memo(LoanPage)
+export default memo(LoansPage)
diff --git a/src/pages/Loan/index.tsx b/src/pages/Loans/index.tsx
similarity index 65%
rename from src/pages/Loan/index.tsx
rename to src/pages/Loans/index.tsx
index c7b61dc..7c65dae 100755
--- a/src/pages/Loan/index.tsx
+++ b/src/pages/Loans/index.tsx
@@ -1,15 +1,15 @@
 import loadable from "@loadable/component"
 
 import { Loading, ErrorBoundary } from "../../components"
-import { Props, loadData } from "./LoanPage"
+import { Props, loadData } from "./LoansPage"
 
-const Loan = loadable(() => import("./LoanPage"), {
+const Loans = loadable(() => import("./LoansPage"), {
     fallback: <Loading />,
 })
 
 export default (props: Props): JSX.Element => (
     <ErrorBoundary>
-        <Loan {...props} />
+        <Loans {...props} />
     </ErrorBoundary>
 )
 
diff --git a/src/pages/Loans/styles.module.scss b/src/pages/Loans/styles.module.scss
new file mode 100755
index 0000000..a50181c
--- /dev/null
+++ b/src/pages/Loans/styles.module.scss
@@ -0,0 +1,13 @@
+@import "../../theme/mixins";
+
+.loaningPage {
+    @include page-wrapper-center;
+}
+
+.loaningContent {
+    @include page-content-wrapper(700px);
+}
+
+.hide {
+    display: none;
+}
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 402bf65..018de33 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -10,7 +10,8 @@ import AsyncAnnouncements, { loadData as loadAnnouncementsData } from "../pages/
 import AsyncTeamAssignment, { loadData as loadTeamAssignmentData } from "../pages/TeamAssignment"
 import AsyncRegisterPage, { loadData as loadRegisterPage } from "../pages/Register"
 import AsyncKnowledge, { loadData as loadKnowledgeData } from "../pages/Knowledge"
-import AsyncLoan, { loadData as loadLoanData } from "../pages/Loan"
+import AsyncLoans, { loadData as loadLoansData } from "../pages/Loans"
+import AsyncLoaning, { loadData as loadLoaningData } from "../pages/Loaning"
 import AsyncKnowledgeCards, { loadData as loadCardKnowledgeData } from "../pages/KnowledgeCards"
 import AsyncTeams, { loadData as loadTeamsData } from "../pages/Teams"
 import AsyncBoard, { loadData as loadBoardData } from "../pages/Board"
@@ -47,8 +48,13 @@ export default [
             },
             {
                 path: "/emprunts",
-                component: AsyncLoan,
-                loadData: loadLoanData,
+                component: AsyncLoans,
+                loadData: loadLoansData,
+            },
+            {
+                path: "/emprunter",
+                component: AsyncLoaning,
+                loadData: loadLoaningData,
             },
             {
                 path: "/fiches",
diff --git a/src/server/gsheets/boxes.ts b/src/server/gsheets/boxes.ts
index 659830f..e9fbe4b 100644
--- a/src/server/gsheets/boxes.ts
+++ b/src/server/gsheets/boxes.ts
@@ -16,7 +16,7 @@ export const detailedBoxListGet = expressAccessor.get(async (list) => {
     const toBeAsked: DetailedBox[] = []
 
     gameList.forEach((game) => {
-        const box: Box | undefined = list.find((g) => g.gameId === game.id)
+        const box: Box | undefined = list.find((b) => b.gameId === game.id)
         if ((box && box.unplayable) || (!box && !game.toBeKnown)) {
             return
         }
diff --git a/src/server/gsheets/games.ts b/src/server/gsheets/games.ts
index c70a9ba..e947141 100644
--- a/src/server/gsheets/games.ts
+++ b/src/server/gsheets/games.ts
@@ -1,8 +1,24 @@
 import axios from "axios"
 import { Parser } from "xml2js"
-import { assign, cloneDeep, find } from "lodash"
+import {
+    assign,
+    cloneDeep,
+    every,
+    find,
+    groupBy,
+    last,
+    mapValues,
+    reduce,
+    some,
+    sortBy,
+} from "lodash"
 import ExpressAccessors from "./expressAccessors"
-import { Game, GameWithoutId, translationGame } from "../../services/games"
+import { getSheet } from "./accessors"
+import { Game, GameWithoutId, GameWithVolunteers, translationGame } from "../../services/games"
+import { translationVolunteer, Volunteer, VolunteerWithoutId } from "../../services/volunteers"
+import { translationBox, Box, BoxWithoutId } from "../../services/boxes"
+import { getUniqueNickname } from "./tools"
+import { gameTitleCategory, gameTitleExactCategory, gameTitleOrder } from "../../store/utils"
 
 const expressAccessor = new ExpressAccessors<GameWithoutId, Game>(
     "Games",
@@ -10,7 +26,7 @@ const expressAccessor = new ExpressAccessors<GameWithoutId, Game>(
     translationGame
 )
 
-export const gameListGet = expressAccessor.listGet()
+// export const gameListGet = expressAccessor.listGet()
 // export const gameGet = expressAccessor.get()
 // export const gameAdd = expressAccessor.add()
 // export const gameSet = expressAccessor.set()
@@ -18,7 +34,7 @@ export const gameListGet = expressAccessor.listGet()
 export const gameDetailsUpdate = expressAccessor.listSet(
     async (list, _body, _id, _roles, request) => {
         request.setTimeout(500000)
-        const newList = cloneDeep(list)
+        const newList: Game[] = cloneDeep(list)
 
         const data = await getData()
         const parser = new Parser()
@@ -98,3 +114,214 @@ async function getData(): Promise<string> {
     }
     return data
 }
+
+export const gameListGet = expressAccessor.get(async (list) => {
+    const boxSheet = await getSheet<BoxWithoutId, Box>("Boxes", new Box(), translationBox)
+
+    const boxList = await boxSheet.getList()
+    if (!boxList) {
+        throw Error("Unable to load boxList")
+    }
+
+    const toBeAsked: Game[] = []
+
+    list.forEach((game) => {
+        const box: Box | undefined = boxList.find((b) => b.gameId === game.id)
+        if (!box) {
+            return
+        }
+        toBeAsked.push({
+            id: game.id,
+            title: game.title,
+            bggId: game.bggId,
+            bggIdAlternative: game.bggIdAlternative,
+            bggPhoto: game.bggPhoto,
+            poufpaf: game.poufpaf,
+            playersMin: game.playersMin,
+            playersMax: game.playersMax,
+            duration: game.duration,
+            type: game.type,
+        } as Game)
+    })
+
+    return toBeAsked
+})
+
+export const gameWithVolunteersListGet = expressAccessor.get(
+    async (list, _body, id): Promise<GameWithVolunteers[]> => {
+        if (id <= 0) {
+            throw Error(`L'accès est réservé aux utilisateurs identifiés`)
+        }
+        const volunteerSheet = await getSheet<VolunteerWithoutId, Volunteer>(
+            "Volunteers",
+            new Volunteer(),
+            translationVolunteer
+        )
+        const volunteerList = await volunteerSheet.getList()
+        if (!volunteerList) {
+            throw Error("Unable to load volunteers")
+        }
+
+        const currentVolunteer: Volunteer | undefined = volunteerList.find((v) => v.id === id)
+        if (!currentVolunteer) {
+            throw Error(`Unknown volunteer ${id}`)
+        }
+
+        const boxSheet = await getSheet<BoxWithoutId, Box>("Boxes", new Box(), translationBox)
+        const boxList = await boxSheet.getList()
+        if (!boxList) {
+            throw Error("Unable to load boxes")
+        }
+
+        const giftGameIds = list
+            .filter((game) =>
+                every(
+                    volunteerList,
+                    (v) => !v.loanable.includes(game.id) && !v.playable.includes(game.id)
+                )
+            )
+            .map((game) => game.id)
+
+        const gamesToLoan = list
+            .filter((game) => currentVolunteer.loanable.includes(game.id))
+            .map((game) => ({
+                ...cloneDeep(game),
+                volunteerNicknames: volunteerToNicknameList(
+                    volunteerList.filter((v) => v.loanable.includes(game.id)),
+                    volunteerList
+                ),
+                toLoan: true,
+                boxCount: boxList.filter((b) => b.gameId === game.id).length,
+            }))
+
+        const gamesToGift = list
+            .filter(
+                (game) =>
+                    giftGameIds.includes(game.id) && currentVolunteer.loanable.includes(game.id)
+            )
+            .map((game) => ({
+                ...cloneDeep(game),
+                volunteerNicknames: volunteerToNicknameList(
+                    volunteerList.filter((v) => v.loanable.includes(game.id)),
+                    volunteerList
+                ),
+                toLoan: false,
+                boxCount: boxList.filter((b) => b.gameId === game.id).length,
+            }))
+
+        return [...gamesToLoan, ...gamesToGift]
+    }
+)
+
+function volunteerToNicknameList(volunteers: Volunteer[], allVolunteers: Volunteer[]): string[] {
+    return volunteers
+        .map((v) => getUniqueNickname(allVolunteers, v))
+        .sort((a, b) => a.localeCompare(b))
+}
+
+export const gamesToGiveListGet = expressAccessor.get(async (list): Promise<string[]> => {
+    const volunteerSheet = await getSheet<VolunteerWithoutId, Volunteer>(
+        "Volunteers",
+        new Volunteer(),
+        translationVolunteer
+    )
+    const volunteerList = await volunteerSheet.getList()
+    if (!volunteerList) {
+        throw Error("Unable to load volunteers")
+    }
+
+    const boxSheet = await getSheet<BoxWithoutId, Box>("Boxes", new Box(), translationBox)
+    const boxList = await boxSheet.getList()
+    if (!boxList) {
+        throw Error("Unable to load boxes")
+    }
+
+    volunteerList[105].playable = []
+
+    const giftGameTitles = list
+        .filter((game) =>
+            every(
+                volunteerList,
+                (v) => !v.loanable.includes(game.id) && !v.playable.includes(game.id)
+            )
+        )
+        .map((game) => game.title)
+
+    return giftGameTitles
+})
+type GameCategory = { start: string; end: string; titles: string[] }
+export const gameTitleOrderCategories = expressAccessor.get(
+    async (list): Promise<GameCategory[]> => {
+        const volunteerSheet = await getSheet<VolunteerWithoutId, Volunteer>(
+            "Volunteers",
+            new Volunteer(),
+            translationVolunteer
+        )
+        const volunteerList = await volunteerSheet.getList()
+        if (!volunteerList) {
+            throw Error("Unable to load volunteers")
+        }
+
+        const boxSheet = await getSheet<BoxWithoutId, Box>("Boxes", new Box(), translationBox)
+        const boxList = await boxSheet.getList()
+        if (!boxList) {
+            throw Error("Unable to load boxes")
+        }
+
+        volunteerList[105].playable = []
+
+        const giftGameIds = list
+            .filter((game) =>
+                every(
+                    volunteerList,
+                    (v) => !v.loanable.includes(game.id) && !v.playable.includes(game.id)
+                )
+            )
+            .map((game) => game.id)
+
+        const gamesToLoan = sortBy(
+            list.filter((game) => !giftGameIds.includes(game.id)).map((game) => cloneDeep(game)),
+            gameTitleOrder
+        )
+
+        const exaustiveCats = mapValues(groupBy(gamesToLoan, gameTitleCategory), (gameList) =>
+            gameList.map((game) => game.title)
+        )
+
+        const cats: GameCategory[] = reduce(
+            Object.entries(exaustiveCats),
+            (res, [exaustiveCat, catTitles]) => {
+                const prevCat = last(res)
+                const prevCount = prevCat?.titles.length || 0
+                if (prevCount === 0 || prevCount + catTitles.length > 10) {
+                    const newCat = {
+                        start: exaustiveCat,
+                        end: exaustiveCat,
+                        titles: [...catTitles],
+                    }
+                    res.push(newCat)
+                } else if (prevCat !== undefined) {
+                    prevCat.end = exaustiveCat
+                    catTitles.forEach((title) => prevCat.titles.push(title))
+                }
+                return res
+            },
+            [] as GameCategory[]
+        )
+
+        const catList: string[] = cats.map((cat) => `${cat.start}-${cat.end}`)
+
+        console.log(catList.join("\n"))
+
+        const availableGiftIds = giftGameIds.filter((id) =>
+            some(volunteerList, (v: Volunteer) => v.giftable.includes(id))
+        )
+        console.log("availableGiftIds", availableGiftIds)
+
+        gamesToLoan.forEach((g) => gameTitleExactCategory(g))
+
+        return cats
+    }
+)
+
+// _.mapValues(list, cat => cat.length)
diff --git a/src/server/gsheets/localDb.ts b/src/server/gsheets/localDb.ts
index 8fb98e2..b45bfb2 100644
--- a/src/server/gsheets/localDb.ts
+++ b/src/server/gsheets/localDb.ts
@@ -1,9 +1,10 @@
 // eslint-disable-next-line max-classes-per-file
 import path from "path"
-import _ from "lodash"
+import _, { assign } from "lodash"
 import { promises as fs } from "fs"
 import { Volunteer } from "../../services/volunteers"
 import { Postulant } from "../../services/postulants"
+import { Retex } from "../../services/retex"
 
 const DB_PATH = path.resolve(process.cwd(), "access/db.json")
 const DB_TO_LOAD_PATH = path.resolve(process.cwd(), "access/dbToLoad.json")
@@ -275,6 +276,11 @@ function anonimizedDb(_s: States): States {
             v.comment = v.id % 3 === 0 ? "Bonjour, j'adore l'initiative!" : ""
         })
     }
+    if (s.Retex) {
+        ;(s.Retex as Retex[]).forEach((r) => {
+            assign(r, new Retex(), { id: r.id, dayWishes: r.dayWishes })
+        })
+    }
     return s
 }
 
diff --git a/src/server/gsheets/tools.ts b/src/server/gsheets/tools.ts
new file mode 100644
index 0000000..a9cba29
--- /dev/null
+++ b/src/server/gsheets/tools.ts
@@ -0,0 +1,16 @@
+import { remove } from "lodash"
+import { Volunteer } from "../../services/volunteers"
+
+export function getUniqueNickname(list: Volunteer[], volunteer: Volunteer): string {
+    const lastnameList = list
+        .filter((v) => v.firstname === volunteer.firstname)
+        .map((v) => v.lastname)
+    let lastnamePrefix = ""
+    while (lastnameList.length > 1) {
+        lastnamePrefix += volunteer.lastname.charAt(lastnamePrefix.length)
+        // eslint-disable-next-line no-loop-func
+        remove(lastnameList, (lastname) => !lastname.startsWith(lastnamePrefix))
+    }
+    const nickname = `${volunteer.firstname}${lastnamePrefix ? ` ${lastnamePrefix}.` : ""}`
+    return nickname
+}
diff --git a/src/server/gsheets/volunteers.ts b/src/server/gsheets/volunteers.ts
index 76aa05c..7593f26 100644
--- a/src/server/gsheets/volunteers.ts
+++ b/src/server/gsheets/volunteers.ts
@@ -1,6 +1,6 @@
 import path from "path"
 import * as fs from "fs"
-import { assign, cloneDeep, max, omit, pick, remove } from "lodash"
+import { assign, cloneDeep, max, omit, pick } from "lodash"
 import bcrypt from "bcrypt"
 import sgMail from "@sendgrid/mail"
 
@@ -24,6 +24,7 @@ import {
 } from "../../services/volunteers"
 import { canonicalEmail, canonicalMobile, trim, validMobile } from "../../utils/standardization"
 import { getJwt } from "../secure"
+import { getUniqueNickname } from "./tools"
 
 const expressAccessor = new ExpressAccessors<VolunteerWithoutId, Volunteer>(
     "Volunteers",
@@ -577,17 +578,3 @@ export const volunteerLoanSet = expressAccessor.set(async (list, body, id) => {
         } as VolunteerLoan,
     }
 })
-
-function getUniqueNickname(list: Volunteer[], volunteer: Volunteer): string {
-    const lastnameList = list
-        .filter((v) => v.firstname === volunteer.firstname)
-        .map((v) => v.lastname)
-    let lastnamePrefix = ""
-    while (lastnameList.length > 1) {
-        lastnamePrefix += volunteer.lastname.charAt(lastnamePrefix.length)
-        // eslint-disable-next-line no-loop-func
-        remove(lastnameList, (lastname) => !lastname.startsWith(lastnamePrefix))
-    }
-    const nickname = `${volunteer.firstname}${lastnamePrefix ? ` ${lastnamePrefix}.` : ""}`
-    return nickname
-}
diff --git a/src/server/index.ts b/src/server/index.ts
index d70b449..06cf2bb 100755
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -19,7 +19,13 @@ import certbotRouter from "../routes/certbot"
 import { hasSecret, secure } from "./secure"
 import { announcementListGet } from "./gsheets/announcements"
 import { detailedBoxListGet } from "./gsheets/boxes"
-import { gameListGet, gameDetailsUpdate } from "./gsheets/games"
+import {
+    gameListGet,
+    gameDetailsUpdate,
+    gameWithVolunteersListGet,
+    gamesToGiveListGet,
+    gameTitleOrderCategories,
+} from "./gsheets/games"
 import { postulantAdd } from "./gsheets/postulants"
 import { teamListGet } from "./gsheets/teams"
 import {
@@ -98,6 +104,8 @@ app.get(
 app.get("/GameDetailsUpdate", gameDetailsUpdate)
 app.get("/BoxDetailedListGet", detailedBoxListGet)
 app.get("/GameListGet", gameListGet)
+app.get("/GamesToGiveListGet", gamesToGiveListGet)
+app.get("/GameTitleOrderCategories", gameTitleOrderCategories)
 app.get("/MiscMeetingDateListGet", miscMeetingDateListGet)
 app.get("/WishListGet", wishListGet)
 app.post("/WishAdd", wishAdd)
@@ -109,6 +117,7 @@ app.get("/VolunteerListGet", secure as RequestHandler, volunteerListGet)
 
 // Secured APIs
 app.get("/AnnouncementListGet", secure as RequestHandler, announcementListGet)
+app.get("/GameWithVolunteersListGet", secure as RequestHandler, gameWithVolunteersListGet)
 app.get("/MiscDiscordInvitationGet", secure as RequestHandler, miscDiscordInvitation)
 app.post("/RetexSet", secure as RequestHandler, retexSet)
 app.get("/TeamListGet", teamListGet)
diff --git a/src/services/accessors.ts b/src/services/accessors.ts
index b552e64..add1239 100644
--- a/src/services/accessors.ts
+++ b/src/services/accessors.ts
@@ -90,6 +90,37 @@ export default class ServiceAccessors<
         }
     }
 
+    securedCustomListGet<InputElements extends Array<any>, OutputType>(
+        apiName: string
+    ): (
+        jwt: string,
+        ...params: InputElements
+    ) => Promise<{
+        data?: any
+        error?: Error
+    }> {
+        interface ElementGetResponse {
+            data?: any
+            error?: Error
+        }
+        return async (jwt: string, ...params: InputElements): Promise<ElementGetResponse> => {
+            try {
+                const auth = { headers: { Authorization: `Bearer ${jwt}` } }
+                const fullAxiosConfig = _.defaultsDeep(auth, axiosConfig)
+                const { data } = await axios.get(
+                    `${config.API_URL}/${this.elementName}${apiName}`,
+                    { ...fullAxiosConfig, params }
+                )
+                if (data.error) {
+                    throw Error(data.error)
+                }
+                return { data } as { data: OutputType }
+            } catch (error) {
+                return { error: error as Error }
+            }
+        }
+    }
+
     // eslint-disable-next-line @typescript-eslint/ban-types
     add(): (volunteerWithoutId: ElementNoId) => Promise<{
         data?: Element
diff --git a/src/services/games.ts b/src/services/games.ts
index f21c0fb..ad91f03 100644
--- a/src/services/games.ts
+++ b/src/services/games.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 export class Game {
     id = 0
 
@@ -26,6 +27,14 @@ export class Game {
     toBeKnown = false
 }
 
+export class GameWithVolunteers extends Game {
+    volunteerNicknames: string[] = []
+
+    toLoan = true
+
+    boxCount = 0
+}
+
 export const translationGame: { [k in keyof Game]: string } = {
     id: "id",
     title: "titre",
diff --git a/src/services/gamesAccessors.ts b/src/services/gamesAccessors.ts
index 959556f..0adadc8 100644
--- a/src/services/gamesAccessors.ts
+++ b/src/services/gamesAccessors.ts
@@ -1,5 +1,5 @@
 import ServiceAccessors from "./accessors"
-import { elementName, Game, GameWithoutId } from "./games"
+import { elementName, Game, GameWithVolunteers, GameWithoutId } from "./games"
 
 const serviceAccessors = new ServiceAccessors<GameWithoutId, Game>(elementName)
 
@@ -9,3 +9,8 @@ export const gameListGet = serviceAccessors.listGet()
 // export const gameSet = serviceAccessors.set()
 
 export const gameDetailsUpdate = serviceAccessors.securedCustomGet<[], Game[]>("DetailsUpdate")
+
+export const gameWithVolunteersListGet = serviceAccessors.securedCustomListGet<
+    [],
+    GameWithVolunteers[]
+>("WithVolunteersListGet")
diff --git a/src/store/boxList.ts b/src/store/boxList.ts
index 8b84459..442196d 100644
--- a/src/store/boxList.ts
+++ b/src/store/boxList.ts
@@ -1,7 +1,7 @@
 import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit"
 import { sortedUniqBy, sortBy } from "lodash"
 
-import { StateRequest, toastError, elementListFetch } from "./utils"
+import { StateRequest, toastError, elementListFetch, gameTitleOrder } from "./utils"
 import { DetailedBox } from "../services/boxes"
 import { AppThunk, AppState, EntitiesRequest } from "."
 import { detailedBoxListGet } from "../services/boxesAccessors"
@@ -59,9 +59,10 @@ export const selectBoxList = createSelector(
     }
 )
 
-export const selectSortedUniqueDetailedBoxes = createSelector(selectBoxList, (boxes) =>
-    sortedUniqBy(sortBy(boxes, "title"), "title")
-)
+export const selectSortedUniqueDetailedBoxes = createSelector(selectBoxList, (boxes) => {
+    const validBoxes = boxes.filter((box) => box) as DetailedBox[]
+    return sortedUniqBy(sortBy(validBoxes, gameTitleOrder), gameTitleOrder)
+})
 
 export const selectContainerSortedDetailedBoxes = createSelector(selectBoxList, (boxes) =>
     sortBy(boxes, "container")
diff --git a/src/store/gameWithVolunteersList.ts b/src/store/gameWithVolunteersList.ts
new file mode 100644
index 0000000..f34ee20
--- /dev/null
+++ b/src/store/gameWithVolunteersList.ts
@@ -0,0 +1,73 @@
+import { PayloadAction, createSlice, createEntityAdapter, createSelector } from "@reduxjs/toolkit"
+import { sortedUniqBy, sortBy } from "lodash"
+
+import { StateRequest, toastError, elementListFetch, gameTitleOrder } from "./utils"
+import { GameWithVolunteers } from "../services/games"
+import { AppThunk, AppState, EntitiesRequest } from "."
+import { gameWithVolunteersListGet } from "../services/gamesAccessors"
+
+const gameAdapter = createEntityAdapter<GameWithVolunteers>()
+
+export const initialState = gameAdapter.getInitialState({
+    readyStatus: "idle",
+} as StateRequest)
+
+const gameWithVolunteersList = createSlice({
+    name: "gameWithVolunteersList",
+    initialState,
+    reducers: {
+        getRequesting: (state) => {
+            state.readyStatus = "request"
+        },
+        getSuccess: (state, { payload }: PayloadAction<GameWithVolunteers[]>) => {
+            state.readyStatus = "success"
+            gameAdapter.setAll(state, payload)
+        },
+        getFailure: (state, { payload }: PayloadAction<string>) => {
+            state.readyStatus = "failure"
+            state.error = payload
+        },
+    },
+})
+
+export default gameWithVolunteersList.reducer
+export const { getRequesting, getSuccess, getFailure } = gameWithVolunteersList.actions
+
+export const fetchGameWithVolunteersList = elementListFetch(
+    gameWithVolunteersListGet,
+    getRequesting,
+    getSuccess,
+    getFailure,
+    (error: Error) => toastError(`Erreur lors du chargement des jeux JAV: ${error.message}`)
+)
+
+const shouldFetchGameWithVolunteersList = (state: AppState) =>
+    state.gameWithVolunteersList.readyStatus !== "success"
+
+export const fetchGameWithVolunteersListIfNeed = (): AppThunk => (dispatch, getState) => {
+    const { jwt } = getState().auth
+    if (shouldFetchGameWithVolunteersList(getState()))
+        return dispatch(fetchGameWithVolunteersList(jwt))
+
+    return null
+}
+
+export const selectGameWithVolunteersListState = (
+    state: AppState
+): EntitiesRequest<GameWithVolunteers> => state.gameWithVolunteersList
+
+export const selectGameWithVolunteersList = createSelector(
+    selectGameWithVolunteersListState,
+    ({ ids, entities, readyStatus }) => {
+        if (readyStatus !== "success") return []
+        return ids.map((id) => entities[id])
+    }
+)
+
+export const selectSortedUniqueGamesWithVolunteers = createSelector(
+    selectGameWithVolunteersList,
+    (games) => {
+        const gameWithVolunteers = games.filter((game) => game) as GameWithVolunteers[]
+        return sortedUniqBy(sortBy(gameWithVolunteers, gameTitleOrder), gameTitleOrder)
+    }
+)
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index 46acc4d..72cafa2 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -5,6 +5,7 @@ import announcementList from "./announcementList"
 import auth from "./auth"
 import boxList from "./boxList"
 import gameList from "./gameList"
+import gameWithVolunteersList from "./gameWithVolunteersList"
 import gameDetailsUpdate from "./gameDetailsUpdate"
 import miscDiscordInvitation from "./miscDiscordInvitation"
 import miscMeetingDateList from "./miscMeetingDateList"
@@ -39,6 +40,7 @@ export default (history: History) => ({
     auth,
     boxList,
     gameList,
+    gameWithVolunteersList,
     gameDetailsUpdate,
     miscDiscordInvitation,
     miscMeetingDateList,
diff --git a/src/store/utils.ts b/src/store/utils.ts
index 6d29f03..aa3d81c 100644
--- a/src/store/utils.ts
+++ b/src/store/utils.ts
@@ -4,6 +4,7 @@ import {
     ActionCreatorWithPayload,
     ThunkDispatch,
 } from "@reduxjs/toolkit"
+import { find } from "lodash"
 import { toast } from "react-toastify"
 
 import { AppState, AppThunk } from "."
@@ -143,3 +144,129 @@ export function elementValueFetch<Element>(
         }
     }
 }
+
+export function gameTitleOrder(boxOrGame: { title: string }): string {
+    return boxOrGame.title
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase()
+        .replace(/^[^a-z0-9]+/, "")
+        .replace(/^(le |la |les |l'|the )/, "")
+        .replace(/[^a-z0-9]/g, "")
+}
+
+export function gameTitleCategory(boxOrGame: { title: string }, length = 3): string {
+    return gameTitleOrder(boxOrGame)
+        .substring(0, length)
+        .replace(/(?<=[0-9]).+/, "")
+        .toUpperCase()
+}
+
+export function gameTitleExactCategory(boxOrGame: { title: string }): string {
+    const cats = [
+        ["1", "6"],
+        ["7", "AB"],
+        ["AC", "AK"],
+        ["ALA", "ALO"],
+        ["ALP", "AP"],
+        ["AQ", "ARG"],
+        ["ARH", "AT"],
+        ["AU", "AV"],
+        ["AW", "BAR"],
+        ["BAS", "BER"],
+        ["BES", "BLI"],
+        ["BLJ", "BRE"],
+        ["BRF", "CAC"],
+        ["CAD", "CAP"],
+        ["CAQ", "CEM"],
+        ["CEN", "CHIN"],
+        ["CHJ", "CK"],
+        ["CL"],
+        ["COA", "COL"],
+        ["COM"],
+        ["CON", "COP"],
+        ["COQ", "CRA"],
+        ["CRB", "DEB"],
+        ["DEC", "DES"],
+        ["DET", "DIC"],
+        ["DID", "DOM"],
+        ["DON", "DR"],
+        ["DS", "ELG"],
+        ["ELH", "EVE"],
+        ["EVD", "FAM"],
+        ["FAN", "FIC"],
+        ["FID", "FOL"],
+        ["FOM", "FUM"],
+        ["FUN", "GEE"],
+        ["GED", "GLA"],
+        ["GLB", "GQ"],
+        ["GR", "HAN"],
+        ["HAO", "HIM"],
+        ["HIN", "IL"],
+        ["IM", "IS"],
+        ["IT", "JE"],
+        ["JD", "KAB"],
+        ["KAC", "KEM"],
+        ["KEN", "KILL"],
+        ["KIM", "KOD"],
+        ["KOE", "LAB"],
+        ["LAC", "LIC"],
+        ["LID", "LIP"],
+        ["LIQ", "LOQ"],
+        ["LOR", "LZ"],
+        ["MAA", "MAN"],
+        ["MAO", "MED"],
+        ["MEE", "MIM"],
+        ["MINE", "MOR"],
+        ["MOS", "MYS"],
+        ["MYT", "NE"],
+        ["ND", "ODD"],
+        ["ODE", "ONE"],
+        ["ONF", "OU"],
+        ["OV", "PAN"],
+        ["PAO", "PEL"],
+        ["PEM", "PIO"],
+        ["PIP", "PLZ"],
+        ["PO", "PRI"],
+        ["PRJ", "PZ"],
+        ["QI", "RAT"],
+        ["RAU", "RI"],
+        ["RJ", "ROO"],
+        ["ROP", "SAL"],
+        ["SAM", "SEI"],
+        ["SEJ", "SIC"],
+        ["SID", "SL"],
+        ["SM", "SO"],
+        ["SPA", "SPX"],
+        ["SPY", "STE"],
+        ["STD", "SUN"],
+        ["SUO", "TAF"],
+        ["TAG", "TD"],
+        ["TE", "TIC"],
+        ["TID", "TIL"],
+        ["TIM"],
+        ["TIN", "TO"],
+        ["TP", "TRO"],
+        ["TRP", "UNE"],
+        ["UND", "VEM"],
+        ["VEN", "WAT"],
+        ["WAU", "WH"],
+        ["WI", "YE"],
+        ["YOGA", "ZOO"],
+    ]
+
+    const gameCat = gameTitleCategory(boxOrGame, 4)
+
+    const foundCat = find(cats, (cat) =>
+        cat[1]
+            ? gameCat.substring(0, cat[0].length) >= cat[0] &&
+              gameCat.substring(0, cat[1].length) <= `${cat[1]}`
+            : gameCat.substring(0, cat[0].length) === cat[0]
+    )
+
+    if (!foundCat) {
+        console.log("no game found for ", foundCat, boxOrGame.title)
+    }
+
+    return foundCat ? `${foundCat[0]}-${foundCat[1]}` : gameCat
+}