[EN-4026] chore(navigation): pass components using forms in typescript

ReseauEntourage · Aug 23, 2023 · 69662df · 69662df
1 parent 75117e9
commit 69662df
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 99 deletions.
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -7,6 +7,8 @@ import {
   BusinessLineValue,
   ExternalOfferOrigin,
   HeardAboutValue,
+  CandidateHelpWithValue,
+  CompanyApproach,
 } from 'src/constants';
 import { AdminZone, Department } from 'src/constants/departements';
 import { AdminRole, Gender, UserRole } from 'src/constants/users';
@@ -388,13 +390,13 @@ export type ContactContactUs = {
 export type ContactCompany = {
   firstName: string;
   lastName: string;
-  approach: object;
+  approach: CompanyApproach;
   email: string;
   company: string;
   position: string;
-  zone: object;
+  zone: AdminZone;
   phone?: string;
-  heardAbout?: object;
+  heardAbout?: HeardAboutValue;
 };
 
 export type ContactCandidate = {
@@ -406,9 +408,9 @@ export type ContactCandidate = {
   workerPhone: string;
   firstName: string;
   lastName: string;
-  helpWith: string[];
+  helpWith: CandidateHelpWithValue[];
   gender: Gender;
-  birthDate?: Date;
+  birthDate?: string;
   address?: string;
   postalCode: string;
   city: string;
@@ -424,7 +426,7 @@ export type ContactCandidate = {
   socialSecurity: string;
   handicapped?: string;
   bankAccount: string;
-  businessLines?: string[];
+  businessLines?: BusinessLineValue[];
   description: string;
   heardAbout: string;
   diagnostic?: string;

diff --git a/src/components/cards/PassionsCard.js → src/components/cards/PassionsCard.tsx b/src/components/cards/PassionsCard.js → src/components/cards/PassionsCard.tsx
@@ -1,11 +1,19 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { formEditPassions } from 'src/components/forms/schemas/formEditPassions';
 import { openModal } from 'src/components/modals/Modal';
 import { ModalEdit } from 'src/components/modals/Modal/ModalGeneric/ModalEdit';
 import { Grid, ButtonIcon, Icon } from 'src/components/utils';
 
-export const PassionsCard = ({ list, onChange }) => {
+interface Passion {
+  name: string;
+  order: number;
+}
+
+interface PassionProps {
+  list: Passion[];
+  onChange: (updatedPassions: { passions: Passion[] }) => void;
+}
+export const PassionsCard = ({ list, onChange }: PassionProps) => {
   return (
     <div className="uk-card uk-card-default uk-card-body">
       <Grid gap="small" between eachWidths={['expand', 'auto']}>
@@ -23,7 +31,6 @@ export const PassionsCard = ({ list, onChange }) => {
             onClick={() => {
               openModal(
                 <ModalEdit
-                  id="modal-passions"
                   title="Édition - Mes passions (6 maximum)"
                   formSchema={formEditPassions}
                   defaultValues={list.reduce((acc, { name }, i) => {
@@ -37,9 +44,10 @@ export const PassionsCard = ({ list, onChange }) => {
                         .filter((val) => {
                           return !!val;
                         })
-                        .map((val) => {
+                        .map((val, index) => {
                           return {
                             name: val,
+                            order: index,
                           };
                         }),
                     };
@@ -55,7 +63,7 @@ export const PassionsCard = ({ list, onChange }) => {
         {list.length !== 0 ? (
           list.map(({ name }, i) => {
             return (
-              <li id={i} key={i}>
+              <li id={i.toString()} key={i}>
                 {name}
               </li>
             );
@@ -67,15 +75,3 @@ export const PassionsCard = ({ list, onChange }) => {
     </div>
   );
 };
-PassionsCard.propTypes = {
-  list: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    })
-  ),
-  onChange: PropTypes.func,
-};
-PassionsCard.defaultProps = {
-  list: [],
-  onChange: null,
-};
diff --git a/src/components/cards/SkillsCard.js → src/components/cards/SkillsCard.tsx b/src/components/cards/SkillsCard.js → src/components/cards/SkillsCard.tsx
@@ -1,11 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { formEditSkills } from 'src/components/forms/schemas/formEditSkills';
 import { openModal } from 'src/components/modals/Modal';
 import { ModalEdit } from 'src/components/modals/Modal/ModalGeneric/ModalEdit';
 import { Grid, ButtonIcon, Icon } from 'src/components/utils';
 
-export const SkillsCard = ({ list, onChange }) => {
+interface Skill {
+  name: string;
+  order: number;
+}
+interface SkillsCardProps {
+  list: Skill[];
+  onChange: (updatedSkills: { skills: Skill[] }) => void;
+}
+export const SkillsCard = ({ list = [], onChange }: SkillsCardProps) => {
   return (
     <div className="uk-card uk-card-secondary uk-card-body">
       <Grid gap="small" between eachWidths={['expand', 'auto']}>
@@ -36,9 +43,10 @@ export const SkillsCard = ({ list, onChange }) => {
                         .filter((val) => {
                           return !!val;
                         })
-                        .map((val) => {
+                        .map((val, index) => {
                           return {
                             name: val,
+                            order: index,
                           };
                         }),
                     };
@@ -54,7 +62,7 @@ export const SkillsCard = ({ list, onChange }) => {
         {list.length !== 0 ? (
           list.map(({ name }, i) => {
             return (
-              <li id={i} key={i}>
+              <li id={i.toString()} key={i}>
                 {name}
               </li>
             );
@@ -66,16 +74,3 @@ export const SkillsCard = ({ list, onChange }) => {
     </div>
   );
 };
-SkillsCard.propTypes = {
-  list: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    })
-  ),
-  onChange: PropTypes.func,
-};
-
-SkillsCard.defaultProps = {
-  list: [],
-  onChange: null,
-};
diff --git a/src/components/cv/CVEditCareerPath.tsx b/src/components/cv/CVEditCareerPath.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { DefaultValues } from 'react-hook-form';
 import { ExtractFormSchemaValidation } from '../forms/FormSchema';
@@ -145,33 +144,3 @@ export const CVEditCareerPath = ({
     </div>
   );
 };
-
-CVEditCareerPath.propTypes = {
-  ambitions: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        order: PropTypes.number.isRequired,
-        prefix: PropTypes.oneOf(
-          AMBITIONS_PREFIXES.map(({ value }) => {
-            return value;
-          })
-        ),
-      })
-    ),
-    PropTypes.string,
-  ]).isRequired,
-  businessLines: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        order: PropTypes.number.isRequired,
-      })
-    ),
-    PropTypes.string,
-  ]).isRequired,
-  onChange: PropTypes.func,
-};
-CVEditCareerPath.defaultProps = {
-  onChange: null,
-};
diff --git a/src/components/forms/schemas/formCandidateContact.ts b/src/components/forms/schemas/formCandidateContact.ts
@@ -50,7 +50,7 @@ export const formCandidateContact: FormSchema<{
   socialSecurity: CandidateYesNoValue;
   handicapped: CandidateYesNoValue;
   bankAccount: CandidateYesNoValue;
-  businessLines: FilterConstant<BusinessLineValue>;
+  businessLines: FilterConstant<BusinessLineValue>[];
   description: string;
   heardAbout: HeardAboutValue;
   diagnostic: string;

diff --git a/src/components/forms/schemas/formResetPassword.ts b/src/components/forms/schemas/formResetPassword.ts
@@ -3,7 +3,7 @@ import { FormSchema } from '../FormSchema';
 
 export const formResetPassword: FormSchema<{
   newPassword: string;
-  confirmPassword: boolean;
+  confirmPassword: string;
 }> = {
   id: 'form-reset-pwd',
   fields: [

diff --git a/...dateContactModal/CandidateContactModal.js → ...ateContactModal/CandidateContactModal.tsx b/...dateContactModal/CandidateContactModal.js → ...ateContactModal/CandidateContactModal.tsx
@@ -6,7 +6,6 @@ import { ModalEdit } from 'src/components/modals/Modal/ModalGeneric/ModalEdit';
 import { FB_TAGS, GA_TAGS } from 'src/constants/tags';
 import { fbEvent } from 'src/lib/fb';
 import { gaEvent } from 'src/lib/gtag';
-import { getValueFromFormField } from 'src/utils';
 
 export const CandidateContactModal = () => {
   return (
@@ -54,8 +53,8 @@ export const CandidateContactModal = () => {
         try {
           await Api.postContactCandidate({
             ...fields,
-            helpWith: getValueFromFormField(helpWith),
-            businessLines: getValueFromFormField(businessLines),
+            helpWith: helpWith.map(({ value }) => value),
+            businessLines: businessLines.map(({ value }) => value),
           });
           gaEvent(GA_TAGS.PAGE_ORIENTER_ENVOYER_INSCRIPTION_CLIC);
           fbEvent(FB_TAGS.SOCIAL_WORKER_REGISTRATION_SEND);

diff --git a/...dalGeneric/CandidateContactModal/index.js → ...dalGeneric/CandidateContactModal/index.ts b/...dalGeneric/CandidateContactModal/index.js → ...dalGeneric/CandidateContactModal/index.ts
diff --git a/...ompanyContactModal/CompanyContactModal.js → ...mpanyContactModal/CompanyContactModal.tsx b/...ompanyContactModal/CompanyContactModal.js → ...mpanyContactModal/CompanyContactModal.tsx
diff --git a/...ModalGeneric/CompanyContactModal/index.js → ...ModalGeneric/CompanyContactModal/index.ts b/...ModalGeneric/CompanyContactModal/index.js → ...ModalGeneric/CompanyContactModal/index.ts
diff --git a/...terestLinkedOut/ModalInterestLinkedOut.js → ...erestLinkedOut/ModalInterestLinkedOut.tsx b/...terestLinkedOut/ModalInterestLinkedOut.js → ...erestLinkedOut/ModalInterestLinkedOut.tsx
diff --git a/...pperModal/ModalInterestLinkedOut/index.js → ...pperModal/ModalInterestLinkedOut/index.ts b/...pperModal/ModalInterestLinkedOut/index.js → ...pperModal/ModalInterestLinkedOut/index.ts
diff --git a/...StepperModal/ModalShareCV/ModalShareCV.js → ...tepperModal/ModalShareCV/ModalShareCV.tsx b/...StepperModal/ModalShareCV/ModalShareCV.js → ...tepperModal/ModalShareCV/ModalShareCV.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import UIkit from 'uikit';
 
@@ -12,7 +11,10 @@ import { GA_TAGS } from 'src/constants/tags';
 import { useNewsletterTracking } from 'src/hooks';
 import { gaEvent } from 'src/lib/gtag';
 
-export const ModalShareCV = ({ firstName }) => {
+interface ModalShareCVProps {
+  firstName: string;
+}
+export const ModalShareCV = ({ firstName }: ModalShareCVProps) => {
   const newsletterParams = useNewsletterTracking();
 
   return (
@@ -99,11 +101,3 @@ export const ModalShareCV = ({ firstName }) => {
     />
   );
 };
-
-ModalShareCV.propTypes = {
-  firstName: PropTypes.string,
-};
-
-ModalShareCV.defaultProps = {
-  firstName: undefined,
-};
diff --git a/...eneric/StepperModal/ModalShareCV/index.js → ...eneric/StepperModal/ModalShareCV/index.ts b/...eneric/StepperModal/ModalShareCV/index.js → ...eneric/StepperModal/ModalShareCV/index.ts
diff --git a/src/pages/reset/[id]/[token].js → src/pages/reset/[id]/[token].tsx b/src/pages/reset/[id]/[token].js → src/pages/reset/[id]/[token].tsx
@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Api } from 'src/api';
 import { Layout } from 'src/components/Layout';
@@ -8,7 +7,18 @@ import { FormWithValidation } from 'src/components/forms/FormWithValidation';
 import { formResetPassword } from 'src/components/forms/schemas/formResetPassword';
 import { Button, Section, Icon } from 'src/components/utils';
 
-const ResetPasswordPage = ({ valid, id, token, isCreation }) => {
+interface ResetPasswordPageProps {
+  valid: boolean;
+  id: string;
+  token: string;
+  isCreation: boolean;
+}
+const ResetPasswordPage = ({
+  valid,
+  id,
+  token,
+  isCreation = false,
+}: ResetPasswordPageProps) => {
   const { push } = useRouter();
 
   return (
@@ -90,15 +100,4 @@ ResetPasswordPage.getInitialProps = async ({ query }) => {
   };
 };
 
-ResetPasswordPage.propTypes = {
-  valid: PropTypes.bool.isRequired,
-  id: PropTypes.string.isRequired,
-  token: PropTypes.string.isRequired,
-  isCreation: PropTypes.string,
-};
-
-ResetPasswordPage.defaultProps = {
-  isCreation: false,
-};
-
 export default ResetPasswordPage;
diff --git a/src/pages/reset/success.js → src/pages/reset/success.tsx b/src/pages/reset/success.js → src/pages/reset/success.tsx