From ea86a1b02e0045a8287f24fd85dfd893547af3cf Mon Sep 17 00:00:00 2001 From: Pierre-Eric Garcia Date: Wed, 16 Aug 2023 11:52:07 +0200 Subject: [PATCH] Started migration of form-sections components to TypeScript --- .../components/atoms/hyperTexts/Button.tsx | 2 ++ .../components/atoms/inputs/RadioInput.tsx | 2 +- .../components/atoms/inputs/SelectInput.tsx | 8 ++--- .../components/molecules/Stepper/index.tsx | 2 +- ...ArchivedSection.js => ArchivedSection.tsx} | 0 ...ptionSection.js => DescriptionSection.tsx} | 0 ...ection.js => FranceConnectPlusSection.tsx} | 0 ...nectionModal.js => DisconnectionModal.tsx} | 13 ++++++-- ...ganisationCard.js => OrganisationCard.tsx} | 31 +++++++++++------- ...zationPrompt.js => OrganizationPrompt.tsx} | 19 ++++++++--- ...ionCard.js => PersonalInformationCard.tsx} | 22 +++++++++---- ...nicalTeamCard.js => TechnicalTeamCard.tsx} | 27 +++++++++++++--- .../{index.js => index.tsx} | 32 +++++++++++++------ ...Enrollment.js => useAccessToEnrollment.ts} | 2 +- .../{StepperSection.js => StepperSection.tsx} | 0 .../{TextSection.js => TextSection.tsx} | 18 +++++++---- ...ion.js => PiecesJustificativesSection.tsx} | 0 .../templates/InstructorEnrollmentList.tsx | 1 + .../templates/hooks/use-data-provider.ts | 2 +- frontend/src/services/enrollments.tsx | 2 +- 20 files changed, 128 insertions(+), 55 deletions(-) rename frontend/src/components/organisms/form-sections/{ArchivedSection.js => ArchivedSection.tsx} (100%) rename frontend/src/components/organisms/form-sections/{DescriptionSection.js => DescriptionSection.tsx} (100%) rename frontend/src/components/organisms/form-sections/{FranceConnectPlusSection.js => FranceConnectPlusSection.tsx} (100%) rename frontend/src/components/organisms/form-sections/OrganisationSection/{DisconnectionModal.js => DisconnectionModal.tsx} (50%) rename frontend/src/components/organisms/form-sections/OrganisationSection/{OrganisationCard.js => OrganisationCard.tsx} (90%) rename frontend/src/components/organisms/form-sections/OrganisationSection/{OrganizationPrompt.js => OrganizationPrompt.tsx} (61%) rename frontend/src/components/organisms/form-sections/OrganisationSection/{PersonalInformationCard.js => PersonalInformationCard.tsx} (77%) rename frontend/src/components/organisms/form-sections/OrganisationSection/{TechnicalTeamCard.js => TechnicalTeamCard.tsx} (88%) rename frontend/src/components/organisms/form-sections/PreviousEnrollmentSection/{index.js => index.tsx} (91%) rename frontend/src/components/organisms/form-sections/PreviousEnrollmentSection/{useAccessToEnrollment.js => useAccessToEnrollment.ts} (90%) rename frontend/src/components/organisms/form-sections/{StepperSection.js => StepperSection.tsx} (100%) rename frontend/src/components/organisms/form-sections/{TextSection.js => TextSection.tsx} (54%) rename frontend/src/components/organisms/form-sections/urssaf-sections/{PiecesJustificativesSection.js => PiecesJustificativesSection.tsx} (100%) diff --git a/frontend/src/components/atoms/hyperTexts/Button.tsx b/frontend/src/components/atoms/hyperTexts/Button.tsx index 5aed95f113..2a45761b25 100644 --- a/frontend/src/components/atoms/hyperTexts/Button.tsx +++ b/frontend/src/components/atoms/hyperTexts/Button.tsx @@ -16,6 +16,8 @@ interface ButtonProps extends ButtonHTMLAttributes { download?: boolean; submit?: boolean; children?: React.ReactNode; + target?: string; + rel?: string; } const Button: React.FC = ({ diff --git a/frontend/src/components/atoms/inputs/RadioInput.tsx b/frontend/src/components/atoms/inputs/RadioInput.tsx index a3e7f7ec5e..6d1c565cb2 100644 --- a/frontend/src/components/atoms/inputs/RadioInput.tsx +++ b/frontend/src/components/atoms/inputs/RadioInput.tsx @@ -5,7 +5,7 @@ import Label from './Label'; import { InputProps } from './Input'; interface RadioInputProps extends InputProps { - options?: { id: string; label: string }[]; + options?: { id: string | number; label: string }[]; } export const RadioInput: React.FC = ({ diff --git a/frontend/src/components/atoms/inputs/SelectInput.tsx b/frontend/src/components/atoms/inputs/SelectInput.tsx index e8f18fd2ab..4918cf8be2 100644 --- a/frontend/src/components/atoms/inputs/SelectInput.tsx +++ b/frontend/src/components/atoms/inputs/SelectInput.tsx @@ -10,11 +10,11 @@ import SideBySideWrapper from './SideBySideWrapper'; import Label from './Label'; interface SelectInputProps extends SelectHTMLAttributes { - options?: { id: string; label: string }[]; + options?: { id: string | number; label: string }[]; useOtherOption?: boolean; - label: string; - helper: string; - meta: string; + label: string | React.ReactNode; + helper?: string; + meta?: string; } export const SelectInput: React.FC = ({ diff --git a/frontend/src/components/molecules/Stepper/index.tsx b/frontend/src/components/molecules/Stepper/index.tsx index 1d0341abc9..e90c41bd0c 100644 --- a/frontend/src/components/molecules/Stepper/index.tsx +++ b/frontend/src/components/molecules/Stepper/index.tsx @@ -2,7 +2,7 @@ import './style.css'; import { useDataProviderConfigurations } from '../../templates/hooks/use-data-provider-configurations'; type StepperProps = { - children: React.ReactNode; + children?: React.ReactNode; steps: string[]; currentStep: string | null; previousStepNotCompleted?: boolean; diff --git a/frontend/src/components/organisms/form-sections/ArchivedSection.js b/frontend/src/components/organisms/form-sections/ArchivedSection.tsx similarity index 100% rename from frontend/src/components/organisms/form-sections/ArchivedSection.js rename to frontend/src/components/organisms/form-sections/ArchivedSection.tsx diff --git a/frontend/src/components/organisms/form-sections/DescriptionSection.js b/frontend/src/components/organisms/form-sections/DescriptionSection.tsx similarity index 100% rename from frontend/src/components/organisms/form-sections/DescriptionSection.js rename to frontend/src/components/organisms/form-sections/DescriptionSection.tsx diff --git a/frontend/src/components/organisms/form-sections/FranceConnectPlusSection.js b/frontend/src/components/organisms/form-sections/FranceConnectPlusSection.tsx similarity index 100% rename from frontend/src/components/organisms/form-sections/FranceConnectPlusSection.js rename to frontend/src/components/organisms/form-sections/FranceConnectPlusSection.tsx diff --git a/frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.js b/frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.tsx similarity index 50% rename from frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.js rename to frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.tsx index 31314fe57d..9e36d1d359 100644 --- a/frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.js +++ b/frontend/src/components/organisms/form-sections/OrganisationSection/DisconnectionModal.tsx @@ -1,10 +1,19 @@ +import { MouseEventHandler } from 'react'; import ConfirmationModal from '../../ConfirmationModal'; -export const DisconnectionModal = ({ disconnectionUrl, handleCancel }) => { +type DisconnectionModalProps = { + disconnectionUrl: string; + handleCancel: MouseEventHandler; +}; + +export const DisconnectionModal: React.FC = ({ + disconnectionUrl, + handleCancel, +}) => { return ( (window.location = disconnectionUrl)} + handleConfirm={() => (window.location.href = disconnectionUrl)} handleCancel={handleCancel} > Afin de mettre à jour vos informations personnelles, vous allez être diff --git a/frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.js b/frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.tsx similarity index 90% rename from frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.js rename to frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.tsx index fb216aeabb..e242bb669e 100644 --- a/frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.js +++ b/frontend/src/components/organisms/form-sections/OrganisationSection/OrganisationCard.tsx @@ -2,7 +2,7 @@ import { isEmpty } from 'lodash'; import { useCallback, useContext, useEffect, useState } from 'react'; import { isValidNAFCode } from '../../../../lib'; import { getCachedOrganizationInformation } from '../../../../services/external'; -import Alert from '../../../atoms/Alert'; +import Alert, { AlertType } from '../../../atoms/Alert'; import Button from '../../../atoms/hyperTexts/Button'; import Loader from '../../../atoms/Loader'; import { Card, CardHead } from '../../../molecules/Card'; @@ -43,7 +43,13 @@ export const OrganisationCard = () => { const { user, isLoading } = useAuth(); const updateOrganizationInfo = useCallback( - ({ organization_id, siret }) => { + ({ + organization_id, + siret, + }: { + organization_id: number; + siret: string; + }) => { onChange({ target: { name: 'organization_id', @@ -63,7 +69,8 @@ export const OrganisationCard = () => { !isUserEnrollmentLoading && !disabled && !organization_id && - !isEmpty(user.organizations) + user?.organizations && + user.organizations.length > 0 ) { updateOrganizationInfo({ organization_id: user.organizations[0].id, @@ -79,7 +86,7 @@ export const OrganisationCard = () => { ]); useEffect(() => { - const fetchOrganizationInfo = async (siret) => { + const fetchOrganizationInfo = async (siret: string) => { try { setIsOrganizationInfoLoading(true); const { @@ -131,14 +138,14 @@ export const OrganisationCard = () => { } }, [siret]); - const onOrganizationChange = (new_organization_id) => { + const onOrganizationChange = (new_organization_id: number) => { setShowOrganizationPrompt(false); - if (!isEmpty(user.organizations)) { + if (!isEmpty(user?.organizations)) { updateOrganizationInfo({ organization_id: new_organization_id, - siret: user.organizations.find((o) => o.id === new_organization_id) - .siret, + siret: user?.organizations?.find((o) => o.id === new_organization_id) + ?.siret as string, }); } }; @@ -157,21 +164,21 @@ export const OrganisationCard = () => {

Vous faites cette demande pour

{activite && !isValidNAFCode(target_api, activite) && (
- + Votre organisme ne semble pas être éligible
)} {showOrganizationInfoNotFound && (
- + Cet établissement est fermé ou le SIRET est invalide.
)} {showOrganizationInfoError && (
- + Erreur inconnue lors de la récupération des informations de cet établissement. @@ -215,7 +222,7 @@ export const OrganisationCard = () => { onSelect={onOrganizationChange} onJoinOrganization={onJoinOrganization} onClose={() => setShowOrganizationPrompt(false)} - organizations={user.organizations} + organizations={user?.organizations} /> )} diff --git a/frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.js b/frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.tsx similarity index 61% rename from frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.js rename to frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.tsx index fb184ec457..8e16454974 100644 --- a/frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.js +++ b/frontend/src/components/organisms/form-sections/OrganisationSection/OrganizationPrompt.tsx @@ -1,19 +1,30 @@ -import React, { useMemo } from 'react'; +import React, { ChangeEventHandler, useMemo } from 'react'; import RadioInput from '../../../atoms/inputs/RadioInput'; import ConfirmationModal from '../../ConfirmationModal'; +import { User } from '../../../templates/InstructorEnrollmentList'; -const OrganizationPrompt = ({ +type OrganizationPromptProps = { + selectedOrganizationId: number; + onSelect: Function; + onClose: Function; + onJoinOrganization: Function; + organizations: User['organizations']; +}; + +const OrganizationPrompt: React.FC = ({ selectedOrganizationId, onSelect, onClose, onJoinOrganization, organizations, }) => { - const onChange = ({ target: { value } }) => onSelect(parseInt(value)); + const onChange: ChangeEventHandler = ({ + target: { value }, + }) => onSelect(parseInt(value)); const options = useMemo( () => - organizations.map(({ id, label, siret }) => ({ + organizations?.map(({ id, label, siret }) => ({ id, label: label || siret, })), diff --git a/frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.js b/frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.tsx similarity index 77% rename from frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.js rename to frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.tsx index 96e7a58e65..e2a5947899 100644 --- a/frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.js +++ b/frontend/src/components/organisms/form-sections/OrganisationSection/PersonalInformationCard.tsx @@ -17,13 +17,19 @@ export const PersonalInformationCard = () => { const { isLoading } = useAuth(); - const [personalInformation, setPersonalInformation] = useState({}); + const [personalInformation, setPersonalInformation] = useState<{ + given_name: string; + family_name: string; + email: string; + phone_number: string; + job: string; + } | null>(null); const [showDisconnectionPrompt, setShowDisconnectionPrompt] = useState(false); useEffect(() => { const firstDemandeur = !isEmpty(team_members) && - team_members.find(({ type }) => type === 'demandeur'); + team_members.find(({ type }: { type: string }) => type === 'demandeur'); if (firstDemandeur) { // note that they might be more than one demandeur // for now we just display the first demandeur found @@ -38,7 +44,7 @@ export const PersonalInformationCard = () => {

Vous êtes

- {personalInformation.given_name} {personalInformation.family_name} + {personalInformation?.given_name} {personalInformation?.family_name} {!disabled && (