Skip to content

Commit

Permalink
fix: review modal state issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@masskoder
masskoder committed May 30, 2023
1 parent cf2099c commit 1d7b8b9
Show file tree
Hide file tree
Showing 8 changed files with 168 additions and 154 deletions.
4 changes: 2 additions & 2 deletions web/gds-user-ui/src/components/BasicDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const BasicDetails: React.FC<BasicDetailProps> = ({ onChangeRegistrationState })
const toast = useToast();

const { updateStateFromFormValues, setRegistrationValue } = useCertificateStepper();
const { isFetchingCertificateStep } = useFetchCertificateStep({
const { isFetchingCertificateStep, certificateStep } = useFetchCertificateStep({
key: StepEnum.BASIC
});

Expand Down Expand Up @@ -96,7 +96,7 @@ const BasicDetails: React.FC<BasicDetailProps> = ({ onChangeRegistrationState })
{isLoadingDefaultValue || isFetchingCertificateStep ? (
<MinusLoader text={'Loading data ...'} />
) : (
<BasicDetailsForm isLoading={isFetchingCertificateStep} />
<BasicDetailsForm isLoading={isFetchingCertificateStep} data={certificateStep?.form} />
)}
</Stack>
</Stack>
Expand Down
243 changes: 129 additions & 114 deletions web/gds-user-ui/src/components/BasicDetailsForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,40 @@ import useCertificateStepper from 'hooks/useCertificateStepper';
// import { useDeleteCertificateStep } from 'hooks/useDeleteCertificateStep';
import { StepEnum } from 'types/enums';
import { StepsIndexes } from 'constants/steps';
import MinusLoader from 'components/Loader/MinusLoader';

interface BasicDetailsFormProps {
data?: any;
isLoading?: boolean;
onRefreshCertificate?: () => void;
}
const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({ data }) => {
const { certificateStep } = useFetchCertificateStep({
key: StepEnum.BASIC
});
const { isOpen, onClose, onOpen } = useDisclosure();
// const { deleteCertificateStep } = useDeleteCertificateStep();
const { updateCertificateStep, updatedCertificateStep, wasCertificateStepUpdated } =
useUpdateCertificateStep();
// const nextStepClick = useRef<boolean>(false);

const {
updateCertificateStep,
updatedCertificateStep,
wasCertificateStepUpdated,
// reset,
isUpdatingCertificateStep
} = useUpdateCertificateStep();

console.log('[] updateCertificateStep', wasCertificateStepUpdated);

const [shouldShowResetFormModal, setShouldShowResetFormModal] = useState(false);
const resolver = yupResolver(basicDetailsValidationSchema);
const options = getBusinessCategoryOptions();
const { currentState, nextStep, updateIsDirty } = useCertificateStepper();

const { certificateStep, isFetchingCertificateStep } = useFetchCertificateStep({
key: StepEnum.BASIC
});
const [language] = useLanguageProvider();

useEffect(() => {}, [language]);

const methods = useForm({
defaultValues: data ?? certificateStep?.form,
defaultValues: certificateStep?.form ?? data,
resolver
});

Expand All @@ -54,21 +62,15 @@ const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({ data }) => {
control
} = methods;

useEffect(() => {
updateIsDirty(isDirty, StepsIndexes.BASIC_DETAILS);
}, [isDirty, updateIsDirty]);

useEffect(() => {
if (shouldShowResetFormModal) {
onOpen();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shouldShowResetFormModal]);
const onCloseModalHandler = () => {
setShouldShowResetFormModal(false);
onClose();
};

// this is the function that is called when the user clicks on the next button
const handleNextStepClick = () => {
if (!isDirty) {
nextStep(updatedCertificateStep ?? data);
nextStep(certificateStep ?? data);
} else {
const payload = {
step: StepEnum.BASIC,
Expand All @@ -77,11 +79,8 @@ const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({ data }) => {
state: currentState()
} as any
};

updateCertificateStep(payload);
if (wasCertificateStepUpdated) {
nextStep(updatedCertificateStep);
}
nextStep(updatedCertificateStep);
}
};

Expand All @@ -93,100 +92,116 @@ const BasicDetailsForm: React.FC<BasicDetailsFormProps> = ({ data }) => {
setShouldShowResetFormModal(false); // this will close the modal
};

useEffect(() => {
updateIsDirty(isDirty, StepsIndexes.BASIC_DETAILS);
}, [isDirty, updateIsDirty]);

useEffect(() => {
if (shouldShowResetFormModal) {
onOpen();
}

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shouldShowResetFormModal]);

return (
<FormLayout spacing={5}>
<FormProvider {...methods}>
<chakra.form onSubmit={methods.handleSubmit(handleNextStepClick)}>
<VStack align="start" spacing={4} w="100%">
<InputFormControl
controlId="organization_name"
data-testid="organization_name"
label={t`Organization Name`}
error="true"
formHelperText={errors.organization_name?.message as string}
isInvalid={!!errors.organization_name}
inputProps={{ placeholder: 'VASP HOLDING LLC' }}
isRequiredField
{...register('organization_name')}
/>
<InputFormControl
controlId="website"
data-testid="website"
label={t`Website`}
error="true"
type="url"
formHelperText={errors.website?.message as string}
isInvalid={!!errors.website}
inputProps={{ placeholder: 'https://example.com' }}
isRequiredField
{...register('website')}
/>
<InputFormControl
controlId="established_on"
data-testid="established_on"
label={t`Date of Incorporation / Establishment`}
formHelperText={errors.established_on?.message as string}
isInvalid={!!errors.established_on}
inputProps={{
placeholder: '21/01/2021',
type: 'date',
pattern: 'd{4}-d{2}-d{2}',
min: '1800-01-01',
max: formatDate()
}}
isRequiredField
{...register('established_on')}
/>
<Controller
control={control}
name="business_category"
render={({ field }) => (
<SelectFormControl
data-testid="business_category"
ref={field.ref}
label={t`Business Category`}
placeholder={t`Select business category`}
controlId="business_category"
options={getBusinessCategoryOptions()}
name={field.name}
value={options.find((option) => option.value === field.value)}
onChange={(newValue: any) => field.onChange(newValue.value)}
/>
)}
/>
<Controller
control={control}
name="vasp_categories"
render={({ field: { value, onChange, name } }) => (
<SelectFormControl
label={t`VASP Category`}
placeholder={t`Select VASP category`}
controlId="vasp_categories"
data-testid="vasp_categories"
isMulti
name={name}
options={vaspCategories}
onChange={(val: any) => onChange(val.map((c: any) => c.value))}
value={value && vaspCategories.filter((c) => value.includes(c.value))}
formHelperText={t`Please select as many categories needed to represent the types of virtual asset services your organization provides.`}
/>
)}
{isUpdatingCertificateStep || isFetchingCertificateStep ? (
<MinusLoader />
) : (
<FormProvider {...methods}>
<chakra.form onSubmit={methods.handleSubmit(handleNextStepClick)}>
<VStack align="start" spacing={4} w="100%">
<InputFormControl
controlId="organization_name"
data-testid="organization_name"
label={t`Organization Name`}
error="true"
formHelperText={errors.organization_name?.message as string}
isInvalid={!!errors.organization_name}
inputProps={{ placeholder: 'VASP HOLDING LLC' }}
isRequiredField
{...register('organization_name')}
/>
<InputFormControl
controlId="website"
data-testid="website"
label={t`Website`}
error="true"
type="url"
formHelperText={errors.website?.message as string}
isInvalid={!!errors.website}
inputProps={{ placeholder: 'https://example.com' }}
isRequiredField
{...register('website')}
/>
<InputFormControl
controlId="established_on"
data-testid="established_on"
label={t`Date of Incorporation / Establishment`}
formHelperText={errors.established_on?.message as string}
isInvalid={!!errors.established_on}
inputProps={{
placeholder: '21/01/2021',
type: 'date',
pattern: 'd{4}-d{2}-d{2}',
min: '1800-01-01',
max: formatDate()
}}
isRequiredField
{...register('established_on')}
/>
<Controller
control={control}
name="business_category"
render={({ field }) => (
<SelectFormControl
data-testid="business_category"
ref={field.ref}
label={t`Business Category`}
placeholder={t`Select business category`}
controlId="business_category"
options={getBusinessCategoryOptions()}
name={field.name}
value={options.find((option) => option.value === field.value)}
onChange={(newValue: any) => field.onChange(newValue.value)}
/>
)}
/>
<Controller
control={control}
name="vasp_categories"
render={({ field: { value, onChange, name } }) => (
<SelectFormControl
label={t`VASP Category`}
placeholder={t`Select VASP category`}
controlId="vasp_categories"
data-testid="vasp_categories"
isMulti
name={name}
options={vaspCategories}
onChange={(val: any) => onChange(val.map((c: any) => c.value))}
value={value && vaspCategories.filter((c) => value.includes(c.value))}
formHelperText={t`Please select as many categories needed to represent the types of virtual asset services your organization provides.`}
/>
)}
/>
</VStack>
<StepButtons
handleNextStep={handleNextStepClick}
isFirstStep={true}
onResetModalClose={handleResetClick}
isOpened={isOpen}
handleResetForm={handleResetForm}
resetFormType={StepEnum.BASIC}
onClosed={onCloseModalHandler}
handleResetClick={handleResetClick}
shouldShowResetFormModal={shouldShowResetFormModal}
/>
</VStack>
<StepButtons
handleNextStep={handleNextStepClick}
isFirstStep={true}
onResetModalClose={handleResetClick}
isOpened={isOpen}
handleResetForm={handleResetForm}
resetFormType={StepEnum.BASIC}
onClosed={onClose}
handleResetClick={handleResetClick}
shouldShowResetFormModal={shouldShowResetFormModal}
/>
</chakra.form>
{!isProdEnv ? <DevTool control={methods.control} /> : null}
</FormProvider>
</chakra.form>
{!isProdEnv ? <DevTool control={methods.control} /> : null}
</FormProvider>
)}
</FormLayout>
);
};
Expand Down
18 changes: 9 additions & 9 deletions web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ const ContactsForm: React.FC = () => {
key: StepEnum.CONTACTS
});

const { updateCertificateStep, updatedCertificateStep, wasCertificateStepUpdated } =
useUpdateCertificateStep();
const { updateCertificateStep, updatedCertificateStep } = useUpdateCertificateStep();

const resolver = yupResolver(contactsValidationSchema);

Expand Down Expand Up @@ -50,9 +49,7 @@ const ContactsForm: React.FC = () => {
} as any
};
updateCertificateStep(payload);
if (wasCertificateStepUpdated) {
previousStep(updatedCertificateStep);
}
previousStep(updatedCertificateStep);
}
previousStep(certificateStep);
};
Expand All @@ -64,6 +61,11 @@ const ContactsForm: React.FC = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [shouldShowResetFormModal]);

const onCloseModalHandler = () => {
setShouldShowResetFormModal(false);
onClose();
};

const handleNextStepClick = () => {
if (!isDirty) {
nextStep(updatedCertificateStep ?? certificateStep);
Expand All @@ -77,9 +79,7 @@ const ContactsForm: React.FC = () => {
};

updateCertificateStep(payload);
if (wasCertificateStepUpdated) {
nextStep(updatedCertificateStep);
}
nextStep(updatedCertificateStep);
}
};
const handleResetForm = () => {
Expand Down Expand Up @@ -124,7 +124,7 @@ const ContactsForm: React.FC = () => {
isOpened={isOpen}
handleResetForm={handleResetForm}
resetFormType="basic"
onClosed={onClose}
onClosed={onCloseModalHandler}
handleResetClick={handleResetClick}
shouldShowResetFormModal={shouldShowResetFormModal}
/>
Expand Down
Loading

0 comments on commit 1d7b8b9

Please sign in to comment.