sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored handle form submission function for first section

Browse Source
This commit is contained in:
vipeeshpavithran 2023-09-14 16:36:20 +05:30
parent 2e403624a8
commit 8419e26a4e
3 changed files with 120 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Components/Interface/Patient.tsx Normal file
View File

@ -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;
}

111
src/Components/PatientForm/PatientForm.tsx
View File

@ -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 = (
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
) => {
setSection1Data({
fullName,
homePhone,
cellPhone,
email,
age,
dateOfBirth,
socialSecurityNumber,
mailingAddress,
city,
state,
zipCode,
gender,
});
const handleFormSection1Data = (patient: Patient) => {
setSection1Data(patient);
};
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'>
<FormLabel sx={{marginLeft:'10px'}}> Signature:</FormLabel>
<SignatureComponent signature={signature} setSignature={setSignature} />
</Grid>
<Grid item className='collapsable-form-style'>
<FormLabel sx={{ marginLeft: '10px' }}>
{' '}
Signature:
</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'?
<Grid item>
<Button
variant='contained'
color='primary'
sx={{ margin: 5, width: '200px' }}
onClick={(e)=>{
}}
component={Link}
to='/view-details'
>
View Patient Details
</Button>
</Grid>:null}
{patientDetailsButtonFlag && type !== 'display' ? (
<Grid item>
<Button
variant='contained'
color='primary'
sx={{ margin: 5, width: '200px' }}
onClick={(e) => {}}
component={Link}
to='/view-details'
>
View Patient Details
</Button>
</Grid>
) : null}
{type=='display'?
<Grid item>
<Button
variant='contained'
color='primary'
sx={{ margin: 5, width: '200px' }}
onClick={(e)=>{
}}
component={Link}
to='/'
>
New Patient Form
</Button>
</Grid>:null}
{type == 'display' ? (
<Grid item>
<Button
variant='contained'
color='primary'
sx={{ margin: 5, width: '200px' }}
onClick={(e) => {}}
component={Link}
to='/'
>
New Patient Form
</Button>
</Grid>
) : null}
<Grid item>
<Button

137
src/Components/PatientForm/PersonalSection1.tsx
View File

@ -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';
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;
}
import { Patient } from '../Interface/Patient';
type Props = {
handleFormSection1Data: (
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;
handleFormSection1Data: (patient: Patient) => 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(
patient.fullName,
patient.homePhone,
patient.cellPhone,
patient.email,
patient.age,
birthDateValue,
patient.socialSecurityNumber,
patient.mailingAddress,
patient.city,
patient.state,
patient.zipCode,
patient.gender
);
handleFormSection1Data(patient);
}, [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}
helperText={patient.fullNameError ? 'Please enter your name' : ''}
error={errors.fullNameError}
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}
helperText={patient.ageError ? 'Please enter your age' : ''}
error={errors.ageError}
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) => {