Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 1x 1x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 5x 5x 13x 13x 1x 1x 13x 1x 1x 13x | import React from "react";
import * as Yup from "yup";
import { useForm, SubmitHandler } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { cloneDeep, isEqual } from "lodash";
import { VALIDATION_MESSAGES } from "@validation/messages";
import { useFormData } from "@components/Signup/Forms/SignupFormProvider";
import { useCalculatePercentage } from "@common/SignUp/useCalculatePercentage";
export type IFormInputs = {
firstName: string;
lastName: string;
email: string;
phone: string;
};
type HookProps = {
handleUpdateStatusValue: (value: number) => void;
handleNext: () => void;
handleBack: () => void;
};
const schema = Yup.object().shape({
firstName: Yup.string().required(VALIDATION_MESSAGES.REQUIRED),
lastName: Yup.string().required(VALIDATION_MESSAGES.REQUIRED),
email: Yup.string()
.required(VALIDATION_MESSAGES.REQUIRED)
.email(VALIDATION_MESSAGES.INVALID_EMAIL_SHORT),
});
export const useSignupPersonalDetails = ({
handleUpdateStatusValue,
handleNext,
handleBack,
}: HookProps) => {
const { formData, setFormValues } = useFormData();
const { calculatePercentageNested } = useCalculatePercentage({
isEdit: false,
});
const saveOnUnmount = React.useRef<IFormInputs>();
const methods = useForm<IFormInputs>({
mode: "onChange",
resolver: yupResolver(schema),
defaultValues: formData.personalDetails,
});
const {
watch,
formState: { isValid, dirtyFields },
} = methods;
const values = watch();
const goBackHandler = () => {
setFormValues("organizationDetails", values);
handleBack();
};
React.useEffect(() => {
(async () => {
const hasChanges =
Object.keys(dirtyFields).length > 0 &&
!isEqual(values, saveOnUnmount.current);
if (hasChanges) {
const percentage = await calculatePercentageNested(schema, values);
handleUpdateStatusValue(percentage);
}
saveOnUnmount.current = cloneDeep(values);
})();
}, [values, dirtyFields]);
const onSubmit: SubmitHandler<IFormInputs> = (data) => {
setFormValues("personalDetails", data);
handleNext();
};
React.useEffect(() => {
return () => {
setFormValues("personalDetails", saveOnUnmount.current);
};
}, []);
return {
methods,
isValid,
onSubmit,
goBackHandler,
};
};
|