From 9a28fe74832f999948bb44bfd7dbbf1463311794 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Wed, 25 Oct 2023 23:42:15 -0500 Subject: [PATCH 01/32] feat: context wrapper skeleton and route --- .../components/common/GuestApplicationContext.tsx | 14 ++++++++++++++ app/src/components/layout/GuestDashboardLayout.tsx | 1 + app/src/main.tsx | 5 +++++ 3 files changed, 20 insertions(+) create mode 100644 app/src/components/common/GuestApplicationContext.tsx diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx new file mode 100644 index 00000000..b79e13c8 --- /dev/null +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -0,0 +1,14 @@ +import {Formik} from 'formik'; +import {Outlet} from 'react-router-dom'; + +export const initialValues = { + null: '', +}; + +export const GuestApplicationContext = () => { + return ( + console.log('hello')}> + + + ); +}; diff --git a/app/src/components/layout/GuestDashboardLayout.tsx b/app/src/components/layout/GuestDashboardLayout.tsx index 219d94aa..d69cdfc7 100644 --- a/app/src/components/layout/GuestDashboardLayout.tsx +++ b/app/src/components/layout/GuestDashboardLayout.tsx @@ -16,6 +16,7 @@ const navItems = [ }, {title: 'My Contacts', icon: , href: '/guest/contacts'}, {title: 'Settings', icon: , href: '/guest/settings'}, + {title: 'Application', icon: , href: '/guest/application'}, ]; export const GuestDashboardLayout = () => { diff --git a/app/src/main.tsx b/app/src/main.tsx index f77dadc3..31de26ac 100644 --- a/app/src/main.tsx +++ b/app/src/main.tsx @@ -36,6 +36,7 @@ import {AccountVerification} from './views/AccountVerification'; import {AppLayout, Header} from './components/common'; import {ResetPasswordContext} from './components/authentication/ResetPasswordContext'; import {GuestDashboardLayout} from './components/layout'; +import {GuestApplicationContext} from './components/common/GuestApplicationContext'; function Profile() { return
Hello from profile
; @@ -120,6 +121,10 @@ function HuuApp() { } /> } /> } /> + } + > From f1487f8e0ed66540ca4036a63c4701445e3b38eb Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Wed, 25 Oct 2023 23:53:44 -0500 Subject: [PATCH 02/32] feat: initial values of questions --- .../common/GuestApplicationContext.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index b79e13c8..2871350e 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -2,7 +2,29 @@ import {Formik} from 'formik'; import {Outlet} from 'react-router-dom'; export const initialValues = { - null: '', + fullName: '', + dateOfBirth: '', + gender: '', + email: '', + phoneNumber: '', + contactPrefrence: ['Phone', 'Email'], + nameOfGuest: [], + typeOfPet: [], + currentlyEmployed: ['Yes', 'No'], + employmentSearch: '', + employmentDescription: '', + educationEnrollment: ['Yes', 'No'], + educationEnrollmentSearch: '', + educationProgramName: '', + multilingual: ['Yes', 'No'], + spokenLanguages: '', + cigarettesUse: ['Yes', 'No'], + alcoholUse: ['Yes', 'No'], + otherSubstanceUse: ['Yes', 'No'], + mentalIllness: ['Yes', 'No'], + programGoals: '', + hostRelationshipGoal: '', + potentialChallenges: '', }; export const GuestApplicationContext = () => { From 8dc095927a616199362c9418641450e2dbd41cfd Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Fri, 3 Nov 2023 23:44:30 -0500 Subject: [PATCH 03/32] feat: button layout made to respond depending on the form page --- .../common/GuestApplicationButtons.tsx | 146 ++++++++++++++++++ .../common/GuestApplicationContext.tsx | 56 +++++-- 2 files changed, 191 insertions(+), 11 deletions(-) create mode 100644 app/src/components/common/GuestApplicationButtons.tsx diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx new file mode 100644 index 00000000..52d8100b --- /dev/null +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -0,0 +1,146 @@ +import {Box, Button} from '@mui/material'; +import {useNavigate} from 'react-router-dom'; + +export default function Buttons({ + step, + setStep, +}: { + step: number; + setStep: (setStep: number) => void; +}) { + const navigate = useNavigate(); + + function saveData() { + //add logic to save current data + console.log('data saving features not implemented'); + } + function nextStep() { + setStep(step + 1); + //requires logic to stop user from continuing until data is valid + } + function prevStep() { + if (step > 1) { + setStep(step - 1); + } else { + navigate('/guest'); + } + } + function saveAndExit() { + saveData(); + navigate('/guest'); + } + function nextStepAndSave() { + saveData(); + nextStep(); + //requires logic to save the current data inputed, use reusable function + console.log('saved and going next step feature not made yet'); + } + + return ( + + {step == 1 && ( + + + + + )} + {step == 2 && ( + + + + + )} + {step > 2 && step <= 10 && ( + + + + + + )} + {step > 10 && ( + + + + + )} + {step == 12 && ( + + + + + )} + + ); +} diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index 2871350e..534f7c25 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -1,5 +1,33 @@ import {Formik} from 'formik'; +import {useState} from 'react'; import {Outlet} from 'react-router-dom'; +import FormButtons from './GuestApplicationButtons'; + +export interface formInputValues { + fullName: string; + dateOfBirth: string; + gender: string; + email: string; + phoneNumber: string; + contactPrefrence: string; + nameOfGuest: Array; + typeOfPet: Array; + currentlyEmployed: string; + employmentSearch: string; + employmentDescription: string; + educationEnrollment: string; + educationEnrollmentSearch: string; + educationProgramName: string; + multilingual: string; + spokenLanguages: string; + cigarettesUse: string; + alcoholUse: string; + otherSubstanceUse: string; + mentalIllness: string; + programGoals: string; + hostRelationshipGoal: string; + potentialChallenges: string; +} export const initialValues = { fullName: '', @@ -7,30 +35,36 @@ export const initialValues = { gender: '', email: '', phoneNumber: '', - contactPrefrence: ['Phone', 'Email'], - nameOfGuest: [], - typeOfPet: [], - currentlyEmployed: ['Yes', 'No'], + contactPrefrence: '', + nameOfGuest: [''], + typeOfPet: [''], + currentlyEmployed: '', employmentSearch: '', employmentDescription: '', - educationEnrollment: ['Yes', 'No'], + educationEnrollment: '', educationEnrollmentSearch: '', educationProgramName: '', - multilingual: ['Yes', 'No'], + multilingual: '', spokenLanguages: '', - cigarettesUse: ['Yes', 'No'], - alcoholUse: ['Yes', 'No'], - otherSubstanceUse: ['Yes', 'No'], - mentalIllness: ['Yes', 'No'], + cigarettesUse: '', + alcoholUse: '', + otherSubstanceUse: '', + mentalIllness: '', programGoals: '', hostRelationshipGoal: '', potentialChallenges: '', }; export const GuestApplicationContext = () => { + const [step, setStep] = useState(1); + return ( - console.log('hello')}> + console.log('Parent wrapper submit')} + > + ); }; From e52d7f226a7343c4f8dabbc3b9fdcbeacc7561de Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Wed, 8 Nov 2023 01:29:58 -0600 Subject: [PATCH 04/32] refrac: made buttons individual components --- .../common/GuestApplicationButtons.tsx | 170 +++++------------- .../common/GuestApplicationContext.tsx | 4 +- 2 files changed, 48 insertions(+), 126 deletions(-) diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index 52d8100b..a6f75a79 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -1,23 +1,46 @@ -import {Box, Button} from '@mui/material'; +import {Button} from '@mui/material'; import {useNavigate} from 'react-router-dom'; -export default function Buttons({ +const navigate = useNavigate(); + +function saveData() { + //add logic to save current data + console.log('data saving features not implemented'); +} + +export const nextStepButton = ({ step, setStep, }: { step: number; setStep: (setStep: number) => void; -}) { - const navigate = useNavigate(); - - function saveData() { - //add logic to save current data - console.log('data saving features not implemented'); - } - function nextStep() { +}) => { + function nextStepAndSave() { + saveData(); setStep(step + 1); - //requires logic to stop user from continuing until data is valid + //requires logic to save the current data inputed, use reusable function + console.log('saved and going next step feature not made yet'); } + + return ( + + ); +}; + +export const prevStepButton = ({ + step, + setStep, +}: { + step: number; + setStep: (setStep: number) => void; +}) => { function prevStep() { if (step > 1) { setStep(step - 1); @@ -25,122 +48,21 @@ export default function Buttons({ navigate('/guest'); } } + return ( + + ); +}; + +export const saveAndExitButton = () => { function saveAndExit() { saveData(); navigate('/guest'); } - function nextStepAndSave() { - saveData(); - nextStep(); - //requires logic to save the current data inputed, use reusable function - console.log('saved and going next step feature not made yet'); - } - return ( - - {step == 1 && ( - - - - - )} - {step == 2 && ( - - - - - )} - {step > 2 && step <= 10 && ( - - - - - - )} - {step > 10 && ( - - - - - )} - {step == 12 && ( - - - - - )} - + ); -} +}; diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index 534f7c25..3e8c54dc 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -1,7 +1,6 @@ import {Formik} from 'formik'; import {useState} from 'react'; import {Outlet} from 'react-router-dom'; -import FormButtons from './GuestApplicationButtons'; export interface formInputValues { fullName: string; @@ -62,9 +61,10 @@ export const GuestApplicationContext = () => { console.log('Parent wrapper submit')} + step={step} + setStep={setStep} > - ); }; From b008fe1667fb593b031074beca894162a733ede4 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Thu, 9 Nov 2023 00:19:50 -0600 Subject: [PATCH 05/32] refrac: buttons needed navigation moved inside the component --- .../components/common/GuestApplicationButtons.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index a6f75a79..b2f797f7 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -1,14 +1,12 @@ import {Button} from '@mui/material'; import {useNavigate} from 'react-router-dom'; -const navigate = useNavigate(); - function saveData() { //add logic to save current data console.log('data saving features not implemented'); } -export const nextStepButton = ({ +export const NextStepButton = ({ step, setStep, }: { @@ -16,10 +14,9 @@ export const nextStepButton = ({ setStep: (setStep: number) => void; }) => { function nextStepAndSave() { - saveData(); setStep(step + 1); - //requires logic to save the current data inputed, use reusable function console.log('saved and going next step feature not made yet'); + console.log(step); } return ( @@ -34,19 +31,21 @@ export const nextStepButton = ({ ); }; -export const prevStepButton = ({ +export const PrevStepButton = ({ step, setStep, }: { step: number; setStep: (setStep: number) => void; }) => { + const navigate = useNavigate(); function prevStep() { if (step > 1) { setStep(step - 1); } else { navigate('/guest'); } + console.log(step); } return ( ); @@ -48,7 +43,12 @@ export const PrevStepButton = ({ console.log(step); } return ( - ); @@ -62,7 +62,12 @@ export const SaveAndExitButton = () => { console.log('save and exit feature button'); } return ( - ); From c79646f42db22163e318602a3f361a8e2f7753b2 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sat, 11 Nov 2023 01:32:08 -0600 Subject: [PATCH 08/32] feat: implemented progress bar tracker --- app/src/utils/ProgressBar.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 app/src/utils/ProgressBar.tsx diff --git a/app/src/utils/ProgressBar.tsx b/app/src/utils/ProgressBar.tsx new file mode 100644 index 00000000..a7daa8d6 --- /dev/null +++ b/app/src/utils/ProgressBar.tsx @@ -0,0 +1,30 @@ +import {styled} from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import LinearProgress, { + linearProgressClasses, +} from '@mui/material/LinearProgress'; + +const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({ + height: 10, + borderRadius: 5, + [`&.${linearProgressClasses.colorPrimary}`]: { + backgroundColor: + theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + }, + [`& .${linearProgressClasses.bar}`]: { + borderRadius: 5, + backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8', + }, +})); + +export default function ProgressBar({ + progressBarValue, +}: { + progressBarValue: number; +}) { + return ( + + + + ); +} From c06df926788862167c02692378871a06d88759bf Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sat, 11 Nov 2023 22:05:34 -0600 Subject: [PATCH 09/32] style: color matching progress bar and buttons --- app/src/components/common/GuestApplicationButtons.tsx | 2 +- app/src/utils/ProgressBar.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index 21643d6b..41aa967a 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -47,7 +47,7 @@ export const PrevStepButton = ({ size="medium" variant="outlined" onClick={prevStep} - sx={{color: 'black'}} + sx={{color: 'black', border: 2, borderColor: 'primary.main'}} > Back diff --git a/app/src/utils/ProgressBar.tsx b/app/src/utils/ProgressBar.tsx index a7daa8d6..ffa4b1ff 100644 --- a/app/src/utils/ProgressBar.tsx +++ b/app/src/utils/ProgressBar.tsx @@ -8,12 +8,11 @@ const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({ height: 10, borderRadius: 5, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: - theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800], + backgroundColor: theme.palette.grey[300], }, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5, - backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8', + backgroundColor: theme.palette.primary, }, })); From 04a0e861b0a42f3ad6c37a6aac955d47b64f1670 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sat, 11 Nov 2023 22:13:13 -0600 Subject: [PATCH 10/32] style: guest context container styling --- app/src/components/common/GuestApplicationContext.tsx | 9 ++++++++- app/src/{utils => components/common}/ProgressBar.tsx | 0 2 files changed, 8 insertions(+), 1 deletion(-) rename app/src/{utils => components/common}/ProgressBar.tsx (100%) diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index 3e8c54dc..a872c954 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -1,6 +1,8 @@ +import {Stack} from '@mui/material'; import {Formik} from 'formik'; import {useState} from 'react'; import {Outlet} from 'react-router-dom'; +import ProgressBar from './ProgressBar'; export interface formInputValues { fullName: string; @@ -55,7 +57,9 @@ export const initialValues = { }; export const GuestApplicationContext = () => { + const TOTALPAGES = 10; const [step, setStep] = useState(1); + const progressBarValue = (step / TOTALPAGES) * 100; return ( { step={step} setStep={setStep} > - + + + + ); }; diff --git a/app/src/utils/ProgressBar.tsx b/app/src/components/common/ProgressBar.tsx similarity index 100% rename from app/src/utils/ProgressBar.tsx rename to app/src/components/common/ProgressBar.tsx From 2abec2959d0ea11709f717b0c3a6a3b335b887d8 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sat, 11 Nov 2023 22:59:34 -0600 Subject: [PATCH 11/32] refrac: made schema into an array to fit validation based on step --- app/src/utils/GuestApplicationSchema.ts | 123 ++++++++++++++---------- 1 file changed, 71 insertions(+), 52 deletions(-) diff --git a/app/src/utils/GuestApplicationSchema.ts b/app/src/utils/GuestApplicationSchema.ts index b0f58f6d..5d9d6e7c 100644 --- a/app/src/utils/GuestApplicationSchema.ts +++ b/app/src/utils/GuestApplicationSchema.ts @@ -1,57 +1,76 @@ import {array, date, object, string} from 'yup'; -export const GuestApplicationSchema = object({ - fullName: string().required(), - dateOfBirth: date() - .required() - .default(() => new Date()), - gender: string().required(), - email: string().email(), - phoneNumber: string() - .required() - .matches( - /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/, - 'Phone number is not valid.', +export const GuestApplicationSchema = [ + //validation is based on step + object({ + fullName: string().required(), + dateOfBirth: date() + .required() + .default(() => new Date()), + gender: string().required(), + }), + object({ + email: string().email(), + phoneNumber: string() + .required() + .matches( + /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/, + 'Phone number is not valid.', + ), + contactPrefrence: string().required(), + }), + object({ + nameOfGuestArray: array().of( + object({ + nameOfGuest: string().required('Name is Required'), + }), ), - contactPrefrence: string().required(), - nameOfGuestArray: array().of( - object({ - nameOfGuest: string().required('Name is Required'), + typeOfPetArray: array().of( + object({ + typeOfPet: string().required('Pet Type is Required'), + }), + ), + }), + object({ + currentlyEmployed: string().required(), + employmentSearch: string().when('currentlyEmployed', { + is: (currentlyEmployed: string) => currentlyEmployed === 'No', + then: string().required(), + }), + employmentDescription: string().when('currentlyEmployed', { + is: (currentlyEmployed: string) => currentlyEmployed === 'Yes', + then: string().required(), + }), + }), + object({ + educationEnrollment: string().required(), + educationEnrollmentSearch: string().when('educationEnrollment', { + is: (educationEnrollment: string) => educationEnrollment === 'No', + then: string().required(), }), - ), - typeOfPetArray: array().of( - object({ - typeOfPet: string().required('Pet Type is Required'), + educationProgramName: string().when('educationEnrollment', { + is: (educationEnrollment: string) => educationEnrollment === 'Yes', + then: string().required(), }), - ), - currentlyEmployed: string().required(), - employmentSearch: string().when('currentlyEmployed', { - is: (currentlyEmployed: string) => currentlyEmployed === 'No', - then: string().required(), - }), - employmentDescription: string().when('currentlyEmployed', { - is: (currentlyEmployed: string) => currentlyEmployed === 'Yes', - then: string().required(), - }), - educationEnrollment: string().required(), - educationEnrollmentSearch: string().when('educationEnrollment', { - is: (educationEnrollment: string) => educationEnrollment === 'No', - then: string().required(), - }), - educationProgramName: string().when('educationEnrollment', { - is: (educationEnrollment: string) => educationEnrollment === 'Yes', - then: string().required(), - }), - multilingual: string().required(), - spokenLanguages: string().when('multilingual', { - is: (multilingual: string) => multilingual === 'Yes', - then: string().required(), - }), - cigarettesUse: string().required(), - alcoholUse: string().required(), - otherSubstanceUse: string().required(), - mentalIllness: string().required(), - programGoals: string().required(), - hostRelationshipGoal: string().required(), - potentialChallenges: string().required(), -}); + }), + object({ + multilingual: string().required(), + spokenLanguages: string().when('multilingual', { + is: (multilingual: string) => multilingual === 'Yes', + then: string().required(), + }), + }), + object({ + cigarettesUse: string().required(), + alcoholUse: string().required(), + otherSubstanceUse: string().required(), + }), + object({ + mentalIllness: string().required(), + }), + object({ + programGoals: string().required(), + hostRelationshipGoal: string().required(), + potentialChallenges: string().required(), + }), +]; From 25f0a25f03ce53ddd79ec4cf4621c8b7bfd27647 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sat, 11 Nov 2023 23:25:34 -0600 Subject: [PATCH 12/32] feat: error messages added to schema validation along with better date validation --- .../common/GuestApplicationContext.tsx | 12 +++++ app/src/utils/GuestApplicationSchema.ts | 45 +++++++++---------- 2 files changed, 34 insertions(+), 23 deletions(-) diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index a872c954..7afab8bc 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -3,6 +3,12 @@ import {Formik} from 'formik'; import {useState} from 'react'; import {Outlet} from 'react-router-dom'; import ProgressBar from './ProgressBar'; +import { + NextStepButton, + PrevStepButton, + SaveAndExitButton, +} from './GuestApplicationButtons'; +import {GuestApplicationSchema} from '../../utils/GuestApplicationSchema'; export interface formInputValues { fullName: string; @@ -67,10 +73,16 @@ export const GuestApplicationContext = () => { onSubmit={() => console.log('Parent wrapper submit')} step={step} setStep={setStep} + validationSchema={GuestApplicationSchema[step - 1]} //schema array is index of 0 hence -1 > + + + + + ); diff --git a/app/src/utils/GuestApplicationSchema.ts b/app/src/utils/GuestApplicationSchema.ts index 5d9d6e7c..4246f729 100644 --- a/app/src/utils/GuestApplicationSchema.ts +++ b/app/src/utils/GuestApplicationSchema.ts @@ -3,21 +3,20 @@ import {array, date, object, string} from 'yup'; export const GuestApplicationSchema = [ //validation is based on step object({ - fullName: string().required(), - dateOfBirth: date() - .required() - .default(() => new Date()), - gender: string().required(), + fullName: string().required('Name is required'), + dateOfBirth: date().required('Date of Birth is required').max(new Date()), + gender: string().required('Select an option'), }), object({ - email: string().email(), + email: string().email().required('Email is required'), phoneNumber: string() .required() .matches( /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/, 'Phone number is not valid.', - ), - contactPrefrence: string().required(), + ) + .required('Phone number is required'), + contactPrefrence: string().required('Select an option'), }), object({ nameOfGuestArray: array().of( @@ -32,45 +31,45 @@ export const GuestApplicationSchema = [ ), }), object({ - currentlyEmployed: string().required(), + currentlyEmployed: string().required('Select an option'), employmentSearch: string().when('currentlyEmployed', { is: (currentlyEmployed: string) => currentlyEmployed === 'No', - then: string().required(), + then: string().required('Field is required'), }), employmentDescription: string().when('currentlyEmployed', { is: (currentlyEmployed: string) => currentlyEmployed === 'Yes', - then: string().required(), + then: string().required('Field is required'), }), }), object({ - educationEnrollment: string().required(), + educationEnrollment: string().required('Select an option'), educationEnrollmentSearch: string().when('educationEnrollment', { is: (educationEnrollment: string) => educationEnrollment === 'No', - then: string().required(), + then: string().required('Field is required'), }), educationProgramName: string().when('educationEnrollment', { is: (educationEnrollment: string) => educationEnrollment === 'Yes', - then: string().required(), + then: string().required('Field is required'), }), }), object({ - multilingual: string().required(), + multilingual: string().required('Select an option'), spokenLanguages: string().when('multilingual', { is: (multilingual: string) => multilingual === 'Yes', - then: string().required(), + then: string().required('Field is required'), }), }), object({ - cigarettesUse: string().required(), - alcoholUse: string().required(), - otherSubstanceUse: string().required(), + cigarettesUse: string().required('Select an option'), + alcoholUse: string().required('Select an option'), + otherSubstanceUse: string().required('Select an option'), }), object({ - mentalIllness: string().required(), + mentalIllness: string().required('Select an option'), }), object({ - programGoals: string().required(), - hostRelationshipGoal: string().required(), - potentialChallenges: string().required(), + programGoals: string().required('Field is required'), + hostRelationshipGoal: string().required('Field is required'), + potentialChallenges: string().required('Field is required'), }), ]; From 8c277076e74b2384af996cd4e4181d76a290faa6 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Sun, 12 Nov 2023 00:03:19 -0600 Subject: [PATCH 13/32] feat: added prop to navigate user to intended page based on next and back button --- .../common/GuestApplicationButtons.tsx | 21 ++++++++++++++----- .../common/GuestApplicationContext.tsx | 13 ++++++++++-- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index 41aa967a..9b39e2f6 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -9,14 +9,24 @@ function saveData() { export const NextStepButton = ({ step, setStep, + TOTALPAGES, + nextPage, }: { step: number; setStep: (setStep: number) => void; + TOTALPAGES: number; + nextPage: string; }) => { + const navigate = useNavigate(); + const lastPage = TOTALPAGES - 1; function nextStepAndSave() { - setStep(step + 1); - console.log('saved and going next step feature not made yet'); - console.log(step); + saveData(); + if (step < lastPage) { + navigate(nextPage); + setStep(step + 1); + } else if (step === lastPage) { + navigate('/guest'); //change to review file + } } return ( @@ -29,18 +39,20 @@ export const NextStepButton = ({ export const PrevStepButton = ({ step, setStep, + prevPage, }: { step: number; setStep: (setStep: number) => void; + prevPage: string; }) => { const navigate = useNavigate(); function prevStep() { if (step > 1) { setStep(step - 1); + navigate(prevPage); } else { navigate('/guest'); } - console.log(step); } return ( ); @@ -56,6 +61,7 @@ export const PrevStepButton = ({ } return ( ); }; + +export const navButtons = () => { + return ( + + + + + + ); +}; From 0e0cb4ebb88d7c9733416ac6b4b094de4a3f89b6 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Mon, 13 Nov 2023 23:53:01 -0600 Subject: [PATCH 16/32] feat: navButtons now one file --- .../common/GuestApplicationButtons.tsx | 102 +++++------------- 1 file changed, 25 insertions(+), 77 deletions(-) diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index baba74ed..2684f704 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -1,112 +1,60 @@ import {Button, Stack} from '@mui/material'; import {useNavigate} from 'react-router-dom'; -function saveData() { - //add logic to save current data - console.log('data saving features not implemented'); -} - -export const NextStepButton = ({ +export const NavButtons = ({ step, setStep, TOTALPAGES, - nextPage, }: { step: number; setStep: (setStep: number) => void; TOTALPAGES: number; - nextPage: string; }) => { + const stepToRouteMapping: any = { + 1: '', + 2: 'tester2', + }; const navigate = useNavigate(); const lastPage = TOTALPAGES - 1; - function nextStepAndSave() { + + function saveData() { + //add logic to save current data + console.log('data saving features not implemented'); + } + + function nextStep() { saveData(); - if (step < lastPage) { - navigate(nextPage); - setStep(step + 1); - } else if (step === lastPage) { - navigate('/guest'); //change to review file + const newStep = step + 1; + if (newStep < lastPage) { + setStep(newStep); + navigate(stepToRouteMapping[newStep]); + } else if (newStep === lastPage) { + navigate('/guest'); // change to review file } } - - return ( - - ); -}; - -export const PrevStepButton = ({ - step, - setStep, - prevPage, -}: { - step: number; - setStep: (setStep: number) => void; - prevPage: string; -}) => { - const navigate = useNavigate(); function prevStep() { + const newStep = step - 1; if (step > 1) { - setStep(step - 1); - navigate(prevPage); + setStep(newStep); + navigate(stepToRouteMapping[newStep]); } else { navigate('/guest'); } } - return ( - - ); -}; - -export const SaveAndExitButton = () => { - const navigate = useNavigate(); function saveAndExit() { saveData(); navigate('/guest'); } return ( - - ); -}; - -export const navButtons = () => { - return ( - - + + */} + + + + + ); +}; + +/* try { + await forgotPassword({email}).unwrap(); + navigate('code'); + } catch (err) { + if (isFetchBaseQueryError(err)) { + // you can access all properties of `FetchBaseQueryError` here + const errMsg = err.data.message; + setErrorMessage(errMsg); + } else if (isErrorWithMessage(err)) { + // you can access a string 'message' property here + setErrorMessage(err.message); + } + } */ diff --git a/app/src/views/GuestAppFormTester2.tsx b/app/src/views/GuestAppFormTester2.tsx new file mode 100644 index 00000000..0c5ad325 --- /dev/null +++ b/app/src/views/GuestAppFormTester2.tsx @@ -0,0 +1,89 @@ +import { + FormControlLabel, + FormLabel, + Radio, + RadioGroup, + Stack, + TextField, + Typography, +} from '@mui/material'; +import {useFormikContext} from 'formik'; +import {formInputValues} from '../components/common/GuestApplicationContext'; +import {FormContainer} from '../components/authentication'; + +export const Tester2 = () => { + const { + values: {email, phoneNumber, contactPrefrence}, + validateForm, + setFieldTouched, + handleChange, + handleBlur, + errors, + touched, + } = useFormikContext(); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + const formErrors = await validateForm(); + if (formErrors.email) { + setFieldTouched('email', true); + return; + } + }; + + return ( + + + Forgot Password + + + + + Contact Preference + } label="Phone" /> + } label="Email" /> + + + + + ); +}; From 27f79c4f1d706fe81eecd63d29c9124f697745be Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Thu, 30 Nov 2023 21:04:43 -0600 Subject: [PATCH 20/32] style: buttons stay at teh bottom of screen --- .../common/GuestApplicationContext.tsx | 19 ++- app/src/main.tsx | 10 +- app/src/views/GuestAppFormTest1.tsx | 122 ------------------ app/src/views/GuestAppFormTester2.tsx | 89 ------------- 4 files changed, 13 insertions(+), 227 deletions(-) delete mode 100644 app/src/views/GuestAppFormTest1.tsx delete mode 100644 app/src/views/GuestAppFormTester2.tsx diff --git a/app/src/components/common/GuestApplicationContext.tsx b/app/src/components/common/GuestApplicationContext.tsx index 2076a66e..77c3b2d0 100644 --- a/app/src/components/common/GuestApplicationContext.tsx +++ b/app/src/components/common/GuestApplicationContext.tsx @@ -1,4 +1,4 @@ -import {Stack} from '@mui/material'; +import {Box, Stack} from '@mui/material'; import {Formik} from 'formik'; import {useEffect, useState} from 'react'; import {Outlet} from 'react-router-dom'; @@ -34,7 +34,6 @@ export interface formInputValues { } export const stepToRouteMapping: {[key: number]: string} = { 1: '', - 2: 'tester2', }; export const initialValues = { fullName: '', @@ -83,16 +82,16 @@ export const GuestApplicationContext = () => { onSubmit={() => console.log('Parent wrapper submit')} validationSchema={GuestApplicationSchema[step - 1]} > - + - + @@ -102,7 +101,7 @@ export const GuestApplicationContext = () => { stepToRouteMapping={stepToRouteMapping} /> - + ); }; diff --git a/app/src/main.tsx b/app/src/main.tsx index cee562ad..8ab975d6 100644 --- a/app/src/main.tsx +++ b/app/src/main.tsx @@ -40,8 +40,6 @@ import { GuestDashboardLayout, } from './components/layout'; import {GuestApplicationContext} from './components/common/GuestApplicationContext'; -import {Tester1} from './views/GuestAppFormTest1'; -import {Tester2} from './views/GuestAppFormTester2'; function Profile() { return
Hello from profile
; @@ -127,10 +125,10 @@ function HuuApp() { } /> } /> } /> - }> - } /> - } /> - + } + > diff --git a/app/src/views/GuestAppFormTest1.tsx b/app/src/views/GuestAppFormTest1.tsx deleted file mode 100644 index f65bcc70..00000000 --- a/app/src/views/GuestAppFormTest1.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { - FormControl, - InputLabel, - MenuItem, - Select, - Stack, - TextField, - Typography, -} from '@mui/material'; -import {useFormikContext} from 'formik'; -import { - formInputValues, - /* stepContext, */ -} from '../components/common/GuestApplicationContext'; -import {FormContainer} from '../components/authentication'; - -export const Tester1 = () => { - const { - values: {fullName, dateOfBirth, gender}, - handleChange, - handleBlur, - errors, - touched, - } = useFormikContext(); - - return ( - - - Forgot Password - - - - - Gender - - - - {/* - - */} - - - - - ); -}; - -/* try { - await forgotPassword({email}).unwrap(); - navigate('code'); - } catch (err) { - if (isFetchBaseQueryError(err)) { - // you can access all properties of `FetchBaseQueryError` here - const errMsg = err.data.message; - setErrorMessage(errMsg); - } else if (isErrorWithMessage(err)) { - // you can access a string 'message' property here - setErrorMessage(err.message); - } - } */ diff --git a/app/src/views/GuestAppFormTester2.tsx b/app/src/views/GuestAppFormTester2.tsx deleted file mode 100644 index 0c5ad325..00000000 --- a/app/src/views/GuestAppFormTester2.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { - FormControlLabel, - FormLabel, - Radio, - RadioGroup, - Stack, - TextField, - Typography, -} from '@mui/material'; -import {useFormikContext} from 'formik'; -import {formInputValues} from '../components/common/GuestApplicationContext'; -import {FormContainer} from '../components/authentication'; - -export const Tester2 = () => { - const { - values: {email, phoneNumber, contactPrefrence}, - validateForm, - setFieldTouched, - handleChange, - handleBlur, - errors, - touched, - } = useFormikContext(); - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - const formErrors = await validateForm(); - if (formErrors.email) { - setFieldTouched('email', true); - return; - } - }; - - return ( - - - Forgot Password - - - - - Contact Preference - } label="Phone" /> - } label="Email" /> - - - - - ); -}; From 2a9e5042009db6ce614f30579f26036a74941346 Mon Sep 17 00:00:00 2001 From: Jose Padilla Date: Fri, 12 Jan 2024 15:53:24 -0600 Subject: [PATCH 21/32] refrac: moved button logic to parent component --- app/package-lock.json | 183 ++---------------- .../common/GuestApplicationButtons.tsx | 48 +---- .../common/GuestApplicationContext.tsx | 37 +++- app/src/main.tsx | 10 +- app/src/views/GuestAppFormTest1.tsx | 93 +++++++++ app/src/views/GuestAppFormTester2.tsx | 89 +++++++++ package-lock.json | 6 + 7 files changed, 250 insertions(+), 216 deletions(-) create mode 100644 app/src/views/GuestAppFormTest1.tsx create mode 100644 app/src/views/GuestAppFormTester2.tsx create mode 100644 package-lock.json diff --git a/app/package-lock.json b/app/package-lock.json index dee4ec6c..0731677f 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -209,6 +209,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", + "dev": true, "dependencies": { "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", @@ -349,6 +350,7 @@ "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -369,6 +371,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, "dependencies": { "@babel/template": "^7.22.15", "@babel/types": "^7.23.0" @@ -592,6 +595,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -2089,6 +2093,7 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.22.13", "@babel/parser": "^7.22.15", @@ -2102,6 +2107,7 @@ "version": "7.23.2", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.22.13", "@babel/generator": "^7.23.0", @@ -3155,34 +3161,6 @@ "node": ">=6.0.0" } }, - "node_modules/@jridgewell/source-map": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", - "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.0", - "@jridgewell/trace-mapping": "^0.3.9" - } - }, - "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", - "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "@jridgewell/set-array": "^1.0.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", @@ -17323,13 +17301,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/openapi-types": { - "version": "12.0.2", - "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.0.2.tgz", - "integrity": "sha512-GuTo7FyZjOIWVhIhQSWJVaws6A82sWIGyQogxxYBYKZ0NBdyP2CYSIgOwFfSB+UVoPExk/YzFpyYitHS8KVZtA==", - "dev": true, - "peer": true - }, "node_modules/optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -20943,26 +20914,6 @@ "node": ">=0.10.0" } }, - "node_modules/terser": { - "version": "5.14.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz", - "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "@jridgewell/source-map": "^0.3.2", - "acorn": "^8.5.0", - "commander": "^2.20.0", - "source-map-support": "~0.5.20" - }, - "bin": { - "terser": "bin/terser" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/terser-webpack-plugin": { "version": "1.4.5", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", @@ -21215,37 +21166,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/terser/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true, - "optional": true, - "peer": true - }, - "node_modules/terser/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/terser/node_modules/source-map-support": { - "version": "0.5.21", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", - "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, "node_modules/test-exclude": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", @@ -23717,6 +23637,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", + "dev": true, "requires": { "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", @@ -23830,7 +23751,8 @@ "@babel/helper-environment-visitor": { "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", - "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==" + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true }, "@babel/helper-explode-assignable-expression": { "version": "7.18.6", @@ -23845,6 +23767,7 @@ "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, "requires": { "@babel/template": "^7.22.15", "@babel/types": "^7.23.0" @@ -24007,7 +23930,8 @@ "@babel/parser": { "version": "7.23.0", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==" + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "dev": true }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.18.6", @@ -25014,6 +24938,7 @@ "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "dev": true, "requires": { "@babel/code-frame": "^7.22.13", "@babel/parser": "^7.22.15", @@ -25024,6 +24949,7 @@ "version": "7.23.2", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, "requires": { "@babel/code-frame": "^7.22.13", "@babel/generator": "^7.23.0", @@ -25736,33 +25662,6 @@ "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "dev": true }, - "@jridgewell/source-map": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", - "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "@jridgewell/gen-mapping": "^0.3.0", - "@jridgewell/trace-mapping": "^0.3.9" - }, - "dependencies": { - "@jridgewell/gen-mapping": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", - "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "@jridgewell/set-array": "^1.0.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" - } - } - } - }, "@jridgewell/sourcemap-codec": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", @@ -27664,8 +27563,7 @@ "version": "7.4.6", "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.4.6.tgz", "integrity": "sha512-DSq8l9FDocUF1ooVI+TF83pddj1LynE/Hv0/y8XZhc3IgJ/HkuOQuUmfz29ezgfAi9gFYUR8raTIBi3/xdoRmw==", - "dev": true, - "requires": {} + "dev": true }, "@storybook/router": { "version": "6.5.9", @@ -36320,13 +36218,6 @@ "mimic-fn": "^2.1.0" } }, - "openapi-types": { - "version": "12.0.2", - "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.0.2.tgz", - "integrity": "sha512-GuTo7FyZjOIWVhIhQSWJVaws6A82sWIGyQogxxYBYKZ0NBdyP2CYSIgOwFfSB+UVoPExk/YzFpyYitHS8KVZtA==", - "dev": true, - "peer": true - }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -39182,50 +39073,6 @@ } } }, - "terser": { - "version": "5.14.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz", - "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "@jridgewell/source-map": "^0.3.2", - "acorn": "^8.5.0", - "commander": "^2.20.0", - "source-map-support": "~0.5.20" - }, - "dependencies": { - "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true, - "optional": true, - "peer": true - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "optional": true, - "peer": true - }, - "source-map-support": { - "version": "0.5.21", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", - "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - } - } - }, "terser-webpack-plugin": { "version": "1.4.5", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", diff --git a/app/src/components/common/GuestApplicationButtons.tsx b/app/src/components/common/GuestApplicationButtons.tsx index a547d379..2071141b 100644 --- a/app/src/components/common/GuestApplicationButtons.tsx +++ b/app/src/components/common/GuestApplicationButtons.tsx @@ -1,56 +1,24 @@ import {Button, Stack} from '@mui/material'; -import {useFormikContext} from 'formik'; -import {useNavigate} from 'react-router-dom'; export const NavButtons = ({ - step, - setStep, - stepToRouteMapping, + next, + prev, + saveAndExit, }: { - step: number; - setStep: (setStep: number) => void; - stepToRouteMapping: {[key: number]: string}; + next: () => void; + prev: () => void; + saveAndExit: () => void; }) => { - const navigate = useNavigate(); - const {isValid} = useFormikContext(); - function saveData() { - //add logic to save current data - console.log('data saving features not implemented'); - } - - function nextStep() { - saveData(); - const newStep = step + 1; - if (stepToRouteMapping[newStep] !== undefined && isValid) { - setStep(newStep); - navigate(stepToRouteMapping[newStep]); - } else { - alert('Form not complete!'); - } - } - function prevStep() { - const newStep = step - 1; - if (step > 1) { - setStep(newStep); - navigate(stepToRouteMapping[newStep]); - } else { - navigate('/guest'); - } - } - function saveAndExit() { - saveData(); - navigate('/guest'); - } return ( -