PeL/force-orange-2022
PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-06-08 08:34:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

add component to display user participation details

Browse Source
This commit is contained in:
memeriau 2022-01-30 22:15:12 +01:00
parent 67a8e84bd5
commit bbe4f9b1d1
7 changed files with 108 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/VolunteerBoard/Board.tsx
View File

@ -1,14 +1,16 @@
import { FC, memo } from "react"
import DayWishes from "./DayWishes/DayWishes"
import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
import ParticipationDetailsForm from "./ParticipationDetailsForm/ParticipationDetailsForm"
import ParticipationDetails from "./ParticipationDetails/ParticipationDetails"
import ParticipationDetailsFormModal from "./ParticipationDetailsForm/ParticipationDetailsFormModal"
import withUserConnected from "../../utils/withUserConnected"
const Board: FC = (): JSX.Element => (
<div>
<DayWishes />
<DayWishesFormModal />
<ParticipationDetailsForm />
<ParticipationDetails />
<ParticipationDetailsFormModal />
</div>
)

47
src/components/VolunteerBoard/ParticipationDetails/ParticipationDetails.tsx Normal file
View File

@ -0,0 +1,47 @@
import { FC, memo, useCallback } from "react"
import get from "lodash/get"
import styles from "./styles.module.scss"
import { useUserParticipationDetails } from "../participationDetails.utils"
import { displayModal, MODAL_IDS } from "../../../store/ui"
import useAction from "../../../utils/useAction"
type Props = {
afterSubmit?: () => void | undefined
}
const ParticipationDetailsForm: FC<Props> = (): JSX.Element | null => {
const [participationDetails] = useUserParticipationDetails()
const age = get(participationDetails, "age", "")
const tShirtSize = get(participationDetails, "teeshirtSize", "")
const food = get(participationDetails, "food", "")
const execDisplayModal = useAction(displayModal)
const onEdit = useCallback(
() => execDisplayModal(MODAL_IDS.PARTICIPATIONDETAILS),
[execDisplayModal]
)
return (
<div className={styles.root}>
<div className={styles.title}>Mes informations pour le festival</div>
{!tShirtSize && <div className={styles.line}>J&apos;ai déjà 2 t-shirts.</div>}
{tShirtSize && (
<div className={styles.line}>
J&apos;ai besoin d&apos;un t-shirt ! (Taille <b>{tShirtSize}</b>)
</div>
)}
<div className={styles.line}>
Age : <b>{age} ans</b>.
</div>
<div className={styles.line}>
Préférence alimentaire : <b>{food}</b>
</div>
<div className={styles.editButton}>
<button type="button" onClick={onEdit}>
Modifier
</button>
</div>
</div>
)
}
export default memo(ParticipationDetailsForm)

24
src/components/VolunteerBoard/ParticipationDetails/styles.module.scss Executable file
View File

@ -0,0 +1,24 @@
@import "../../../theme/variables";
@import "../../../theme/mixins";
.root {
@include inner-content-wrapper();
position: relative;
}
.title {
padding-bottom: 5px;
font-weight: bold;
}
.line {
margin: 2px 0;
}
.editButton {
@include vertical-center();
position: absolute;
right: 20px;
}

17
src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsForm.tsx
View File

@ -8,7 +8,11 @@ import {
useUserParticipationDetails,
} from "../participationDetails.utils"
const ParticipationDetailsForm: FC = (): JSX.Element | null => {
type Props = {
afterSubmit?: () => void | undefined
}
const ParticipationDetailsForm: FC<Props> = ({ afterSubmit }): JSX.Element | null => {
const sizeRef = useRef<HTMLSelectElement | null>(null)
const dietRef = useRef<HTMLInputElement | null>(null)
const ageRef = useRef<HTMLInputElement | null>(null)
@ -19,9 +23,10 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
const onSubmit = useCallback(() => {
const age = get(ageRef, "current.value", "")
const teeshirtSize = has2Shirts ? "" : get(sizeRef, "current.value", "")
const food = get(dietRef, "current.value", foodDefaultValue)
const food = get(dietRef, "current.value", "") || foodDefaultValue
saveParticipationDetails({ age, teeshirtSize, food })
}, [has2Shirts, saveParticipationDetails])
if (afterSubmit) afterSubmit()
}, [has2Shirts, saveParticipationDetails, afterSubmit])
const onHas2ShirtsClick = useCallback(
(value) => {
@ -43,7 +48,7 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
return (
<div className={styles.root}>
<div className={styles.title}>Informations pour le festival</div>
<div className={styles.title}>Mes informations pour le festival</div>
<div className={styles.tShirtWrapper}>
<div className={styles.tShirtLabel}>J&apos;ai déjà 2 t-shirts</div>
<label>
@ -99,4 +104,8 @@ const ParticipationDetailsForm: FC = (): JSX.Element | null => {
)
}
ParticipationDetailsForm.defaultProps = {
afterSubmit: undefined,
}
export default memo(ParticipationDetailsForm)

18
src/components/VolunteerBoard/ParticipationDetailsForm/ParticipationDetailsFormModal.tsx Normal file
View File

@ -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 ParticipationDetailsForm from "./ParticipationDetailsForm"
const ParticipationDetailsFormModal: FC = (): JSX.Element => {
const execHideModal = useAction(hideModal)
const afterFormSubmit = useCallback(() => execHideModal(), [execHideModal])
return (
<Modal modalId={MODAL_IDS.PARTICIPATIONDETAILS}>
<ParticipationDetailsForm afterSubmit={afterFormSubmit} />
</Modal>
)
}
export default memo(ParticipationDetailsFormModal)

1
src/store/ui.ts
View File

@ -28,4 +28,5 @@ export const selectActiveModalId = createSelector(selectUiData, (ui) => ui.modal
export const MODAL_IDS = {
DAYWISHES: "DAYWISHES",
PARTICIPATIONDETAILS: "PARTICIPATIONDETAILS",
}

1
src/theme/mixins.scss
View File

@ -30,6 +30,7 @@
}
@mixin inner-content-wrapper() {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
background-color: $color-grey-lighter;