Merge pull request #65 from AndyOooh/ED1-48-fix-form-Test-buttons

Ed1 48 fix form test buttons

apps/app/src/app/(protected)/components/HomeMain/HomeMain.tsx

@@ -22,9 +22,11 @@ export const HomeMain = () => {
       <Stats />
       <ReferralAd />
 
-      <button className='btn' onClick={submitHandler}>
-        Test Emulator
-      </button>
+      {process.env.NEXT_PUBLIC_EMULATORS_ON === 'true' && (
+        <button className='btn' onClick={submitHandler}>
+          Test Emulator
+        </button>
+      )}
     </div>
   );
 };

apps/app/src/app/(protected)/events/create/form/index.tsx

@@ -96,12 +96,14 @@ export const CreateEventForm = () => {
 
         <div className='w-full sticky bottom-0 p-4'>
           <ActionButton text='Update' disabled={!isDirty || !isValid} loading={isSubmitting} />
-          <button
-            type='button'
-            onClick={() => onTestForm(formState, getValues())}
-            className='btn btn-neutral'>
-            Test
-          </button>
+          {process.env.NODE_ENV === 'development' && (
+            <button
+              type='button'
+              onClick={() => onTestForm(formState, getValues())}
+              className='btn btn-neutral'>
+              Test
+            </button>
+          )}
         </div>
       </form>
       <DevTool control={control} />

apps/app/src/app/(protected)/profile/components/form/index.tsx

@@ -74,12 +74,14 @@ export const EditProfileForm = () => {
 
         <div className='w-full sticky bottom-0 p-4'>
           <ActionButton text='Update' disabled={!isDirty || !isValid} loading={isSubmitting} />
-          <button
-            type='button'
-            onClick={() => onTestForm(formState, getValues())}
-            className='btn btn-neutral'>
-            Test
-          </button>
+          {process.env.NODE_ENV === 'development' && (
+            <button
+              type='button'
+              onClick={() => onTestForm(formState, getValues())}
+              className='btn btn-neutral'>
+              Test
+            </button>
+          )}
         </div>
       </form>
       <DevTool control={control} />

apps/app/src/app/(protected)/settings/components/delete-acc-form/index.tsx

@@ -10,7 +10,7 @@ import { TextInput, FormError, ActionButton } from 'ui';
 import { useAuthState, useDeleteUser } from 'react-firebase-hooks/auth';
 import { reAuthenticate } from '__firebase/utilities';
 import { useRouter } from 'next/navigation';
-import { DevTool } from '@hookform/devtools';
+import { onTestForm } from '__utils/helpers';
 
 export const DeleteAccountForm = () => {
   const { currentUser } = useContext(CurrUserContext);
@@ -19,19 +19,12 @@ export const DeleteAccountForm = () => {
   const [deleteUser, loading_delete, error_delete] = useDeleteUser(auth);
   const router = useRouter();
 
-  const {
-    register,
-    reset,
-    handleSubmit,
-    setError,
-    control,
-    watch,
-
-    formState: { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful, dirtyFields },
-  } = useForm<IdeleteUserSchema>({
-    mode: 'onTouched',
-    resolver: providerId === 'password' ? yupResolver(deleteUserSchema) : null,
-  });
+  const { register, reset, handleSubmit, setError, watch, formState, getValues } =
+    useForm<IdeleteUserSchema>({
+      mode: 'onTouched',
+      resolver: providerId === 'password' ? yupResolver(deleteUserSchema) : null,
+    });
+  const { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState;
 
   useEffect(() => {
     if (isSubmitSuccessful) {
@@ -43,13 +36,10 @@ export const DeleteAccountForm = () => {
     try {
       const result =
         providerId === 'password' ? await reAuthenticate(data.password) : await reAuthenticate();
-
       result instanceof Error
         ? setError('password', { message: 'Incorrect password' })
         : await deleteUser();
-
       router.push('/');
-
       return;
     } catch (error) {
       console.log('🚀  file: WorkInfo.tsx:59  error:', error);
@@ -58,24 +48,13 @@ export const DeleteAccountForm = () => {
 
   const buttonDisabled = providerId === 'password' ? !isDirty || !isValid : false;
 
-  const onTest = () => {
-    const data = watch();
-    // const changedData = getChangedFormData(data, dirtyFields);
-    console.log('🚀  file: index.tsx:66  data:', data);
-    console.log('🚀  file: index.tsx:66  dirtyFields:', dirtyFields);
-    // console.log('🚀  file: index.tsx:66  filteredData:', changedData);
-    console.log('🚀  file: index.tsx:66  isValid:', isValid);
-    console.log('🚀  file: index.tsx:66  errors:', errors);
-  };
-
   return currentUser ? (
     <div className='flex flex-col gap-2 mt-4'>
       <h2 className='text-xl'>Delete Account</h2>
       <div className='card bg-base-100'>
         <form onSubmit={handleSubmit(onSubmit)} noValidate className='card-body'>
           <p>Deleting your account will remove all of your information from our database.</p>
           <p className='font-bold text-error'>This cannot be undone.</p>
-          {/* <div className='w-full grid grid-cols-2 gap-6 align-middle justify-center'> */}
           <div className='w-full flex flex-col gap-6 items-center'>
             {providerId === 'password' && (
               <div className='w-fit'>
@@ -98,15 +77,18 @@ export const DeleteAccountForm = () => {
               />
             </div>
           </div>
-          <div></div>
-          <div className='w-full sticky bottom-0 p-4'>
-            <button type='button' onClick={onTest} className='btn btn-neutral'>
-              Test
-            </button>
-          </div>
+          {process.env.NODE_ENV === 'development' && (
+            <div className='w-full sticky bottom-0 p-4'>
+              <button
+                type='button'
+                onClick={() => onTestForm(formState, getValues())}
+                className='btn btn-neutral'>
+                Test
+              </button>
+            </div>
+          )}
         </form>
       </div>
-      {/* <DevTool control={control} /> */}
     </div>
   ) : null;
 };