add react modal and use it for days wishes

src/components/Modal/Modal.tsx

@@ -0,0 +1,38 @@
+import { FC, ReactNode, useCallback } from "react"
+import RModal from "react-modal"
+import { useSelector } from "react-redux"
+import { reactAppId } from "../../app"
+import styles from "./styles.module.scss"
+import { hideModal, selectActiveModalId } from "../../store/ui"
+import useAction from "../../utils/useAction"
+
+type Props = {
+    children: ReactNode
+    modalId: string
+}
+
+RModal.setAppElement(`#${reactAppId}`)
+
+const Modal: FC<Props> = ({ modalId, children }): JSX.Element => {
+    const activeModalId = useSelector(selectActiveModalId)
+    const execHideModal = useAction(hideModal)
+    const onClose = useCallback(() => execHideModal(), [execHideModal])
+
+    const modalIsActive = activeModalId === modalId
+
+    return (
+        <RModal
+            isOpen={modalIsActive}
+            className={styles.modalContent}
+            overlayClassName={styles.modalOverlay}
+            onRequestClose={onClose}
+        >
+            <button type="submit" className={styles.closeButton} onClick={onClose}>
+                &#10005;
+            </button>
+            {children}
+        </RModal>
+    )
+}
+
+export default Modal

src/components/Modal/styles.module.scss

@@ -0,0 +1,38 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.modalOverlay {
+    position: fixed;
+    z-index: 100;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modalContent {
+    @include horizontal-vertical-center();
+
+    position: absolute;
+    bottom: auto;
+    right: auto;
+    padding: 15px;
+    outline: 0;
+    background-color: $color-white;
+    border-radius: 15px;
+    border: $border-large;
+}
+
+.closeButton {
+    position: absolute;
+    padding: 0;
+    z-index: 10;
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    height: 20px;
+    border-radius: 0;
+    line-height: 20px;
+    color: $color-grey-dark;
+    text-align: center;
+    background: none;
+    cursor: pointer;
+}

src/components/VolunteerBoard/DayWishes/DayWishes.tsx

@@ -1,19 +1,23 @@
-import { FC, memo } from "react"
+import { FC, memo, useCallback } from "react"
 import get from "lodash/get"
 import styles from "./styles.module.scss"
 import { getDayLabel, useUserDayWishes } from "../days.utils"
+import useAction from "../../../utils/useAction"
+import { displayModal, MODAL_IDS } from "../../../store/ui"
 
 const DayWishes: FC = (): JSX.Element | null => {
     const [userWishes] = useUserDayWishes()
     const dayWishesString = get(userWishes, "dayWishes", []).map(getDayLabel).join(", ")
     const comment = get(userWishes, "dayWishesComment", "")
+    const execDisplayModal = useAction(displayModal)
+    const onEdit = useCallback(() => execDisplayModal(MODAL_IDS.DAYWISHES), [execDisplayModal])
 
     return (
         <div className={styles.dayWishes}>
             <div className={styles.daysLine}>
                 <span className={styles.dayLineTitle}>Mes jours de présence :</span>
                 {dayWishesString && <span>{dayWishesString}</span>}
-                {!dayWishesString && <span>Non renseignés</span>}
+                {!dayWishesString && <span className={styles.dayLineEmpty}>Non renseignés</span>}
             </div>
             {comment && (
                 <div className={styles.commentLine}>
@@ -24,7 +28,9 @@ const DayWishes: FC = (): JSX.Element | null => {
                 </div>
             )}
             <div className={styles.editButton}>
-                <button type="button">Modifier</button>
+                <button type="button" onClick={onEdit}>
+                    Modifier
+                </button>
             </div>
         </div>
     )

src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx

@@ -10,7 +10,11 @@ import {
     useUserDayWishes,
 } from "../days.utils"
 
-const DayWishesForm: FC = (): JSX.Element | null => {
+type Props = {
+    afterSubmit?: () => void | undefined
+}
+
+const DayWishesForm: FC<Props> = ({ afterSubmit }): JSX.Element => {
     const [selection, setSelection] = useState(daysChoiceSelectionDefaultState)
     const commentRef = useRef<HTMLTextAreaElement | null>(null)
     const [userWishes, saveWishes] = useUserDayWishes()
@@ -41,7 +45,8 @@ const DayWishesForm: FC = (): JSX.Element | null => {
         const comment = get(commentRef, "current.value", "")
         const days = daysChoice.map(({ id }) => id).filter((id) => selection[id])
         saveWishes(days, comment)
-    }, [selection, commentRef, saveWishes])
+        if (afterSubmit) afterSubmit()
+    }, [selection, commentRef, saveWishes, afterSubmit])
 
     return (
         <div className={styles.dayWishesForm}>
@@ -75,4 +80,8 @@ const DayWishesForm: FC = (): JSX.Element | null => {
     )
 }
 
+DayWishesForm.defaultProps = {
+    afterSubmit: undefined,
+}
+
 export default memo(DayWishesForm)

src/components/VolunteerBoard/DayWishesForm/DayWishesFormModal.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 DayWishesForm from "./DayWishesForm"
+
+const DayWishesFormModal: FC = (): JSX.Element => {
+    const execHideModal = useAction(hideModal)
+    const afterFormSubmit = useCallback(() => execHideModal(), [execHideModal])
+
+    return (
+        <Modal modalId={MODAL_IDS.DAYWISHES}>
+            <DayWishesForm afterSubmit={afterFormSubmit} />
+        </Modal>
+    )
+}
+
+export default memo(DayWishesFormModal)

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

@@ -6,7 +6,7 @@
 }
 
 .dayWishesTitle {
-    padding: 4px;
+    padding: 15px 0;
     font-weight: bold;
     text-align: center;
 }