create dayWishes component

package.json

@@ -84,6 +84,7 @@
         "axios": "^0.21.1",
         "bcrypt": "^5.0.1",
         "chalk": "^4.1.1",
+        "classnames": "^2.3.1",
         "compression": "^1.7.4",
         "connected-react-router": "^6.9.1",
         "cookie-parser": "^1.4.6",

src/components/VolunteerBoard/DayWishes/DayWishes.tsx

@@ -0,0 +1,38 @@
+import { FC, memo, useCallback, useState } from "react"
+import classnames from "classnames"
+import { daysChoice, daysChoiceSelectionDefaultState } from "./days.utils"
+import styles from "./styles.module.scss"
+
+const DayWishes: FC = (): JSX.Element | null => {
+    const [selection, setSelection] = useState(daysChoiceSelectionDefaultState)
+    const onChoiceClick = useCallback(
+        (id) => {
+            setSelection({
+                ...selection,
+                [id]: !selection[id],
+            })
+        },
+        [selection, setSelection]
+    )
+
+    return (
+        <ul className={styles.dayWishes}>
+            {daysChoice.map(({ id, label }) => (
+                <li key={id} className={styles.dayWishesItem}>
+                    <button
+                        type="button"
+                        onClick={() => onChoiceClick(id)}
+                        className={classnames(
+                            styles.dayWishesButton,
+                            selection[id] && styles.active
+                        )}
+                    >
+                        {label}
+                    </button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default memo(DayWishes)

src/components/VolunteerBoard/DayWishes/days.utils.ts

@@ -0,0 +1,15 @@
+const daysUtils = ["Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi"]
+
+export const daysChoice = daysUtils.map((label) => ({
+    id: label[0],
+    label,
+}))
+
+interface selectionChoices {
+    [key: string]: boolean
+}
+
+export const daysChoiceSelectionDefaultState = daysChoice.reduce((state, { id }) => {
+    state[id] = false
+    return state
+}, <selectionChoices>{})

src/components/VolunteerBoard/DayWishes/styles.module.scss

@@ -0,0 +1,28 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.dayWishes {
+    @include clear-ul-style;
+}
+
+.dayWishesItem {
+    display: inline-block;
+    margin: 2px;
+}
+
+.dayWishesButton {
+    margin: 0;
+    padding: 4px;
+    border: 0;
+    border-radius: 0;
+    width: 90px;
+    text-align: center;
+    color: $color-grey-dark;
+    background-color: $color-grey-light;
+    cursor: pointer;
+
+    &.active {
+        color: $color-yellow;
+        background-color: $color-black;
+    }
+}

src/pages/DayWishes/DayWishes.tsx

@@ -9,6 +9,7 @@ import {
 } from "../../store/volunteerDayWishesSet"
 import { VolunteerDayWishes } from "../../services/volunteers"
 import { selectUserJwtToken } from "../../store/auth"
+import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
 
 export type Props = RouteComponentProps
 
@@ -62,26 +63,29 @@ const HomePage: FC<Props> = (): JSX.Element => {
 
     if (jwtToken) {
         return (
-            <form>
+            <div>
-                <input
+                <DayWishes />
-                    type="text"
+                <form>
-                    id="dayWishes"
+                    <input
-                    required
+                        type="text"
-                    value={dayWishes}
+                        id="dayWishes"
-                    onChange={onDayWishesChanged}
+                        required
-                />
+                        value={dayWishes}
-                <br />
+                        onChange={onDayWishesChanged}
-                <input
+                    />
-                    type="text"
+                    <br />
-                    id="dayWishesComment"
+                    <input
-                    required
+                        type="text"
-                    value={dayWishesComment}
+                        id="dayWishesComment"
-                    onChange={onDayWishesCommentChanged}
+                        required
-                />
+                        value={dayWishesComment}
-                <button type="button" onClick={onSubmit}>
+                        onChange={onDayWishesCommentChanged}
-                    Envoyer
+                    />
-                </button>
+                    <button type="button" onClick={onSubmit}>
-            </form>
+                        Envoyer
+                    </button>
+                </form>
+            </div>
         )
     }
     return <div>Besoin d&apos;être identifié</div>

src/theme/mixins.scss

@@ -28,3 +28,9 @@
         width: $desktopWidth;
     }
 }
+
+@mixin clear-ul-style {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}

src/theme/variables.scss

@@ -3,6 +3,7 @@ $color-black: #000;
 $color-orange: #ea4d0a;
 $color-yellow: #fdd137;
 $color-grey-dark: #555;
+$color-grey-light: #ccc;
 
 $border-large: 4px solid $color-black;
 $border-thin: 2px solid $color-black;

yarn.lock

@@ -3277,6 +3277,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.1:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"