diff --git a/src/components/VolunteerBoard/Board.tsx b/src/components/VolunteerBoard/Board.tsx
index 9f5251b..f92787b 100644
--- a/src/components/VolunteerBoard/Board.tsx
+++ b/src/components/VolunteerBoard/Board.tsx
@@ -1,14 +1,14 @@
import { FC, memo } from "react"
import DayWishes from "./DayWishes/DayWishes"
import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
-import DDayInformations from "./DDayInformations/DDaysInformations"
+import ParticipationDetailsForm from "./ParticipationDetailsForm/ParticipationDetailsForm"
import withUserConnected from "../../utils/withUserConnected"
const Board: FC = (): JSX.Element => (
)
diff --git a/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx b/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx
deleted file mode 100644
index 45ab31a..0000000
--- a/src/components/VolunteerBoard/DDayInformations/DDaysInformations.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { FC, memo, useCallback, useRef, useState } from "react"
-import styles from "./styles.module.scss"
-
-const sizes = ["XS", "S", "M", "L", "XL", "XXL"]
-
-const DDayInformations: FC = (): JSX.Element | null => {
- const sizeRef = useRef(null)
- const dietRef = useRef(null)
- const ageRef = useRef(null)
- const commentRef = useRef(null)
- const [has2Shirts, setHas2Shirts] = useState(null)
-
- const onSubmit = useCallback(() => {
- console.log("on submit")
- }, [])
-
- const onHas2ShirtsClick = useCallback(
- (value) => {
- setHas2Shirts(value)
- },
- [setHas2Shirts]
- )
-
- return (
-
-
Informations pour le festival
-
-
J'ai déjà 2 t-shirts
-
-
- {has2Shirts === false && (
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default memo(DDayInformations)
diff --git a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
index 700963c..beac804 100644
--- a/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
+++ b/src/components/VolunteerBoard/DayWishes/DayWishes.tsx
@@ -1,7 +1,7 @@
import { FC, memo, useCallback } from "react"
import get from "lodash/get"
import styles from "./styles.module.scss"
-import { getDayLabel, useUserDayWishes } from "../days.utils"
+import { getDayLabel, useUserDayWishes } from "../daysWishes.utils"
import useAction from "../../../utils/useAction"
import { displayModal, MODAL_IDS } from "../../../store/ui"
diff --git a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
index 56eeda8..3ecc404 100644
--- a/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
+++ b/src/components/VolunteerBoard/DayWishesForm/DayWishesForm.tsx
@@ -8,7 +8,7 @@ import {
daysChoiceSelectionDefaultState,
selectionChoices,
useUserDayWishes,
-} from "../days.utils"
+} from "../daysWishes.utils"
type Props = {
afterSubmit?: () => void | undefined
diff --git a/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx b/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
new file mode 100644
index 0000000..49db16d
--- /dev/null
+++ b/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
@@ -0,0 +1,99 @@
+import { FC, memo, useCallback, useEffect, useRef, useState } from "react"
+import get from "lodash/get"
+import set from "lodash/set"
+import styles from "./styles.module.scss"
+import { tShirtSizes, useUserParticipationDetails } from "../participationDetails.utils"
+
+const ParticipationDetailsForm: FC = (): JSX.Element | null => {
+ const sizeRef = useRef(null)
+ const dietRef = useRef(null)
+ const ageRef = useRef(null)
+ const [has2Shirts, setHas2Shirts] = useState(true)
+
+ const [participationDetails, saveParticipationDetails] = useUserParticipationDetails()
+
+ const onSubmit = useCallback(() => {
+ const age = get(ageRef, "current.value", "")
+ const teeshirtSize = has2Shirts ? "" : get(sizeRef, "current.value", "")
+ const food = get(dietRef, "current.value", "")
+ saveParticipationDetails({ age, teeshirtSize, food })
+ }, [has2Shirts, saveParticipationDetails])
+
+ const onHas2ShirtsClick = useCallback(
+ (value) => {
+ setHas2Shirts(value)
+ },
+ [setHas2Shirts]
+ )
+
+ useEffect(() => {
+ console.log("participationDetails", participationDetails)
+ const age = get(participationDetails, "age", "")
+ const teeshirtSize = get(participationDetails, "teeshirtSize", "")
+ const food = get(participationDetails, "food", "")
+
+ if (age) set(ageRef, "current.value", age)
+ if (teeshirtSize) set(sizeRef, "current.value", teeshirtSize)
+ setHas2Shirts(!teeshirtSize)
+ if (food) set(dietRef, "current.value", food)
+ }, [setHas2Shirts, participationDetails])
+
+ return (
+
+
Informations pour le festival
+
+
J'ai déjà 2 t-shirts
+
+
+ {has2Shirts === false && (
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default memo(ParticipationDetailsForm)
diff --git a/src/components/VolunteerBoard/DDayInformations/styles.module.scss b/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
similarity index 52%
rename from src/components/VolunteerBoard/DDayInformations/styles.module.scss
rename to src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
index 44aa789..3e2afab 100755
--- a/src/components/VolunteerBoard/DDayInformations/styles.module.scss
+++ b/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
@@ -1,78 +1,62 @@
@import "../../../theme/variables";
@import "../../../theme/mixins";
-.ddayInfo {
+.root {
width: 470px;
}
-.ddayTitle {
+.title {
padding: 4px;
font-weight: bold;
text-align: center;
}
-.ddayInfoInputWrapper {
+.inputWrapper {
margin: 10px 0;
label {
display: inline-block;
- width: 150px;
+ width: 170px;
}
input {
- width: 320px;
+ width: 300px;
border: 1px solid $color-grey-medium;
outline: 0;
}
}
-.ddayInfoShirtWrapper {
+.tShirtWrapper {
margin: 10px 0;
- height: 22px;
+ height: 28px;
label {
display: inline-block;
- width: 60px;
+ width: 55px;
}
}
-.ddayShirtLabel {
+.tShirtLabel {
display: inline-block;
- margin-top: 2px;
- width: 150px;
+ margin-top: 6px;
+ width: 170px;
}
-.ddayShirtSizes {
+.tShirtSizes {
display: inline-block;
- width: 200px;
+ width: 190px;
text-align: right;
select {
margin-left: 10px;
- width: 60px;
+ width: 120px;
border: 1px solid $color-grey-medium;
+ border-radius: 4px;
background-color: $color-white;
outline: 0;
}
}
-.ddayInfoCommentWrapper {
- margin: 6px 0;
-
- 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;
- }
-}
-
-.ddayButtonWrapper {
+.buttonWrapper {
margin-bottom: 10px;
text-align: center;
}
diff --git a/src/components/VolunteerBoard/days.utils.ts b/src/components/VolunteerBoard/daysWishes.utils.ts
similarity index 90%
rename from src/components/VolunteerBoard/days.utils.ts
rename to src/components/VolunteerBoard/daysWishes.utils.ts
index 89de681..598e5d5 100644
--- a/src/components/VolunteerBoard/days.utils.ts
+++ b/src/components/VolunteerBoard/daysWishes.utils.ts
@@ -5,9 +5,9 @@ import { AppState } from "../../store"
import { fetchVolunteerDayWishesSet } from "../../store/volunteerDayWishesSet"
import useAction from "../../utils/useAction"
-const daysUtils = ["Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi"]
+const daysWishesUtils = ["Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi"]
-export const daysChoice = daysUtils.map((label) => ({
+export const daysChoice = daysWishesUtils.map((label) => ({
id: label[0],
label,
}))
diff --git a/src/components/VolunteerBoard/participationDetails.utils.ts b/src/components/VolunteerBoard/participationDetails.utils.ts
new file mode 100644
index 0000000..c6fe148
--- /dev/null
+++ b/src/components/VolunteerBoard/participationDetails.utils.ts
@@ -0,0 +1,43 @@
+import { useCallback } from "react"
+import { shallowEqual, useSelector } from "react-redux"
+import useAction from "../../utils/useAction"
+import { selectUserJwtToken } from "../../store/auth"
+import { AppState } from "../../store"
+import { fetchVolunteerParticipationDetailsSet } from "../../store/volunteerParticipationDetailsSet"
+
+export const tShirtSizes = [
+ "XS",
+ "S",
+ "M",
+ "L",
+ "XL",
+ "XXL",
+ "Femme S",
+ "Femme M",
+ "Femme L",
+ "Femme XL",
+]
+
+export const useUserParticipationDetails = (): [any, any] => {
+ const save = useAction(fetchVolunteerParticipationDetailsSet)
+ const jwtToken = useSelector(selectUserJwtToken)
+ const userParticipationDetails = useSelector(
+ (state: AppState) => state.volunteerParticipationDetailsSet?.entity,
+ shallowEqual
+ )
+
+ const saveParticipationDetails = useCallback(
+ ({ age, teeshirtSize, food }) => {
+ if (!userParticipationDetails) return
+ save(jwtToken, 0, {
+ id: userParticipationDetails.id,
+ age,
+ teeshirtSize,
+ food,
+ })
+ },
+ [userParticipationDetails, save, jwtToken]
+ )
+
+ return [userParticipationDetails, saveParticipationDetails]
+}
diff --git a/src/pages/Board/Board.tsx b/src/pages/Board/Board.tsx
index 710af0b..aa4960d 100644
--- a/src/pages/Board/Board.tsx
+++ b/src/pages/Board/Board.tsx
@@ -7,6 +7,7 @@ import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishes
import { selectUserJwtToken } from "../../store/auth"
import Page from "../../components/Page/Page"
import Board from "../../components/VolunteerBoard/Board"
+import { fetchVolunteerParticipationDetailsSetIfNeed } from "../../store/volunteerParticipationDetailsSet"
export type Props = RouteComponentProps
@@ -25,6 +26,9 @@ const BoardPage: FC = (): JSX.Element => {
}
// Fetch server-side data here
-export const loadData = (): AppThunk[] => [fetchVolunteerDayWishesSetIfNeed()]
+export const loadData = (): AppThunk[] => [
+ fetchVolunteerDayWishesSetIfNeed(),
+ fetchVolunteerParticipationDetailsSetIfNeed(),
+]
export default memo(BoardPage)
diff --git a/src/pages/DayWishes/DayWishes.tsx b/src/pages/DayWishes/DayWishes.tsx
index dd737bf..645760b 100644
--- a/src/pages/DayWishes/DayWishes.tsx
+++ b/src/pages/DayWishes/DayWishes.tsx
@@ -6,7 +6,7 @@ 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 DDayInformations from "../../components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm"
import styles from "./styles.module.scss"
export type Props = RouteComponentProps
diff --git a/src/theme/form.scss b/src/theme/form.scss
index db6c6bd..01d3279 100644
--- a/src/theme/form.scss
+++ b/src/theme/form.scss
@@ -13,8 +13,9 @@ button {
input[type="text"],
input[type="password"],
input[type="number"],
-input[type="email"] {
+input[type="email"],
+select {
padding: 4px 6px;
- border: 1px solid #333;
+ border: 1px solid $color-grey-medium;
border-radius: 4px;
}