add react modal and use it for days wishes

src/app/index.tsx

@@ -14,6 +14,8 @@ interface Route {
     route: { routes: RouteConfig[] }
 }
 
+export const reactAppId = "react-view"
+
 const App = ({ route }: Route): JSX.Element => (
     <div>
         <Helmet {...config.APP}>

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;
 }

src/pages/Board/Board.tsx

@@ -5,10 +5,10 @@ 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"
+import DayWishesFormModal from "../../components/VolunteerBoard/DayWishesForm/DayWishesFormModal"
 
 export type Props = RouteComponentProps
 
@@ -18,10 +18,10 @@ const BoardPage: FC<Props> = (): JSX.Element => {
     if (jwtToken === undefined) return <p>Loading...</p>
     if (jwtToken) {
         return (
-            <div className={styles.dayWishPage}>
-                <div className={styles.dayWisContent}>
+            <div className={styles.boardPage}>
+                <div className={styles.boardContent}>
                     <DayWishes />
-                    <DayWishesForm />
+                    <DayWishesFormModal />
                     <DDayInformations />
                 </div>
             </div>

src/pages/Board/styles.module.scss

@@ -1,9 +1,9 @@
 @import "../../theme/mixins";
 
-.dayWishPage {
+.boardPage {
     @include page-wrapper-center;
 }
 
-.dayWisContent {
+.boardContent {
     @include page-content-wrapper(800px);
 }

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/DayWishesForm/DayWishesForm"
+import DayWishesForm from "../../components/VolunteerBoard/DayWishesForm/DayWishesForm"
 import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
 import styles from "./styles.module.scss"
 
@@ -18,8 +18,8 @@ const HomePage: FC<Props> = (): JSX.Element => {
     if (jwtToken) {
         return (
             <div className={styles.dayWishPage}>
-                <div className={styles.dayWisContent}>
-                    <DayWishes />
+                <div className={styles.dayWishContent}>
+                    <DayWishesForm />
                     <DDayInformations />
                 </div>
             </div>

src/pages/DayWishes/styles.module.scss

@@ -4,6 +4,6 @@
     @include page-wrapper-center;
 }
 
-.dayWisContent {
+.dayWishContent {
     @include page-content-wrapper(800px);
 }

src/store/rootReducer.ts

@@ -6,6 +6,7 @@ import javGameList from "./javGameList"
 import preVolunteerAdd from "./preVolunteerAdd"
 import preVolunteerCount from "./preVolunteerCount"
 import teamList from "./teamList"
+import ui from "./ui"
 import volunteer from "./volunteer"
 import volunteerAdd from "./volunteerAdd"
 import volunteerList from "./volunteerList"
@@ -27,6 +28,7 @@ export default (history: History) => ({
     preVolunteerAdd,
     preVolunteerCount,
     teamList,
+    ui,
     volunteer,
     volunteerAdd,
     volunteerList,

src/store/ui.ts

@@ -0,0 +1,31 @@
+import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { AppState } from "./index"
+
+const initialState = {
+    modalId: "",
+}
+
+const uiSlice = createSlice({
+    name: "ui",
+    initialState,
+    reducers: {
+        displayModal: (state, action: PayloadAction<string>) => {
+            state.modalId = action.payload
+        },
+        hideModal: (state) => {
+            state.modalId = ""
+        },
+    },
+})
+
+export default uiSlice.reducer
+
+export const { displayModal, hideModal } = uiSlice.actions
+
+const selectUiData = (state: AppState) => state.ui
+
+export const selectActiveModalId = createSelector(selectUiData, (ui) => ui.modalId)
+
+export const MODAL_IDS = {
+    DAYWISHES: "DAYWISHES",
+}

src/theme/mixins.scss

@@ -45,3 +45,9 @@
     top: 50%;
     transform: translateY(-50%);
 }
+
+@mixin horizontal-vertical-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}