diff --git a/src/app/img/bene2019.jpg b/src/app/img/bene2019.jpg new file mode 100644 index 0000000..a7df818 Binary files /dev/null and b/src/app/img/bene2019.jpg differ diff --git a/src/app/img/pel2016.jpg b/src/app/img/pel2016.jpg new file mode 100644 index 0000000..d6d0ef5 Binary files /dev/null and b/src/app/img/pel2016.jpg differ diff --git a/src/app/img/pel2017.jpg b/src/app/img/pel2017.jpg new file mode 100644 index 0000000..452d34b Binary files /dev/null and b/src/app/img/pel2017.jpg differ diff --git a/src/app/img/plan2019.jpg b/src/app/img/plan2019.jpg new file mode 100644 index 0000000..eeef5d6 Binary files /dev/null and b/src/app/img/plan2019.jpg differ diff --git a/src/components/Form/FormButton/FormButton.tsx b/src/components/Form/FormButton/FormButton.tsx index 07e6eeb..b0c76ec 100644 --- a/src/components/Form/FormButton/FormButton.tsx +++ b/src/components/Form/FormButton/FormButton.tsx @@ -1,24 +1,31 @@ import { FC, ReactNode } from "react" +import { toastError } from "../../../store/utils" import styles from "./styles.module.scss" type Props = { type?: "grey" + disabled?: boolean children: ReactNode onClick?: () => void } -const FormButton: FC = ({ type, children, onClick }): JSX.Element => ( - -) +const FormButton: FC = ({ type, disabled, children, onClick }): JSX.Element => { + const onDisabledClick = () => toastError("Bouton désactivé") + + return ( + + ) +} FormButton.defaultProps = { type: undefined, + disabled: false, onClick: undefined, } diff --git a/src/components/RegisterForm/index.tsx b/src/components/RegisterForm/index.tsx index 6bf819f..7a0a9a8 100644 --- a/src/components/RegisterForm/index.tsx +++ b/src/components/RegisterForm/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, useState } from "react" +import React, { memo, useEffect, useState } from "react" import { useSelector, shallowEqual } from "react-redux" import { toast } from "react-toastify" import _ from "lodash" @@ -7,11 +7,13 @@ import styles from "./styles.module.scss" import { fetchPostulantAdd } from "../../store/postulantAdd" import { AppDispatch, AppState } from "../../store" import { fetchVolunteerPartialAdd } from "../../store/volunteerPartialAdd" +import FormButton from "../Form/FormButton/FormButton" interface Props { dispatch: AppDispatch } +let backgroundId = 1 const RegisterForm = ({ dispatch }: Props): JSX.Element => { const [potentialVolunteer, setPotentialVolunteer] = useState(true) const [firstname, setFirstname] = useState("") @@ -20,66 +22,102 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => { const [mobile, setMobile] = useState("") const [alreadyVolunteer, setAlreadyVolunteer] = useState(false) const [comment, setComment] = useState("") + const [alreadyCame, setAlreadyCame] = useState(true) + const [firstMeeting, setFirstMeeting] = useState("") + const [commentFirstMeeting, setCommentFirstMeeting] = useState("") + const [canHelpBefore, setCanHelpBefore] = useState("") + const [howToContact, setHowToContact] = useState("Email") const [sending, setSending] = useState(false) + const [changingBackground, setChangingBackground] = useState(styles.pelImg1) - const onNewVolunteer = (e: React.ChangeEvent) => - setPotentialVolunteer(!e.target.value) - const onPotentialVolunteer = (e: React.ChangeEvent) => - setPotentialVolunteer(!!e.target.value) + useEffect(() => { + setInterval(() => { + backgroundId = backgroundId === 1 ? 2 : 1 + setChangingBackground(backgroundId === 1 ? styles.pelImg1 : styles.pelImg2) + }, 20000) + }, [setChangingBackground]) - const onFirstnameChanged = (e: React.ChangeEvent) => - setFirstname(e.target.value) - const onLastnameChanged = (e: React.ChangeEvent) => - setLastname(e.target.value) + const sendTextDispatch = + (dispatchSetter: React.Dispatch>) => + (e: React.ChangeEvent) => + dispatchSetter(e.target.value) - const onEmailChanged = (e: React.ChangeEvent) => setEmail(e.target.value) - const onMobileChanged = (e: React.ChangeEvent) => setMobile(e.target.value) + const sendTextareaDispatch = + (dispatchSetter: React.Dispatch>) => + (e: React.ChangeEvent) => + dispatchSetter(e.target.value) - const onAlreadyVolunteer = (e: React.ChangeEvent) => - setAlreadyVolunteer(!!e.target.value) - const onNotYesVolunteer = (e: React.ChangeEvent) => - setAlreadyVolunteer(!e.target.value) + const sendBooleanRadioboxDispatch = + (dispatchSetter: React.Dispatch>, isYes: boolean) => + (e: React.ChangeEvent) => + dispatchSetter(isYes ? !!e.target.value : !e.target.value) - const onCommentChanged = (e: React.ChangeEvent) => - setComment(e.target.value) + const sendRadioboxDispatch = + (dispatchSetter: React.Dispatch>) => + (e: React.ChangeEvent) => + dispatchSetter(e.target.value) const onSubmit = () => { if (firstname && lastname && email && mobile && !sending) { if (potentialVolunteer) { + /* +potentialVolunteer, +firstname, +lastname, +email, +mobile, +comment, +alreadyCame, +firstMeeting, +commentFirstMeeting, +canHelpBefore, +howToContact, + + */ dispatch( fetchPostulantAdd({ + potential: true, firstname, lastname, email, mobile, - potential: true, + howToContact, + alreadyCame, + firstMeeting, + commentFirstMeeting: firstMeeting ? "" : commentFirstMeeting, comment, }) ) } else { - dispatch( - fetchPostulantAdd({ - firstname, - lastname, - email, - mobile, - potential: false, - comment, - }) - ) dispatch( fetchVolunteerPartialAdd({ firstname, lastname, email, mobile, + howToContact, + canHelpBefore, + }) + ) + dispatch( + fetchPostulantAdd({ + potential: false, + firstname, + lastname, + email, + mobile, + howToContact, + alreadyCame, + firstMeeting, + commentFirstMeeting: firstMeeting ? "" : commentFirstMeeting, + comment, }) ) } setSending(true) } else { - toast.warning("Il faut remplir tous les champs (sauf le dernier)", { + toast.warning("Il faut remplir les queques infos sur toi ><", { position: "top-center", autoClose: 6000, hideProgressBar: true, @@ -116,191 +154,560 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => { if (sending) { sendingElement = Envoi en cours... } - /* - firstname - lastname - mail - tel - j'ai déjà été bénévole pour PEL - un petit mot... - */ - return ( -
-
-
Qu'est-ce que Paris est Ludique ?
-
-

- Un festival en plein air dédiée aux jeux de société modernes sous - toutes leurs formes. -

-

- En 2019 lors de la dernière édition, ce sont 16 000 joueurs qui se - sont réunis sous 300 chapiteaux et 2 000 tables. -

-

- Les 2 jours que durent le festival sont entièrement dédiés à ce que le - public JOUE, que ce soit sur les stands d'éditeurs, - d'associations, d'animateurs bénévoles, du coin des petits - joueurs, de l'espace tournois, ou de l'espace prototypes. -

-
-
Et les bénévoles de PeL ?
-
-

- L'organisation du festival est entièrement gérée par nous, les - bénévoles. À aucun moment ça ne ressemble à du travail : nous faisons tout - pour passer un aussi bon moment que les visiteurs :) -

-

- D'ailleurs, un soir par mois nous nous réunissons pour un apéro ludique - où discuter de l'organisation ! On joue autant que les visiteurs, mais - sur toute l'année ^^ -

-

- Pendant le festival de 2019, nous étions 187 bénévoles organisés en - équipes qui chouchoutent les visiteurs en les accueillant, en - s'assurant que tout se passe bien, ou encore en expliquant des règles - de jeux. -

-

- Une équipe est même dédiée au bien être des bénévoles en leur servant à - boire et à manger dans un espace à part où faire des pauses régulières. Et - puis nous hébergeons ceux d'entre nous qui habitent loin de Paris. Le - confort avant tout ! -

-

- La majorité d'entre nous sommes bénévoles les samedi et dimanche - , mais certains bénévoles ne sont pas disponibles les deux jours. On leur - demande alors d'aider à la mise en place jeudi ou vendredi, ou au - rangement le lundi. Bref, chacun participe comme il peut mais deux jours - minimum ! -

-

- Le samedi soir quand les visiteurs sont partis, nous prolongeons la fête en - dînant avec les exposants présents sur le festival. -

-
-
- Si l'expérience vous tente, remplissez le formulaire suivant pour devenir - bénévoles !
- Vous pouvez aussi juste nous rencontrer avant de vous décider à devenir - bénévole, on comprend qu'un saut dans l'inconnu soit difficile. -
- Dans les deux cas, venez nous rencontrer mardi 22 mars près de Châtelet, détails - après l'inscription :) -
-
-
-
-
- Je veux devenir bénévole + const intro = ( +
+
Qu'est-ce que Paris est Ludique ?
+
+

+ Un festival en plein air dédié aux jeux de société modernes sous toutes + leurs formes. Les samedi 2 et dimanche 3 juillet 2022 ! +

+

+ En 2019 lors de la dernière édition, ce sont 16 000 joueurs qui se sont + réunis sous 300 chapiteaux et 2 000 tables. +

+

+ Les 2 jours que durent le festival sont entièrement dédiés à ce que le public{" "} + JOUE, que ce soit sur les stands d'éditeurs, d'associations, + d'animateurs bénévoles, du coin des petits joueurs, de l'espace + tournois, ou de l'espace prototypes. +

+
+ {" "} +
+
+
Et les bénévoles de PeL ?
+
+

+ L'organisation du festival est entièrement gérée par nous, les + bénévoles. À aucun moment ça ne ressemble à du travail : nous faisons tout pour + passer un aussi bon moment que les visiteurs :) +

+

+ D'ailleurs, un soir par mois nous nous réunissons pour un apéro ludique où + discuter de l'organisation ! On joue autant que les visiteurs, mais sur + toute l'année ^^ +

+

+ Pendant le festival de 2019, nous étions 187 bénévoles organisés en + équipes qui chouchoutent les visiteurs en les accueillant, en s'assurant + que tout se passe bien, ou encore en expliquant des règles de jeux. +

+

+ Une équipe est même dédiée au bien être des bénévoles en leur servant à boire et + à manger dans un espace à part où faire des pauses régulières. Et puis nous + hébergeons ceux d'entre nous qui habitent loin de Paris. Le confort avant + tout ! +

+

+ La majorité d'entre nous sommes bénévoles les samedi et dimanche, + mais certains bénévoles ne sont pas disponibles les deux jours. On leur demande + alors d'aider à la mise en place jeudi ou vendredi, ou au rangement le + lundi, à la place d'un des jours du weekend. Bref, chacun participe comme il + peut mais deux jours minimum ! +

+

+ Le samedi soir quand les visiteurs sont partis, nous prolongeons la fête en + dînant avec les exposants présents sur le festival. Le dimanche rebelote juste + entre bénévoles. +

+
+
+
+ Si l'expérience vous tente, remplissez le formulaire suivant pour devenir + bénévole !
+ Vous pouvez aussi juste nous rencontrer avant de vous décider à devenir bénévole, on + comprend qu'un saut pareil dans l'inconnu soit difficile. +
+ Dans les deux cas, venez rencontrer une poignée d'entre nous dans un bar/resto près + de Châtelet ! :) Sur inscription uniquement... +
+
+
+ ) + + const potentialVolunteerQuestion = ( +
+
+
Je veux devenir bénévole :
+
+
+ {["Tout de suite !", "Peut-être après une rencontre avec des bénévoles"].map( + (option) => ( +
+
+ ) + + const alreadyVolunteerQuestion = !potentialVolunteer && ( + <> +
+
+
J'ai déjà été bénévole à PeL
+
+
+
+ {["Oui", "Non"].map((option) => ( + -
+ ))}
-
- - +
+
+ + {alreadyVolunteer && ( +
+
+

Dans ce cas pourquoi t'inscris-tu ici ? ^^

+

+ Si tu te rappelles de l'email que tu avais utilisé à ta dernière + inscription sur le site Force Orange des bénévoles (même sur l'ancienne + version) tu peux{" "} + + t'identifier ici + {" "} + avec ton ancien mot de passe, ou en{" "} + + demander un nouveau ici + + . +

+

+ Autrement, si tu as changé d'email, mieux vaut nous le communiquer à + benevoles@parisestludique.fr en précisant bien tes nom et prénom :) +

+
+
+ )} + + ) + + const commentQuestion = ( +
+
+