Refactor register form

2 files changed, 17 insertions, 38 deletions

diff --git a/src-migrate/common/stores/useRegisterStore.ts b/src-migrate/common/stores/useRegisterStore.ts
index d6c7db2a..ab2d7410 100644
--- a/src-migrate/common/stores/useRegisterStore.ts
+++ b/src-migrate/common/stores/useRegisterStore.ts
@@ -8,7 +8,6 @@ type State = {
   errors: {
     [key in keyof RegisterProps]?: string;
   };
-  isValid: boolean;
   isCheckedTNC: boolean;
   isOpenTNC: boolean;
   isValidCaptcha: boolean;
@@ -31,53 +30,29 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
     password: '',
     phone: '',
   },
+  updateForm: (name, value) =>
+    set((state) => ({ form: { ...state.form, [name]: value } })),
+
   errors: {},
   validate: () =>
     registerSchema
       .validate(get().form, { abortEarly: false })
-      .then(() => {
-        set({
-          errors: {},
-          isValid: false,
-        });
-      })
+      .then(() => set({ errors: {} }))
       .catch((err: ValidationError) => {
         const validationErrors: State['errors'] = {};
         err.inner.forEach(
           (e) => (validationErrors[e.path as keyof RegisterProps] = e.message)
         );
-        set({
-          errors: validationErrors,
-          isValid: false,
-        });
+        set({ errors: validationErrors });
       }),
-  isValid: false,
-  isCheckedTNC: false,
-  isOpenTNC: false,
-  isValidCaptcha: false,
-  updateForm: (name, value) =>
-    set((state) => {
-      const updatedForm = { ...state.form, [name]: value };
-
-      const fieldKeys = Object.keys(
-        updatedForm
-      ) as (keyof typeof updatedForm)[];
-
-      const allFieldsValid = fieldKeys.every((key) => {
-        const value = updatedForm[key];
 
-        if (key === 'company') return true;
-
-        return value !== '';
-      });
-
-      return {
-        form: updatedForm,
-        isValid: allFieldsValid,
-      };
-    }),
+  isCheckedTNC: false,
   toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),
+
+  isOpenTNC: false,
   openTNC: () => set(() => ({ isOpenTNC: true })),
   closeTNC: () => set(() => ({ isOpenTNC: false })),
+
+  isValidCaptcha: false,
   updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })),
 }));
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 5b51d6f4..ddc3397f 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect } from "react";
+import { ChangeEvent, useEffect, useMemo } from "react";
 import { useMutation } from "react-query";
 import { useRegisterStore } from "~/common/stores/useRegisterStore";
 import { RegisterProps } from "~/common/types/auth";
@@ -13,13 +13,17 @@ import { registerSchema } from "~/common/validations/auth";
 const Form = () => {
   const {
     form,
-    isValid,
     isCheckedTNC,
     isValidCaptcha,
     errors,
     updateForm,
     validate,
   } = useRegisterStore()
+
+  const isFormValid = useMemo(() => {
+    return Object.keys(errors).length === 0
+  }, [errors])
+
   const router = useRouter()
   const toast = useToast()
 
@@ -167,7 +171,7 @@ const Form = () => {
       <button
         type="submit"
         className="btn-yellow w-full mt-2"
-        disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
+        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
       </button>