add component to display user participation details

src/components/VolunteerBoard/Board.tsx

@@ -1,14 +1,16 @@
 import { FC, memo } from "react"
 import DayWishes from "./DayWishes/DayWishes"
 import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
-import ParticipationDetailsForm from "./ParticipationDetailsForm/ParticipationDetailsForm"
+import ParticipationDetails from "./ParticipationDetails/ParticipationDetails"
+import ParticipationDetailsFormModal from "./ParticipationDetailsForm/ParticipationDetailsFormModal"
 import withUserConnected from "../../utils/withUserConnected"
 
 const Board: FC = (): JSX.Element => (
     <div>
         <DayWishes />
         <DayWishesFormModal />
-        <ParticipationDetailsForm />
+        <ParticipationDetails />
+        <ParticipationDetailsFormModal />
     </div>
 )
 

src/components/VolunteerBoard/ParticipationDetails/ParticipationDetails.tsx

@@ -0,0 +1,47 @@
+import { FC, memo, useCallback } from "react"
+import get from "lodash/get"
+import styles from "./styles.module.scss"
+import { useUserParticipationDetails } from "../participationDetails.utils"
+import { displayModal, MODAL_IDS } from "../../../store/ui"
+import useAction from "../../../utils/useAction"
+
+type Props = {
+    afterSubmit?: () => void | undefined
+}
+
+const ParticipationDetailsForm: FC<Props> = (): JSX.Element | null => {
+    const [participationDetails] = useUserParticipationDetails()
+    const age = get(participationDetails, "age", "")
+    const tShirtSize = get(participationDetails, "teeshirtSize", "")
+    const food = get(participationDetails, "food", "")
+    const execDisplayModal = useAction(displayModal)
+    const onEdit = useCallback(
+        () => execDisplayModal(MODAL_IDS.PARTICIPATIONDETAILS),
+        [execDisplayModal]
+    )
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.title}>Mes informations pour le festival</div>
+            {!tShirtSize && <div className={styles.line}>J&apos;ai déjà 2 t-shirts.</div>}
+            {tShirtSize && (
+                <div className={styles.line}>
+                    J&apos;ai besoin d&apos;un t-shirt ! (Taille <b>{tShirtSize}</b>)
+                </div>
+            )}
+            <div className={styles.line}>
+                Age : <b>{age} ans</b>.
+            </div>
+            <div className={styles.line}>
+                Préférence alimentaire : <b>{food}</b>
+            </div>
+            <div className={styles.editButton}>
+                <button type="button" onClick={onEdit}>
+                    Modifier
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default memo(ParticipationDetailsForm)

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

@@ -0,0 +1,24 @@
+@import "../../../theme/variables";
+@import "../../../theme/mixins";
+
+.root {
+    @include inner-content-wrapper();
+
+    position: relative;
+}
+
+.title {
+    padding-bottom: 5px;
+    font-weight: bold;
+}
+
+.line {
+    margin: 2px 0;
+}
+
+.editButton {
+    @include vertical-center();
+
+    position: absolute;
+    right: 20px;
+}

src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx

@@ -8,7 +8,11 @@ import {
     useUserParticipationDetails,
 } from "../participationDetails.utils"
 
-const ParticipationDetailsForm: FC = (): JSX.Element | null => {
+type Props = {
+    afterSubmit?: () => void | undefined
+}
+
+const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
     const sizeRef = useRef<HTMLSelectElement | null>(null)
     const dietRef = useRef<HTMLInputElement | null>(null)
     const ageRef = useRef<HTMLInputElement | null>(null)
@@ -19,9 +23,10 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
     const onSubmit = useCallback(() => {
         const age = get(ageRef, "current.value", "")
         const teeshirtSize = has2Shirts ? "" : get(sizeRef, "current.value", "")
-        const food = get(dietRef, "current.value", foodDefaultValue)
+        const food = get(dietRef, "current.value", "") || foodDefaultValue
         saveParticipationDetails({ age, teeshirtSize, food })
-    }, [has2Shirts, saveParticipationDetails])
+        if (afterSubmit) afterSubmit()
+    }, [has2Shirts, saveParticipationDetails, afterSubmit])
 
     const onHas2ShirtsClick = useCallback(
         (value) => {
@@ -43,7 +48,7 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
 
     return (
         <div className={styles.root}>
-            <div className={styles.title}>Informations pour le festival</div>
+            <div className={styles.title}>Mes informations pour le festival</div>
             <div className={styles.tShirtWrapper}>
                 <div className={styles.tShirtLabel}>J&apos;ai déjà 2 t-shirts</div>
                 <label>
@@ -99,4 +104,8 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
     )
 }
 
+ParticipationDetailsForm.defaultProps = {
+    afterSubmit: undefined,
+}
+
 export default memo(ParticipationDetailsForm)

src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsFormModal.tsx

@@ -0,0 +1,18 @@
+import { FC, memo, useCallback } from "react"
+import { hideModal, MODAL_IDS } from "../../../store/ui"
+import Modal from "../../Modal/Modal"
+import useAction from "../../../utils/useAction"
+import ParticipationDetailsForm from "./ParticipationDetailsForm"
+
+const ParticipationDetailsFormModal: FC = (): JSX.Element => {
+    const execHideModal = useAction(hideModal)
+    const afterFormSubmit = useCallback(() => execHideModal(), [execHideModal])
+
+    return (
+        <Modal modalId={MODAL_IDS.PARTICIPATIONDETAILS}>
+            <ParticipationDetailsForm afterSubmit={afterFormSubmit} />
+        </Modal>
+    )
+}
+
+export default memo(ParticipationDetailsFormModal)

src/store/ui.ts

@@ -28,4 +28,5 @@ export const selectActiveModalId = createSelector(selectUiData, (ui) => ui.modal
 
 export const MODAL_IDS = {
     DAYWISHES: "DAYWISHES",
+    PARTICIPATIONDETAILS: "PARTICIPATIONDETAILS",
 }

src/theme/mixins.scss

@@ -30,6 +30,7 @@
 }
 
 @mixin inner-content-wrapper() {
+    margin: 10px 0;
     padding: 10px;
     border-radius: 5px;
     background-color: $color-grey-lighter;