Refactored handle form submission function for first section

src/Components/Interface/Patient.tsx

@@ -0,0 +1,14 @@
+export interface Patient {
+  fullName: string;
+  homePhone: string;
+  cellPhone: string;
+  email: string;
+  age: number | string;
+  dateOfBirth: string;
+  socialSecurityNumber: string;
+  mailingAddress: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  gender: string;
+}

src/Components/PatientForm/PatientForm.tsx

@@ -35,7 +35,8 @@ import PatientImageMarker from '../ImageMarker/PatientImageMarker';
 import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
 import AlertDialog from '../Helper/AlertDialogBox';
 import SignatureComponent from '../Helper/SignatureComponent';
-import { Link, useLocation  } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
+import { Patient } from '../Interface/Patient';
 
 const Accordion = styled((props: AccordionProps) => (
   <MuiAccordion disableGutters elevation={0} square {...props} />
@@ -91,36 +92,11 @@ export default function PatientForm({ type }: Props) {
   const [section7Data, setSection7Data] = React.useState<any>({});
   const [section8Data, setSection8Data] = React.useState<any>({});
   const [allPatientData, setAllPatientData] = React.useState<any>([]);
-  const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState<boolean>(false)
+  const [patientDetailsButtonFlag, setPatientDetailsButtonFlag] =
+    React.useState<boolean>(false);
 
-  const handleFormSection1Data = (
+  const handleFormSection1Data = (patient: Patient) => {
-    fullName?: string | undefined,
+    setSection1Data(patient);
-    homePhone?: string | undefined,
-    cellPhone?: string | undefined,
-    email?: string | undefined,
-    age?: number | undefined | string,
-    dateOfBirth?: string | undefined,
-    socialSecurityNumber?: string | undefined,
-    mailingAddress?: string | undefined,
-    city?: string | undefined,
-    state?: string | undefined,
-    zipCode?: string | undefined,
-    gender?: string | undefined
-  ) => {
-    setSection1Data({
-      fullName,
-      homePhone,
-      cellPhone,
-      email,
-      age,
-      dateOfBirth,
-      socialSecurityNumber,
-      mailingAddress,
-      city,
-      state,
-      zipCode,
-      gender,
-    });
   };
 
   const handleFormSection2Data = (
@@ -375,7 +351,7 @@ export default function PatientForm({ type }: Props) {
       section1Data.mailingAddress !== ''
     ) {
       TextFile();
-      setPatientDetailsButtonFlag(true)
+      setPatientDetailsButtonFlag(true);
       setAlertProps({
         open: true,
         severity: 'success',
@@ -659,11 +635,16 @@ export default function PatientForm({ type }: Props) {
                 <Grid container spacing={2} flexDirection={'row'}>
                   {type !== 'display' ? (
                     <>
-
+                      <Grid item className='collapsable-form-style'>
-                    <Grid item className='collapsable-form-style'>
+                        <FormLabel sx={{ marginLeft: '10px' }}>
-                      <FormLabel sx={{marginLeft:'10px'}}>  Signature:</FormLabel>
+                          {' '}
-                      <SignatureComponent signature={signature} setSignature={setSignature} />
+                          Signature:
-                    </Grid>
+                        </FormLabel>
+                        <SignatureComponent
+                          signature={signature}
+                          setSignature={setSignature}
+                        />
+                      </Grid>
 
                       <Grid item>
                         <FormLabel sx={{ margin: 0, padding: 0 }}>
@@ -708,37 +689,35 @@ export default function PatientForm({ type }: Props) {
               </Grid>
             </Grid>
             <Grid container flexDirection={'row-reverse'}>
-              {patientDetailsButtonFlag && type!=='display'?
+              {patientDetailsButtonFlag && type !== 'display' ? (
-            <Grid item>
+                <Grid item>
-                <Button
+                  <Button
-                  variant='contained'
+                    variant='contained'
-                  color='primary'
+                    color='primary'
-                  sx={{ margin: 5, width: '200px' }}
+                    sx={{ margin: 5, width: '200px' }}
-                  onClick={(e)=>{
+                    onClick={(e) => {}}
+                    component={Link}
+                    to='/view-details'
+                  >
+                    View Patient Details
+                  </Button>
+                </Grid>
+              ) : null}
 
-                  }}
+              {type == 'display' ? (
-                  component={Link}
+                <Grid item>
-                  to='/view-details'
+                  <Button
-                >
+                    variant='contained'
-                  View Patient Details
+                    color='primary'
-                </Button>
+                    sx={{ margin: 5, width: '200px' }}
-              </Grid>:null}
+                    onClick={(e) => {}}
-
+                    component={Link}
-              {type=='display'?
+                    to='/'
-            <Grid item>
+                  >
-                <Button
+                    New Patient Form
-                  variant='contained'
+                  </Button>
-                  color='primary'
+                </Grid>
-                  sx={{ margin: 5, width: '200px' }}
+              ) : null}
-                  onClick={(e)=>{
-                    
-                  }}
-                  component={Link}
-                  to='/'
-                >
-                  New Patient Form
-                </Button>
-              </Grid>:null}
 
               <Grid item>
                 <Button

src/Components/PatientForm/PersonalSection1.tsx

@@ -13,37 +13,10 @@ import {
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useEffect } from 'react';
-
+import { Patient } from '../Interface/Patient';
-interface Patient {
-  fullName: string;
-  homePhone: string;
-  cellPhone: string;
-  email: string;
-  age: number | string;
-  dateOfBirth: string;
-  socialSecurityNumber: string;
-  mailingAddress: string;
-  city: string;
-  state: string;
-  zipCode: string;
-  gender: string;
-}
 
 type Props = {
-  handleFormSection1Data: (
+  handleFormSection1Data: (patient: Patient) => void;
-    fullName?: string | undefined,
-    homePhone?: string | undefined,
-    cellPhone?: string | undefined,
-    email?: string | undefined,
-    age?: number | undefined | string,
-    dateOfBirth?: string | undefined,
-    socialSecurityNumber?: string | undefined,
-    mailingAddress?: string | undefined,
-    city?: string | undefined,
-    state?: string | undefined,
-    zipCode?: string | undefined,
-    gender?: string | undefined
-  ) => void;
   patientDataDiplay: any;
   type: string;
 };
@@ -54,41 +27,31 @@ export default function PersonalSection({
   type,
 }: Props) {
   const [birthDateValue, setBirthDateValue] = React.useState<any>();
-  const [patient, setPatient] = React.useState<any>({
+  const [patient, setPatient] = React.useState<Patient>({
     fullName: '',
-    fullNameError: false,
     homePhone: '',
     cellPhone: '',
-    cellPhoneError: false,
     email: '',
-    emailError: false,
     age: '',
-    ageError: false,
     dateOfBirth: birthDateValue,
     socialSecurityNumber: '',
     mailingAddress: '',
-    mailingAddressFalse: false,
     city: '',
     state: '',
     zipCode: '',
     gender: 'male',
   });
 
+  const [errors, setErrors] = React.useState<any>({
+    fullNameError: false,
+    cellPhoneError: false,
+    emailError: false,
+    ageError: false,
+    mailingAddressFalse: false,
+  });
+
   useEffect(() => {
-    handleFormSection1Data(
+    handleFormSection1Data(patient);
-      patient.fullName,
-      patient.homePhone,
-      patient.cellPhone,
-      patient.email,
-      patient.age,
-      birthDateValue,
-      patient.socialSecurityNumber,
-      patient.mailingAddress,
-      patient.city,
-      patient.state,
-      patient.zipCode,
-      patient.gender
-    );
   }, [patient]);
 
   return (
@@ -109,7 +72,9 @@ export default function PersonalSection({
             name='fullName'
             placeholder='Please enter your name'
             value={
-              type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.fullName
+                : patient.fullName
             }
             disabled={type == 'display'}
             onChange={(e) => {
@@ -120,20 +85,20 @@ export default function PersonalSection({
             }}
             onBlur={(e) => {
               if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   fullNameError: true,
                 }));
               } else {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   fullNameError: false,
                 }));
               }
             }}
             required
-            error={patient.fullNameError}
+            error={errors.fullNameError}
-            helperText={patient.fullNameError ? 'Please enter your name' : ''}
+            helperText={errors.fullNameError ? 'Please enter your name' : ''}
           />
         </Grid>
 
@@ -171,20 +136,20 @@ export default function PersonalSection({
             }}
             onBlur={(e) => {
               if (!/^\d{10}$/.test(e.target.value)) {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   cellPhoneError: true,
                 }));
               } else {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   cellPhoneError: false,
                 }));
               }
             }}
-            error={patient.cellPhoneError}
+            error={errors.cellPhoneError}
             helperText={
-              patient.cellPhoneError
+              errors.cellPhoneError
                 ? 'Please enter a valid 10-digit phone number'
                 : ''
             }
@@ -238,7 +203,11 @@ export default function PersonalSection({
             label='Email'
             name='email'
             placeholder='Please enter your email'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.email
+                : patient.email
+            }
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -248,20 +217,20 @@ export default function PersonalSection({
             }}
             onBlur={(e) => {
               if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   emailError: true,
                 }));
               } else {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   emailError: false,
                 }));
               }
             }}
-            error={patient.emailError}
+            error={errors.emailError}
             helperText={
-              patient.emailError ? 'Please enter a valid email address' : ''
+              errors.emailError ? 'Please enter a valid email address' : ''
             }
           />
         </Grid>
@@ -281,7 +250,11 @@ export default function PersonalSection({
             name='age'
             type='number'
             placeholder='Please enter your age'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.age
+                : patient.age
+            }
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -291,19 +264,19 @@ export default function PersonalSection({
             }}
             onBlur={(e) => {
               if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   ageError: true,
                 }));
               } else {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   ageError: false,
                 }));
               }
             }}
-            error={patient.ageError}
+            error={errors.ageError}
-            helperText={patient.ageError ? 'Please enter your age' : ''}
+            helperText={errors.ageError ? 'Please enter your age' : ''}
           />
         </Grid>
 
@@ -396,20 +369,20 @@ export default function PersonalSection({
             }}
             onBlur={(e) => {
               if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   mailingAddressError: true,
                 }));
               } else {
-                setPatient((prevValues: any) => ({
+                setErrors((prevValues: any) => ({
                   ...prevValues,
                   mailingAddressError: false,
                 }));
               }
             }}
-            error={patient.mailingAddressError}
+            error={errors.mailingAddressError}
             helperText={
-              patient.mailingAddressError
+              errors.mailingAddressError
                 ? 'Please enter your mailing address'
                 : ''
             }
@@ -429,7 +402,11 @@ export default function PersonalSection({
             variant='outlined'
             label='State'
             name='state'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.state
+                : patient.state
+            }
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -453,7 +430,11 @@ export default function PersonalSection({
             variant='outlined'
             label='City'
             name='city'
-            value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
+            value={
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.city
+                : patient.city
+            }
             disabled={type == 'display'}
             onChange={(e) => {
               setPatient((prevValues: any) => ({
@@ -478,7 +459,9 @@ export default function PersonalSection({
             label='Zip Code'
             name='zipCode'
             value={
-              type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
+              type == 'display'
+                ? patientDataDiplay && patientDataDiplay.zipCode
+                : patient.zipCode
             }
             disabled={type == 'display'}
             onChange={(e) => {
@@ -507,7 +490,9 @@ export default function PersonalSection({
             <RadioGroup
               aria-labelledby='demo-radio-buttons-group-label'
               defaultValue={
-                type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
+                type == 'display'
+                  ? patientDataDiplay && patientDataDiplay.gender
+                  : patient.gender
               }
               name='radio-buttons-group'
               onChange={(e) => {