From 2bfd8d2a7bf108ad60062a08b47ce43af6280ed6 Mon Sep 17 00:00:00 2001
From: memeriau <manuel.emeriau@mappy.com>
Date: Sat, 29 Jan 2022 16:49:34 +0100
Subject: [PATCH] add component to display day wishes

---
 .../VolunteerBoard/DayWishes/DayWishes.tsx    | 84 +++++--------------
 .../DayWishes/styles.module.scss              | 66 +++++----------
 .../DayWishesForm/DayWishesForm.tsx           | 78 +++++++++++++++++
 .../DayWishesForm/styles.module.scss          | 60 +++++++++++++
 .../{DayWishes => }/days.utils.ts             | 13 ++-
 src/pages/Board/Board.tsx                     | 36 ++++++++
 src/pages/Board/index.tsx                     | 16 ++++
 src/pages/Board/styles.module.scss            |  9 ++
 src/pages/DayWishes/DayWishes.tsx             |  2 +-
 src/routes/index.ts                           |  6 ++
 src/theme/mixins.scss                         | 11 +++
 src/theme/variables.scss                      |  1 +
 12 files changed, 269 insertions(+), 113 deletions(-)
 create mode 100644 src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
 create mode 100755 src/components/VolunteerBoard/DayWishesForm/styles.module.scss
 rename src/components/VolunteerBoard/{DayWishes => }/days.utils.ts (74%)
 create mode 100644 src/pages/Board/Board.tsx
 create mode 100755 src/pages/Board/index.tsx
 create mode 100755 src/pages/Board/styles.module.scss

diff --git a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
index e0191a7..fe09fd4 100644
--- a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
+++ b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
@@ -1,76 +1,30 @@
-import { FC, memo, useCallback, useEffect, useRef, useState } from "react"
-import classnames from "classnames"
+import { FC, memo } from "react"
 import get from "lodash/get"
-import set from "lodash/set"
 import styles from "./styles.module.scss"
-import {
-    daysChoice,
-    daysChoiceSelectionDefaultState,
-    selectionChoices,
-    useUserDayWishes,
-} from "./days.utils"
+import { getDayLabel, useUserDayWishes } from "../days.utils"
 
 const DayWishes: FC = (): JSX.Element | null => {
-    const [selection, setSelection] = useState(daysChoiceSelectionDefaultState)
-    const commentRef = useRef<HTMLTextAreaElement | null>(null)
-    const [userWishes, saveWishes] = useUserDayWishes()
-
-    useEffect(() => {
-        if (!userWishes) return
-        console.log("userWishes", userWishes)
-        const newSelection = get(userWishes, "dayWishes", []).reduce(
-            (acc: selectionChoices, day: string) => ({
-                ...acc,
-                [day]: true,
-            }),
-            daysChoice
-        )
-        setSelection(newSelection)
-        set(commentRef, "current.value", get(userWishes, "dayWishesComment", ""))
-    }, [setSelection, commentRef, userWishes])
-
-    const onChoiceClick = useCallback(
-        (id) => {
-            setSelection({
-                ...selection,
-                [id]: !selection[id],
-            })
-        },
-        [selection, setSelection]
-    )
-    const onChoiceSubmit = useCallback(() => {
-        const comment = get(commentRef, "current.value", "")
-        const days = daysChoice.map(({ id }) => id).filter((id) => selection[id])
-        saveWishes(days, comment)
-    }, [selection, commentRef, saveWishes])
+    const [userWishes] = useUserDayWishes()
+    const dayWishesString = get(userWishes, "dayWishes", []).map(getDayLabel).join(", ")
+    const comment = get(userWishes, "dayWishesComment", "")
 
     return (
         <div className={styles.dayWishes}>
-            <div className={styles.dayWishesTitle}>Jours de présence</div>
-            <ul className={styles.dayWishesList}>
-                {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>
-            <div className={styles.dayWishCommentWrapper}>
-                <label htmlFor="day-choice-comment">Commentaires</label>
-                <textarea id="day-choice-comment" ref={commentRef} />
+            <div className={styles.daysLine}>
+                <span className={styles.dayLineTitle}>Mes jours de présence :</span>
+                {dayWishesString && <span>{dayWishesString}</span>}
+                {!dayWishesString && <span>Non renseignés</span>}
             </div>
-            <div className={styles.dayWishesButtonWrapper}>
-                <button type="submit" onClick={onChoiceSubmit}>
-                    Enregistrer
-                </button>
+            {comment && (
+                <div className={styles.commentLine}>
+                    <span className={styles.commentLineTitle}>Mon commentaire :</span>
+                    <span className={styles.commentLineText}>
+                        {get(userWishes, "dayWishesComment", "")}
+                    </span>
+                </div>
+            )}
+            <div className={styles.editButton}>
+                <button type="button">Modifier</button>
             </div>
         </div>
     )
diff --git a/src/components/VolunteerBoard/DayWishes/styles.module.scss b/src/components/VolunteerBoard/DayWishes/styles.module.scss
index 3793802..8965534 100755
--- a/src/components/VolunteerBoard/DayWishes/styles.module.scss
+++ b/src/components/VolunteerBoard/DayWishes/styles.module.scss
@@ -2,59 +2,39 @@
 @import "../../../theme/mixins";
 
 .dayWishes {
-    width: 470px;
+    @include inner-content-wrapper();
+
+    position: relative;
 }
 
-.dayWishesTitle {
-    padding: 4px;
+.daysLine,
+.commentLine {
+    span {
+        display: inline-block;
+    }
+}
+
+.dayLineTitle {
+    padding-right: 5px;
     font-weight: bold;
-    text-align: center;
 }
 
-.dayWishesList {
-    @include clear-ul-style;
+.dayLineEmpty {
+    color: $color-red;
+    font-style: italic;
 }
 
-.dayWishesItem {
-    display: inline-block;
-    margin: 2px;
+.commentLineTitle {
+    padding-right: 5px;
 }
 
-.dayWishesButton {
-    margin: 0;
-    padding: 5px 0 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;
-    }
+.commentLineText {
+    font-style: italic;
 }
 
-.dayWishCommentWrapper {
-    margin: 6px 0;
+.editButton {
+    @include vertical-center();
 
-    label {
-        display: block;
-        padding-left: 4px;
-    }
-    textarea {
-        width: 100%;
-        height: 50px;
-        padding: 5px;
-        border: 1px solid $color-grey-light;
-        background-color: $color-grey-lighter;
-        outline: 0;
-    }
-}
-
-.dayWishesButtonWrapper {
-    margin-bottom: 10px;
-    text-align: center;
+    position: absolute;
+    right: 20px;
 }
diff --git a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
new file mode 100644
index 0000000..3b9ece1
--- /dev/null
+++ b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
@@ -0,0 +1,78 @@
+import { FC, memo, useCallback, useEffect, useRef, useState } from "react"
+import classnames from "classnames"
+import get from "lodash/get"
+import set from "lodash/set"
+import styles from "./styles.module.scss"
+import {
+    daysChoice,
+    daysChoiceSelectionDefaultState,
+    selectionChoices,
+    useUserDayWishes,
+} from "../days.utils"
+
+const DayWishesForm: FC = (): JSX.Element | null => {
+    const [selection, setSelection] = useState(daysChoiceSelectionDefaultState)
+    const commentRef = useRef<HTMLTextAreaElement | null>(null)
+    const [userWishes, saveWishes] = useUserDayWishes()
+
+    useEffect(() => {
+        if (!userWishes) return
+        const newSelection = get(userWishes, "dayWishes", []).reduce(
+            (acc: selectionChoices, day: string) => ({
+                ...acc,
+                [day]: true,
+            }),
+            daysChoice
+        )
+        setSelection(newSelection)
+        set(commentRef, "current.value", get(userWishes, "dayWishesComment", ""))
+    }, [setSelection, commentRef, userWishes])
+
+    const onChoiceClick = useCallback(
+        (id) => {
+            setSelection({
+                ...selection,
+                [id]: !selection[id],
+            })
+        },
+        [selection, setSelection]
+    )
+    const onChoiceSubmit = useCallback(() => {
+        const comment = get(commentRef, "current.value", "")
+        const days = daysChoice.map(({ id }) => id).filter((id) => selection[id])
+        saveWishes(days, comment)
+    }, [selection, commentRef, saveWishes])
+
+    return (
+        <div className={styles.dayWishesForm}>
+            <div className={styles.dayWishesTitle}>Mes jours de présence</div>
+            <ul className={styles.dayWishesList}>
+                {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>
+            <div className={styles.dayWishCommentWrapper}>
+                <label htmlFor="day-choice-comment">Un commentaire, une précision ?</label>
+                <textarea id="day-choice-comment" ref={commentRef} />
+            </div>
+            <div className={styles.dayWishesButtonWrapper}>
+                <button type="submit" onClick={onChoiceSubmit}>
+                    Enregistrer
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default memo(DayWishesForm)
diff --git a/src/components/VolunteerBoard/DayWishesForm/styles.module.scss b/src/components/VolunteerBoard/DayWishesForm/styles.module.scss
new file mode 100755
index 0000000..d727f44
--- /dev/null
+++ b/src/components/VolunteerBoard/DayWishesForm/styles.module.scss
@@ -0,0 +1,60 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.dayWishesForm {
+    width: 470px;
+}
+
+.dayWishesTitle {
+    padding: 4px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.dayWishesList {
+    @include clear-ul-style;
+}
+
+.dayWishesItem {
+    display: inline-block;
+    margin: 2px;
+}
+
+.dayWishesButton {
+    margin: 0;
+    padding: 5px 0 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;
+    }
+}
+
+.dayWishCommentWrapper {
+    margin: 6px 0;
+
+    label {
+        display: block;
+        padding: 6px 0 2px 4px;
+    }
+    textarea {
+        width: 100%;
+        height: 50px;
+        padding: 5px;
+        border: 1px solid $color-grey-light;
+        background-color: $color-grey-lighter;
+        outline: 0;
+    }
+}
+
+.dayWishesButtonWrapper {
+    margin-bottom: 10px;
+    text-align: center;
+}
diff --git a/src/components/VolunteerBoard/DayWishes/days.utils.ts b/src/components/VolunteerBoard/days.utils.ts
similarity index 74%
rename from src/components/VolunteerBoard/DayWishes/days.utils.ts
rename to src/components/VolunteerBoard/days.utils.ts
index 98981bf..89de681 100644
--- a/src/components/VolunteerBoard/DayWishes/days.utils.ts
+++ b/src/components/VolunteerBoard/days.utils.ts
@@ -1,9 +1,9 @@
 import { shallowEqual, useSelector } from "react-redux"
 import { useCallback } from "react"
-import { selectUserJwtToken } from "../../../store/auth"
-import { AppState } from "../../../store"
-import { fetchVolunteerDayWishesSet } from "../../../store/volunteerDayWishesSet"
-import useAction from "../../../utils/useAction"
+import { selectUserJwtToken } from "../../store/auth"
+import { AppState } from "../../store"
+import { fetchVolunteerDayWishesSet } from "../../store/volunteerDayWishesSet"
+import useAction from "../../utils/useAction"
 
 const daysUtils = ["Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi"]
 
@@ -43,3 +43,8 @@ export const useUserDayWishes = (): [any, any] => {
 
     return [userWishes, saveWishes]
 }
+
+export const getDayLabel = (id: string): string => {
+    const matchingDay = daysChoice.find((day) => day.id === id)
+    return matchingDay ? matchingDay.label : ""
+}
diff --git a/src/pages/Board/Board.tsx b/src/pages/Board/Board.tsx
new file mode 100644
index 0000000..842fcb6
--- /dev/null
+++ b/src/pages/Board/Board.tsx
@@ -0,0 +1,36 @@
+import { FC, memo } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useSelector } from "react-redux"
+
+import { AppThunk } from "../../store"
+import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
+import { selectUserJwtToken } from "../../store/auth"
+import DayWishesForm from "../../components/VolunteerBoard/DayWishesForm/DayWishesForm"
+import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
+import styles from "./styles.module.scss"
+import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
+
+export type Props = RouteComponentProps
+
+const BoardPage: FC<Props> = (): JSX.Element => {
+    const jwtToken = useSelector(selectUserJwtToken)
+
+    if (jwtToken === undefined) return <p>Loading...</p>
+    if (jwtToken) {
+        return (
+            <div className={styles.dayWishPage}>
+                <div className={styles.dayWisContent}>
+                    <DayWishes />
+                    <DayWishesForm />
+                    <DDayInformations />
+                </div>
+            </div>
+        )
+    }
+    return <div>Besoin d&apos;être identifié</div>
+}
+
+// Fetch server-side data here
+export const loadData = (): AppThunk[] => [fetchVolunteerDayWishesSetIfNeed()]
+
+export default memo(BoardPage)
diff --git a/src/pages/Board/index.tsx b/src/pages/Board/index.tsx
new file mode 100755
index 0000000..a5c460d
--- /dev/null
+++ b/src/pages/Board/index.tsx
@@ -0,0 +1,16 @@
+import loadable from "@loadable/component"
+
+import { Loading, ErrorBoundary } from "../../components"
+import { Props, loadData } from "./Board"
+
+const BoardPage = loadable(() => import("./Board"), {
+    fallback: <Loading />,
+})
+
+export default (props: Props): JSX.Element => (
+    <ErrorBoundary>
+        <BoardPage {...props} />
+    </ErrorBoundary>
+)
+
+export { loadData }
diff --git a/src/pages/Board/styles.module.scss b/src/pages/Board/styles.module.scss
new file mode 100755
index 0000000..f7b7660
--- /dev/null
+++ b/src/pages/Board/styles.module.scss
@@ -0,0 +1,9 @@
+@import "../../theme/mixins";
+
+.dayWishPage {
+    @include page-wrapper-center;
+}
+
+.dayWisContent {
+    @include page-content-wrapper(800px);
+}
diff --git a/src/pages/DayWishes/DayWishes.tsx b/src/pages/DayWishes/DayWishes.tsx
index 498143e..6fb7638 100644
--- a/src/pages/DayWishes/DayWishes.tsx
+++ b/src/pages/DayWishes/DayWishes.tsx
@@ -5,7 +5,7 @@ import { useSelector } from "react-redux"
 import { AppThunk } from "../../store"
 import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
 import { selectUserJwtToken } from "../../store/auth"
-import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
+import DayWishes from "../../components/VolunteerBoard/DayWishesForm/DayWishesForm"
 import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
 import styles from "./styles.module.scss"
 
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 807afbf..9ec7afb 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -4,6 +4,7 @@ import App from "../app"
 import AsyncHome, { loadData as loadHomeData } from "../pages/Home"
 import AsyncPreRegisterPage, { loadData as loadPreRegisterPage } from "../pages/PreRegister"
 import AsyncTeams, { loadData as loadTeamsData } from "../pages/Teams"
+import AsyncBoard, { loadData as loadBoardData } from "../pages/Board"
 import AsyncDayWishes, { loadData as loadDayWishesData } from "../pages/DayWishes"
 import AsyncTeamWishes, { loadData as loadTeamWishesData } from "../pages/TeamWishes"
 import AsyncWish, { loadData as loadWishData } from "../pages/Wish"
@@ -60,6 +61,11 @@ export default [
                 component: AsyncWish,
                 loadData: loadWishData,
             },
+            {
+                path: "/board",
+                component: AsyncBoard,
+                loadData: loadBoardData,
+            },
             {
                 component: NotFound,
             },
diff --git a/src/theme/mixins.scss b/src/theme/mixins.scss
index 64f12db..8426a63 100644
--- a/src/theme/mixins.scss
+++ b/src/theme/mixins.scss
@@ -29,8 +29,19 @@
     }
 }
 
+@mixin inner-content-wrapper() {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: $color-grey-lighter;
+}
+
 @mixin clear-ul-style {
     margin: 0;
     padding: 0;
     list-style: none;
 }
+
+@mixin vertical-center {
+    top: 50%;
+    transform: translateY(-50%);
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 8731e5f..1498743 100755
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -1,5 +1,6 @@
 $color-white: #fff;
 $color-black: #000;
+$color-red: #f00;
 $color-orange: #ea4d0a;
 $color-yellow: #fdd137;
 $color-grey-dark: #555;