Mes informations pour le festival
- {!tShirtSize &&
J'ai déjà 2 t-shirts.
}
- {tShirtSize && (
+ {tshirtCount === 0 && (
- J'ai besoin d'un t-shirt ! (Taille {tShirtSize})
+ Je n'ai aucun t-shirt. (Taille {tshirtSize})
+
+ )}
+ {tshirtCount === 1 && (
+
+ J'ai déjà 1 t-shirt. (Taille {tshirtSize})
+
+ )}
+ {tshirtCount === 2 && (
+
+ J'ai déjà 2 t-shirts.
+
+ )}
+ {adult === 0 && (
+
+ Je suis mineur
+
+ )}
+ {adult === 1 && (
+
+ Je suis majeur
)}
-
- Age : {age || "?"} ans.
-
Préférence alimentaire : {food || foodDefaultValue}
diff --git a/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx b/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
index a8fdfd0..3d4539e 100644
--- a/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
+++ b/src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
@@ -4,7 +4,7 @@ import set from "lodash/set"
import styles from "./styles.module.scss"
import {
foodDefaultValue,
- tShirtSizes,
+ tshirtSizes,
useUserParticipationDetails,
} from "../participationDetails.utils"
import FormButton from "../../Form/FormButton/FormButton"
@@ -16,85 +16,138 @@ type Props = {
const ParticipationDetailsForm: FC
= ({ afterSubmit }): JSX.Element | null => {
const sizeRef = useRef(null)
const dietRef = useRef(null)
- const ageRef = useRef(null)
- const [has2Shirts, setHas2Shirts] = useState(true)
+ const [tshirtCountState, setTshirtCount] = useState(0)
+ const [adultState, setAdult] = useState(0)
const [participationDetails, saveParticipationDetails] = useUserParticipationDetails()
const onSubmit = useCallback(() => {
- const age = get(ageRef, "current.value", "")
- const teeshirtSize = has2Shirts ? "" : get(sizeRef, "current.value", "")
+ const tshirtSize = get(sizeRef, "current.value", "")
const food = get(dietRef, "current.value", "") || foodDefaultValue
- saveParticipationDetails({ age, teeshirtSize, food })
+ saveParticipationDetails({
+ tshirtSize,
+ tshirtCount: tshirtCountState,
+ adult: adultState,
+ food,
+ })
if (afterSubmit) afterSubmit()
- }, [has2Shirts, saveParticipationDetails, afterSubmit])
+ }, [tshirtCountState, adultState, saveParticipationDetails, afterSubmit])
- const onHas2ShirtsClick = useCallback(
+ const onTshirtCountChange = useCallback(
(value) => {
- setHas2Shirts(value)
+ setTshirtCount(value)
},
- [setHas2Shirts]
+ [setTshirtCount]
+ )
+
+ const onAdultChange = useCallback(
+ (value) => {
+ setAdult(value)
+ },
+ [setAdult]
)
useEffect(() => {
- const age = get(participationDetails, "age", "")
- const teeshirtSize = get(participationDetails, "teeshirtSize", "")
+ const tshirtSize = get(participationDetails, "tshirtSize", "")
+ const tshirtCount = get(participationDetails, "tshirtCount", "")
+ const adult = get(participationDetails, "adult", "")
const food = get(participationDetails, "food", "")
- if (age) set(ageRef, "current.value", age)
- if (teeshirtSize) set(sizeRef, "current.value", teeshirtSize)
- setHas2Shirts(!teeshirtSize)
+ if (tshirtSize) set(sizeRef, "current.value", tshirtSize)
+ if (tshirtCount) setTshirtCount(tshirtCount)
+ if (adult) setAdult(adult)
if (food) set(dietRef, "current.value", food)
- }, [setHas2Shirts, participationDetails])
+ }, [setTshirtCount, setAdult, participationDetails])
return (
-
+
Mes informations pour le festival
-
-
J'ai déjà 2 t-shirts
-
-
- {has2Shirts === false && (
-
-
-
-
- )}
+
-
-
+
+
+
+
+
+
+
+
+
Le 2 juillet 2022 tu auras :
+
+
+
+
+
-
-
+
+
+
+
+
+
Enregistrer
diff --git a/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss b/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
index 3e2afab..674aca1 100755
--- a/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
+++ b/src/components/VolunteerBoard/ParticipationDetailsForm/styles.module.scss
@@ -1,10 +1,6 @@
@import "../../../theme/variables";
@import "../../../theme/mixins";
-.root {
- width: 470px;
-}
-
.title {
padding: 4px;
font-weight: bold;
@@ -14,46 +10,61 @@
.inputWrapper {
margin: 10px 0;
+ @include desktop {
+ display: flex;
+ }
+
label {
- display: inline-block;
+ display: block;
width: 170px;
}
- input {
- width: 300px;
+ input[type="text"] {
+ min-width: 175px;
border: 1px solid $color-grey-medium;
outline: 0;
}
}
-.tShirtWrapper {
+.leftCol {
+ flex: 0 0 240px;
+}
+
+.tshirtWrapper {
margin: 10px 0;
height: 28px;
-
- label {
- display: inline-block;
- width: 55px;
- }
}
-.tShirtLabel {
+.tshirtCountTitle {
display: inline-block;
margin-top: 6px;
- width: 170px;
+ width: 240px;
}
-.tShirtSizes {
- display: inline-block;
- width: 190px;
- text-align: right;
+.tshirtCountLabel {
+ width: 55px;
+}
- select {
- margin-left: 10px;
- width: 120px;
- border: 1px solid $color-grey-medium;
- border-radius: 4px;
- background-color: $color-white;
- outline: 0;
- }
+.tshirtSizesTitle {
+ display: inline-block;
+ width: 240px;
+}
+
+.tshirtCountSelect {
+ width: 120px;
+ border: 1px solid $color-grey-medium;
+ border-radius: 4px;
+ background-color: $color-white;
+ outline: 0;
+}
+
+.adultTitle {
+ display: inline-block;
+ margin-top: 6px;
+ width: 240px;
+}
+
+.adultLabel {
+ width: 55px;
}
.buttonWrapper {
diff --git a/src/components/VolunteerBoard/TeamWishesForm/styles.module.scss b/src/components/VolunteerBoard/TeamWishesForm/styles.module.scss
index 19836a2..15d87ee 100755
--- a/src/components/VolunteerBoard/TeamWishesForm/styles.module.scss
+++ b/src/components/VolunteerBoard/TeamWishesForm/styles.module.scss
@@ -42,6 +42,7 @@
.teamList {
@include clear-ul-style;
+
display: flex;
flex-wrap: wrap;
flex-direction: row;
diff --git a/src/components/VolunteerBoard/participationDetails.utils.ts b/src/components/VolunteerBoard/participationDetails.utils.ts
index db3dc73..692029d 100644
--- a/src/components/VolunteerBoard/participationDetails.utils.ts
+++ b/src/components/VolunteerBoard/participationDetails.utils.ts
@@ -5,7 +5,7 @@ import { selectUserJwtToken } from "../../store/auth"
import { AppState } from "../../store"
import { fetchVolunteerParticipationDetailsSet } from "../../store/volunteerParticipationDetailsSet"
-export const tShirtSizes = [
+export const tshirtSizes = [
"XS",
"S",
"M",
@@ -29,12 +29,13 @@ export const useUserParticipationDetails = (): [any, any] => {
)
const saveParticipationDetails = useCallback(
- ({ age, teeshirtSize, food }) => {
+ ({ tshirtSize, tshirtCount, adult, food }) => {
if (!userParticipationDetails) return
save(jwtToken, 0, {
id: userParticipationDetails.id,
- age,
- teeshirtSize,
+ tshirtSize,
+ tshirtCount,
+ adult,
food,
})
},
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index e6b796f..15aaa80 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -6,26 +6,21 @@ import { Helmet } from "react-helmet"
import { AppThunk } from "../../store"
import { LoginForm, Notifications, fetchForBoardForms } from "../../components"
import styles from "./styles.module.scss"
-import { fetchVolunteerNotifsSetIfNeed, hasWaitingNotifs } from "../../store/volunteerNotifsSet"
+import { fetchVolunteerNotifsSetIfNeed } from "../../store/volunteerNotifsSet"
import { selectUserJwtToken } from "../../store/auth"
-import Board from "../../components/VolunteerBoard/Board"
import Page from "../../components/ui/Page/Page"
-import VolunteerConfirmation from "../../components/VolunteerConfirmation/VolunteerConfirmation"
export type Props = RouteComponentProps
const HomePage: FC
= (): JSX.Element => {
const jwtToken = useSelector(selectUserJwtToken)
- const waitingNotifs = useSelector(hasWaitingNotifs)
if (jwtToken === undefined) return Loading...
if (jwtToken) {
return (
- {!waitingNotifs && }
- {!waitingNotifs && }
)
}
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 9699fa0..5605167 100755
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -57,7 +57,7 @@ export default [
loadData: loadWishData,
},
{
- path: "/board",
+ path: "/profil",
component: AsyncBoard,
loadData: loadBoardData,
},
diff --git a/src/server/gsheets/volunteers.ts b/src/server/gsheets/volunteers.ts
index 2fcbe34..057296c 100644
--- a/src/server/gsheets/volunteers.ts
+++ b/src/server/gsheets/volunteers.ts
@@ -206,7 +206,9 @@ export const volunteerDayWishesSet = expressAccessor.set(async (list, body, id)
export const volunteerParticipationDetailsSet = expressAccessor.set(async (list, body, id) => {
const requestedId = +body[0] || id
if (requestedId !== id && requestedId !== 0) {
- throw Error(`On ne peut acceder qu'à ses propres infos d'age, taille et alimentation`)
+ throw Error(
+ `On ne peut acceder qu'à ses propres infos de t-shirt, de majorité et d'alimentation`
+ )
}
const wishes = body[1] as VolunteerParticipationDetails
const volunteer = list.find((v) => v.id === requestedId)
@@ -215,11 +217,14 @@ export const volunteerParticipationDetailsSet = expressAccessor.set(async (list,
}
const newVolunteer = _.cloneDeep(volunteer)
- if (wishes.age !== undefined) {
- newVolunteer.age = wishes.age
+ if (wishes.tshirtSize !== undefined) {
+ newVolunteer.tshirtSize = wishes.tshirtSize
}
- if (wishes.teeshirtSize !== undefined) {
- newVolunteer.teeshirtSize = wishes.teeshirtSize
+ if (wishes.tshirtCount !== undefined) {
+ newVolunteer.tshirtCount = wishes.tshirtCount
+ }
+ if (wishes.adult !== undefined) {
+ newVolunteer.adult = wishes.adult
}
if (wishes.food !== undefined) {
newVolunteer.food = wishes.food
@@ -229,8 +234,9 @@ export const volunteerParticipationDetailsSet = expressAccessor.set(async (list,
toDatabase: newVolunteer,
toCaller: {
id: newVolunteer.id,
- age: newVolunteer.age,
- teeshirtSize: newVolunteer.teeshirtSize,
+ tshirtSize: newVolunteer.tshirtSize,
+ tshirtCount: newVolunteer.tshirtCount,
+ adult: newVolunteer.adult,
food: newVolunteer.food,
} as VolunteerParticipationDetails,
}
diff --git a/src/services/volunteers.ts b/src/services/volunteers.ts
index 846ede9..77092d9 100644
--- a/src/services/volunteers.ts
+++ b/src/services/volunteers.ts
@@ -23,9 +23,9 @@ export class Volunteer {
dayWishesComment = ""
- age = 0
+ tshirtCount = ""
- teeshirtSize = ""
+ tshirtSize = ""
food = ""
@@ -59,8 +59,8 @@ export const translationVolunteer: { [k in keyof Volunteer]: string } = {
discordId: "discordId",
dayWishes: "enviesJours",
dayWishesComment: "commentaireEnviesJours",
- age: "age",
- teeshirtSize: "teeshirt",
+ tshirtCount: "nbDeTshirts",
+ tshirtSize: "tailleDeTshirts",
food: "alimentation",
teamWishes: "enviesEquipe",
teamWishesComment: "commentaireEnviesEquipe",
@@ -87,8 +87,8 @@ export const volunteerExample: Volunteer = {
discordId: "",
dayWishes: [],
dayWishesComment: "",
- age: 33,
- teeshirtSize: "FM",
+ tshirtCount: "1",
+ tshirtSize: "Femme M",
food: "Végétarien",
teamWishes: [],
teamWishesComment: "",
@@ -140,7 +140,8 @@ export interface VolunteerDayWishes {
export interface VolunteerParticipationDetails {
id: Volunteer["id"]
- age: Volunteer["age"]
- teeshirtSize: Volunteer["teeshirtSize"]
+ tshirtSize: Volunteer["tshirtSize"]
+ tshirtCount: Volunteer["tshirtCount"]
+ adult: Volunteer["adult"]
food: Volunteer["food"]
}