From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 09:01:04 +0700 Subject: add focus error when button submit click --- src-migrate/modules/register/components/Form.tsx | 43 +++++++++++++++++++++- .../modules/register/components/FormBisnis.tsx | 11 +++++- .../register/components/RegistrasiBisnis.tsx | 8 +++- .../register/components/RegistrasiIndividu.tsx | 7 +++- src-migrate/modules/register/index.tsx | 13 ++++++- 5 files changed, 74 insertions(+), 8 deletions(-) (limited to 'src-migrate/modules/register') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 118d9d69..b04e763c 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from 'react'; +import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react'; import { useMutation } from 'react-query'; import { useRegisterStore } from '../stores/useRegisterStore'; import { RegisterProps } from '~/types/auth'; @@ -14,13 +14,15 @@ interface FormProps { required: boolean; isBisnisRegist: boolean; chekValid: boolean; + buttonSubmitClick: boolean; } const Form: React.FC = ({ type, required, isBisnisRegist = false, - chekValid = false, + chekValid, + buttonSubmitClick, }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); @@ -30,6 +32,11 @@ const Form: React.FC = ({ const router = useRouter(); const toast = useToast(); + const emailRef = useRef(null); + const nameRef = useRef(null); + const passwordRef = useRef(null); + const teleponRef = useRef(null); + const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; updateForm(name, value); @@ -40,6 +47,34 @@ const Form: React.FC = ({ mutationFn: (data: RegisterProps) => registerUser(data), }); + useEffect(() => { + const loadIndustries = async () => { + const response = await mutation.mutateAsync(form); + if (!response?.register) { + // Logic to focus on first invalid input + if (errors.email_partner && emailRef.current) { + emailRef.current.focus(); + return; + } + if (errors.name && nameRef.current) { + nameRef.current.focus(); + return; + } + + if (errors.password && passwordRef.current) { + passwordRef.current.focus(); + return; + } + + if (errors.phone && teleponRef.current) { + teleponRef.current.scrollIntoView(); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick]); + const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -101,6 +136,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan nama lengkap anda' value={form.name} + ref={nameRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.name} /> @@ -122,6 +158,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan alamat email anda' value={form.email} + ref={emailRef} onChange={handleInputChange} autoComplete='username' aria-invalid={chekValid && !!errors.email} @@ -143,6 +180,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='••••••••••••' value={form.password} + ref={passwordRef} onChange={handleInputChange} autoComplete='current-password' aria-invalid={chekValid && !!errors.password} @@ -163,6 +201,7 @@ const Form: React.FC = ({ id='phone' name='phone' className='form-input mt-3' + ref={passwordRef} placeholder='08xxxxxxxx' value={form.phone} onChange={handleInputChange} diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index dd9cd72f..2ac998c9 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -26,6 +26,7 @@ interface FormProps { required: boolean; isPKP: boolean; chekValid: boolean; + buttonSubmitClick: boolean; } interface industry_id { @@ -39,7 +40,13 @@ interface companyType { label: string; } -const form: React.FC = ({ type, required, isPKP, chekValid }) => { +const form: React.FC = ({ + type, + required, + isPKP, + chekValid, + buttonSubmitClick, +}) => { const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); @@ -278,7 +285,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { } }; loadIndustries(); - }, [chekValid, form, errors]); + }, [buttonSubmitClick]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 36476ab9..ce4d3972 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -16,8 +16,12 @@ import { UseToastOptions, useToast } from '@chakra-ui/react'; import Link from 'next/link'; interface FormProps { chekValid: boolean; + buttonSubmitClick: boolean; } -const RegistrasiBisnis: React.FC = ({ chekValid }) => { +const RegistrasiBisnis: React.FC = ({ + chekValid, + buttonSubmitClick, +}) => { const [isPKP, setIsPKP] = useState(true); const [isTerdaftar, setIsTerdaftar] = useState(false); const [isDropIndividu, setIsDropIndividu] = useState(true); @@ -113,6 +117,7 @@ const RegistrasiBisnis: React.FC = ({ chekValid }) => { required={true} isBisnisRegist={true} chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} /> )} @@ -177,6 +182,7 @@ const RegistrasiBisnis: React.FC = ({ chekValid }) => { required={isTerdaftar} isPKP={isPKP} chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} /> )} diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx index 3997e767..84049065 100644 --- a/src-migrate/modules/register/components/RegistrasiIndividu.tsx +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -3,8 +3,12 @@ import { useRegisterStore } from '../stores/useRegisterStore'; import { useEffect } from 'react'; interface FormProps { chekValid: boolean; + buttonSubmitClick: boolean; } -const RegistrasiIndividu: React.FC = ({ chekValid }) => { +const RegistrasiIndividu: React.FC = ({ + chekValid, + buttonSubmitClick, +}) => { const { form, errors, updateForm, validate } = useRegisterStore(); useEffect(() => { @@ -21,6 +25,7 @@ const RegistrasiIndividu: React.FC = ({ chekValid }) => { required={false} isBisnisRegist={false} chekValid={chekValid} + buttonSubmitClick={buttonSubmitClick} /> ); diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index d91af9e3..08d7f893 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -22,6 +22,7 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [notValid, setNotValid] = useState(false); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); const [isBisnisClicked, setIsBisnisClicked] = useState(false); const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } = useRegisterStore(); @@ -49,8 +50,10 @@ const Register = () => { const handleSubmit = async () => { if (!isFormValid) { setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); return; } else { + setButtonSubmitClick(!buttonSubmitClick); setNotValid(false); } const response = await mutation.mutateAsync(form); @@ -142,12 +145,18 @@ const Register = () => {
{isIndividuClicked && (
- +
)} {isBisnisClicked && (
- +
)}
-- cgit v1.2.3