From 6ff5efdb4b7eec25f991f5bfcc02b4a3f883981b Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Sep 2024 10:04:31 +0700
Subject: <iman> update error handling hanya muncul saat button daftar di click

---
 src-migrate/modules/register/components/Form.tsx | 152 +++++++++++++----------
 1 file changed, 85 insertions(+), 67 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 29c21f62..118d9d69 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,90 +1,98 @@
-import { ChangeEvent, useMemo } from "react";
-import { useMutation } from "react-query";
-import { useRegisterStore } from "../stores/useRegisterStore";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import TermCondition from "./TermCondition";
-import FormCaptcha from "./FormCaptcha";
-import { useRouter } from "next/router";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
-import Link from "next/link";
+import { ChangeEvent, useMemo } from 'react';
+import { useMutation } from 'react-query';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
 
 interface FormProps {
   type: string;
   required: boolean;
   isBisnisRegist: boolean;
+  chekValid: boolean;
 }
 
-const Form: React.FC<FormProps> = ({ type, required, isBisnisRegist=false }) => {
-  const {
-    form,
-    isCheckedTNC,
-    isValidCaptcha,
-    errors,
-    updateForm,
-    validate,
-  } = useRegisterStore()
+const Form: React.FC<FormProps> = ({
+  type,
+  required,
+  isBisnisRegist = false,
+  chekValid = false,
+}) => {
+  const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
+    useRegisterStore();
 
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
-  const router = useRouter()
-  const toast = useToast()
+  const router = useRouter();
+  const toast = useToast();
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm(name, value)
-    validate()
-  }
+    updateForm(name, value);
+    validate();
+  };
 
   const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
-  })
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    const response = await mutation.mutateAsync(form)
+    const response = await mutation.mutateAsync(form);
 
     if (response?.register === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
         email: form.email,
-        redirect: (router.query?.next || '/') as string
-      })
-      router.push(`${router.route}?${urlParams}`)
+        redirect: (router.query?.next || '/') as string,
+      });
+      router.push(`${router.route}?${urlParams}`);
     }
 
     const toastProps: UseToastOptions = {
       duration: 5000,
-      isClosable: true
-    }
+      isClosable: true,
+      position: 'top',
+    };
 
     switch (response?.reason) {
       case 'EMAIL_USED':
         toast({
           ...toastProps,
           title: 'Email sudah digunakan',
-          status: 'warning'
-        })
+          status: 'warning',
+        });
         break;
       case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`
+        const activationUrl = `${router.route}?activation=email`;
         toast({
           ...toastProps,
           title: 'Akun belum aktif',
-          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
-          status: 'warning'
-        })
-        break
+          description: (
+            <>
+              Akun sudah terdaftar namun belum aktif.{' '}
+              <Link href={activationUrl} className='underline'>
+                Klik untuk aktivasi akun
+              </Link>
+            </>
+          ),
+          status: 'warning',
+        });
+        break;
     }
-  }
-  
+  };
 
   return (
-    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
-
+    <form className='mt-6 grid grid-cols-1 gap-y-4' onSubmit={handleSubmit}>
       <div>
-        <label htmlFor='name' className="text-black font-bold">Nama Lengkap</label>
+        <label htmlFor='name' className='text-black font-bold'>
+          Nama Lengkap
+        </label>
 
         <input
           type='text'
@@ -94,14 +102,18 @@ const Form: React.FC<FormProps> = ({ type, required, isBisnisRegist=false }) =>
           placeholder='Masukan nama lengkap anda'
           value={form.name}
           onChange={handleInputChange}
-          aria-invalid={!!errors.name}
+          aria-invalid={chekValid && !!errors.name}
         />
 
-        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
+        {chekValid && !!errors.name && (
+          <span className='form-msg-danger'>{errors.name}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='email' className="text-black font-bold">Alamat Email</label>
+        <label htmlFor='email' className='text-black font-bold'>
+          Alamat Email
+        </label>
 
         <input
           type='text'
@@ -111,15 +123,19 @@ const Form: React.FC<FormProps> = ({ type, required, isBisnisRegist=false }) =>
           placeholder='Masukan alamat email anda'
           value={form.email}
           onChange={handleInputChange}
-          autoComplete="username"
-          aria-invalid={!!errors.email}
+          autoComplete='username'
+          aria-invalid={chekValid && !!errors.email}
         />
 
-        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
+        {chekValid && !!errors.email && (
+          <span className='form-msg-danger'>{errors.email}</span>
+        )}
       </div>
-      
+
       <div>
-        <label htmlFor='password' className="text-black font-bold">Kata Sandi</label>
+        <label htmlFor='password' className='text-black font-bold'>
+          Kata Sandi
+        </label>
         <input
           type='password'
           name='password'
@@ -128,15 +144,19 @@ const Form: React.FC<FormProps> = ({ type, required, isBisnisRegist=false }) =>
           placeholder='••••••••••••'
           value={form.password}
           onChange={handleInputChange}
-          autoComplete="current-password"
-          aria-invalid={!!errors.password}
+          autoComplete='current-password'
+          aria-invalid={chekValid && !!errors.password}
         />
 
-        {!!errors.password && <span className="form-msg-danger">{errors.password}</span>}
+        {chekValid && !!errors.password && (
+          <span className='form-msg-danger'>{errors.password}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='phone' className="text-black font-bold">No Handphone</label>
+        <label htmlFor='phone' className='text-black font-bold'>
+          No Handphone
+        </label>
 
         <input
           type='tel'
@@ -146,17 +166,15 @@ const Form: React.FC<FormProps> = ({ type, required, isBisnisRegist=false }) =>
           placeholder='08xxxxxxxx'
           value={form.phone}
           onChange={handleInputChange}
-          aria-invalid={!!errors.phone}
+          aria-invalid={chekValid && !!errors.phone}
         />
 
-        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
+        {chekValid && !!errors.phone && (
+          <span className='form-msg-danger'>{errors.phone}</span>
+        )}
       </div>
-
-     
-
-
     </form>
-  )
-}
+  );
+};
 
-export default Form
\ No newline at end of file
+export default Form;
-- 
cgit v1.2.3