From 37a3e14f0a25648b54875400455162a2211b1a30 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 21:55:45 +0700 Subject: [PATCH 01/18] cleanup loading Root --- apps/app/src/app/loading.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/app/src/app/loading.tsx b/apps/app/src/app/loading.tsx index f3e1b1b..523ce29 100644 --- a/apps/app/src/app/loading.tsx +++ b/apps/app/src/app/loading.tsx @@ -7,10 +7,7 @@ export default function Loading() { // Or a custom loading skeleton component return (
- {/*
- Root Loading page ROOT... -
*/} -

Root Loading page ROOT...

+

Loading page ROOT...

Date: Sun, 14 Jan 2024 21:56:25 +0700 Subject: [PATCH 02/18] cleanup layout root --- apps/app/src/app/layout.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx index fb7c4ea..e206435 100644 --- a/apps/app/src/app/layout.tsx +++ b/apps/app/src/app/layout.tsx @@ -1,5 +1,3 @@ -// 'use client' - import { Varela } from 'next/font/google'; import { RecoilProvider } from '../components/RecoilProvider'; From d48698b0ea7aa05acd8e29bb95df640a01da70f6 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 21:57:12 +0700 Subject: [PATCH 03/18] cleanup layout protected --- apps/app/src/app/(protected)/layout.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/app/src/app/(protected)/layout.tsx b/apps/app/src/app/(protected)/layout.tsx index cf8ac42..8635904 100644 --- a/apps/app/src/app/(protected)/layout.tsx +++ b/apps/app/src/app/(protected)/layout.tsx @@ -8,10 +8,8 @@ export default function protectedLayout({ children }: { children: React.ReactNod
- {/*
*/} {children} - {/*
{children}
*/}
From 040846a95c2133c1e1e880e1606f21a01561eb96 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 21:58:10 +0700 Subject: [PATCH 04/18] cleanup layout events --- apps/app/src/app/(protected)/events/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/app/src/app/(protected)/events/layout.tsx b/apps/app/src/app/(protected)/events/layout.tsx index 359adc1..66c9d35 100644 --- a/apps/app/src/app/(protected)/events/layout.tsx +++ b/apps/app/src/app/(protected)/events/layout.tsx @@ -1,4 +1,3 @@ export default function EventsLayout({ children }: { children: React.ReactNode }) { - // return
{children}
; return
{children}
; } From e41dea7ad013de8d36185e517adb987ccb4c018a Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:27:53 +0700 Subject: [PATCH 05/18] create onTestForm utils --- .../app/src/app/(protected)/events/Events.tsx | 5 --- .../(protected)/events/create/form/index.tsx | 38 ++----------------- apps/app/src/utils/helpers.ts | 11 ++++++ 3 files changed, 15 insertions(+), 39 deletions(-) diff --git a/apps/app/src/app/(protected)/events/Events.tsx b/apps/app/src/app/(protected)/events/Events.tsx index 9173778..739cdc9 100644 --- a/apps/app/src/app/(protected)/events/Events.tsx +++ b/apps/app/src/app/(protected)/events/Events.tsx @@ -80,8 +80,6 @@ export const EventsLala = ({ events }: Props) => {

{location.address}

@@ -145,9 +143,6 @@ export const EventsLala = ({ events }: Props) => { {field.name === 'number_workers' ? `${role.accepted || 0}/${field.value}` : field.value} - {/* {field.name === 'number_workers' ? 'lalalal' : 'sdfsdfds'} */} - {/* {field_name === 'number_workers' ? 'lalalal' : field_name} */} - {/* {role[field_name]} */} ); })} diff --git a/apps/app/src/app/(protected)/events/create/form/index.tsx b/apps/app/src/app/(protected)/events/create/form/index.tsx index 0855281..e5fbb7d 100644 --- a/apps/app/src/app/(protected)/events/create/form/index.tsx +++ b/apps/app/src/app/(protected)/events/create/form/index.tsx @@ -7,7 +7,7 @@ import { useFieldArray, useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { CurrUserContext } from 'app/(protected)/components/Providers/CurrentUserProvider'; -import { getChangedFormData } from '__utils/helpers'; +import { getChangedFormData, onTestForm } from '__utils/helpers'; import { db } from '__firebase/clientApp'; import { ActionButton } from 'ui'; import { EventInfo } from './event-info'; @@ -27,21 +27,14 @@ export const CreateEventForm = () => { getValues, reset, handleSubmit, - formState: { - errors, - isDirty, - isValid, - isSubmitting, - isSubmitSuccessful, - dirtyFields, - defaultValues, - }, + formState, // } = useForm({ } = useForm({ mode: 'onTouched', // resolver: yupResolver(createEventSchema({ initialEmail: currentUser?.email })), resolver: yupResolver(createEventSchema), }); + const { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState; useEffect(() => { if (isSubmitSuccessful) { @@ -58,13 +51,7 @@ export const CreateEventForm = () => { 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); - console.log('πŸš€ file: index.tsx:66 defaultValues*********************:', defaultValues); + onTestForm(formState, data); }; const onSubmit = async (data: IcreateEventSchema) => { @@ -90,23 +77,6 @@ export const CreateEventForm = () => { } }; - // const onSubmit = async (data: IcreateEventSchema) => { - // try { - // const changedData = getChangedFormData(data, dirtyFields); - - // const userDocRef = doc(db, 'users', currentUser.uid); - // const res = await updateDoc(userDocRef, { - // events: { - // ...changedData, - // }, - // }); - - // return; - // } catch (error) { - // console.log('πŸš€ file: WorkInfo.tsx:59 error:', error); - // } - // }; - const sections = [ { title: 'Event Roles', diff --git a/apps/app/src/utils/helpers.ts b/apps/app/src/utils/helpers.ts index 284fd3e..2c704c8 100644 --- a/apps/app/src/utils/helpers.ts +++ b/apps/app/src/utils/helpers.ts @@ -30,3 +30,14 @@ export const getChangedFormData = (data: any, dirtyFields: any) => { /* Converts empty string to null and makes yup ignore null value */ export const stringNullable = (field: AnyObject) => field.transform((value: any) => (value === '' ? null : value)).nullable(); + +/* For logging form state and data */ +export const onTestForm = (formState, data) => { + const { dirtyFields, isValid, errors } = formState; + const changedData = getChangedFormData(data, dirtyFields); + console.log('😁 data', data); + console.log('πŸ’• changedData', changedData); + console.log('🀣 dirtyFields', dirtyFields); + console.log('❀️ isValid', isValid); + console.log('πŸ˜’ errors', errors); +}; From 0dffe28414739e0727698684f564375d3b4d4851 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:30:54 +0700 Subject: [PATCH 06/18] implement onTestForm --- .../profile/components/form/index.tsx | 37 +++++-------------- 1 file changed, 9 insertions(+), 28 deletions(-) diff --git a/apps/app/src/app/(protected)/profile/components/form/index.tsx b/apps/app/src/app/(protected)/profile/components/form/index.tsx index 1e15ad0..f452273 100644 --- a/apps/app/src/app/(protected)/profile/components/form/index.tsx +++ b/apps/app/src/app/(protected)/profile/components/form/index.tsx @@ -12,31 +12,18 @@ import { LinksInfo } from './components/links'; import { PersonalInfo } from './components/personal-info'; import { IpersonalInfoSchema, personalInfoSchema } from './components/personal-info/validation'; import { WorkInfo } from './components/work-info'; -import { getChangedFormData } from '__utils/helpers'; +import { getChangedFormData, onTestForm } from '__utils/helpers'; import { ActionButton } from 'ui'; export const EditProfileForm = () => { const { currentUser } = useContext(CurrUserContext); - - const { - control, - register, - watch, - reset, - handleSubmit, - formState: { - errors, - isDirty, - isValid, - isSubmitting, - isSubmitSuccessful, - dirtyFields, - defaultValues, - }, - } = useForm({ - mode: 'onTouched', - resolver: yupResolver(personalInfoSchema({ initialEmail: currentUser?.email })), - }); + const { control, register, watch, reset, handleSubmit, formState } = useForm( + { + mode: 'onTouched', + resolver: yupResolver(personalInfoSchema({ initialEmail: currentUser?.email })), + } + ); + const { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful, dirtyFields } = formState; useEffect(() => { if (isSubmitSuccessful) { @@ -51,13 +38,7 @@ export const EditProfileForm = () => { 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); - console.log('πŸš€ file: index.tsx:66 defaultValues*********************:', defaultValues); + onTestForm(formState, data); }; const onSubmit = async (data: IpersonalInfoSchema) => { From ce79d49078c03cb6f8a7ab2f8eb9c9e7cb985933 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:32:11 +0700 Subject: [PATCH 07/18] cleanup --- .../app/(protected)/profile/components/form/index.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/apps/app/src/app/(protected)/profile/components/form/index.tsx b/apps/app/src/app/(protected)/profile/components/form/index.tsx index f452273..f583263 100644 --- a/apps/app/src/app/(protected)/profile/components/form/index.tsx +++ b/apps/app/src/app/(protected)/profile/components/form/index.tsx @@ -12,7 +12,7 @@ import { LinksInfo } from './components/links'; import { PersonalInfo } from './components/personal-info'; import { IpersonalInfoSchema, personalInfoSchema } from './components/personal-info/validation'; import { WorkInfo } from './components/work-info'; -import { getChangedFormData, onTestForm } from '__utils/helpers'; +import { onTestForm } from '__utils/helpers'; import { ActionButton } from 'ui'; export const EditProfileForm = () => { @@ -43,14 +43,8 @@ export const EditProfileForm = () => { const onSubmit = async (data: IpersonalInfoSchema) => { try { - console.log('On submit data: ', data); - console.log('dirtyFields: ', dirtyFields); - const changedData = getChangedFormData(data, dirtyFields); - const userDocRef = doc(db, 'users', currentUser.uid); - // console.log('πŸš€ file: index.tsx:62 userDocRef:', userDocRef); - const res = await updateDoc(userDocRef, data); - // console.log('πŸš€ file: index.tsx:77 res:', res); + await updateDoc(userDocRef, data); return; } catch (error) { @@ -91,7 +85,6 @@ export const EditProfileForm = () => {
- {/* */} From 89bb11f5b66c436a4d20477ff3d449173516e8b4 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:38:40 +0700 Subject: [PATCH 08/18] refactor onTest --- .../(protected)/events/create/form/index.tsx | 13 +++++-------- .../profile/components/form/index.tsx | 18 +++++++----------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/apps/app/src/app/(protected)/events/create/form/index.tsx b/apps/app/src/app/(protected)/events/create/form/index.tsx index e5fbb7d..79a3c77 100644 --- a/apps/app/src/app/(protected)/events/create/form/index.tsx +++ b/apps/app/src/app/(protected)/events/create/form/index.tsx @@ -49,15 +49,8 @@ export const CreateEventForm = () => { console.log('πŸš€ file: WorkInfo.tsx:52 errors:', errors, e); }; - const onTest = () => { - const data = watch(); - onTestForm(formState, data); - }; - const onSubmit = async (data: IcreateEventSchema) => { try { - // const changedData = getChangedFormData(data, dirtyFields); - // Step 1: Add a new entry to the "events" collection const eventsCollectionRef = collection(db, 'events'); const newEventRef = await addDoc(eventsCollectionRef, data); @@ -120,7 +113,11 @@ export const CreateEventForm = () => {
-
diff --git a/apps/app/src/app/(protected)/profile/components/form/index.tsx b/apps/app/src/app/(protected)/profile/components/form/index.tsx index f583263..e867c57 100644 --- a/apps/app/src/app/(protected)/profile/components/form/index.tsx +++ b/apps/app/src/app/(protected)/profile/components/form/index.tsx @@ -17,12 +17,11 @@ import { ActionButton } from 'ui'; export const EditProfileForm = () => { const { currentUser } = useContext(CurrUserContext); - const { control, register, watch, reset, handleSubmit, formState } = useForm( - { + const { control, register, getValues, reset, handleSubmit, formState } = + useForm({ mode: 'onTouched', resolver: yupResolver(personalInfoSchema({ initialEmail: currentUser?.email })), - } - ); + }); const { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful, dirtyFields } = formState; useEffect(() => { @@ -32,15 +31,9 @@ export const EditProfileForm = () => { }, [isSubmitSuccessful, reset]); const onError = (errors: any, e: any) => { - console.log('πŸš€ file: WorkInfo.tsx:52 data:', watch()); console.log('πŸš€ file: WorkInfo.tsx:52 errors:', errors, e); }; - const onTest = () => { - const data = watch(); - onTestForm(formState, data); - }; - const onSubmit = async (data: IpersonalInfoSchema) => { try { const userDocRef = doc(db, 'users', currentUser.uid); @@ -85,7 +78,10 @@ export const EditProfileForm = () => {
-
From 4fa1818960409842367f711c8d18d456c7147585 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:41:16 +0700 Subject: [PATCH 09/18] onError --- apps/app/src/app/(protected)/events/create/form/index.tsx | 7 +------ .../src/app/(protected)/profile/components/form/index.tsx | 6 +----- apps/app/src/utils/helpers.ts | 5 +++++ 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/apps/app/src/app/(protected)/events/create/form/index.tsx b/apps/app/src/app/(protected)/events/create/form/index.tsx index 79a3c77..dee0a58 100644 --- a/apps/app/src/app/(protected)/events/create/form/index.tsx +++ b/apps/app/src/app/(protected)/events/create/form/index.tsx @@ -7,7 +7,7 @@ import { useFieldArray, useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { CurrUserContext } from 'app/(protected)/components/Providers/CurrentUserProvider'; -import { getChangedFormData, onTestForm } from '__utils/helpers'; +import { getChangedFormData, onError, onTestForm } from '__utils/helpers'; import { db } from '__firebase/clientApp'; import { ActionButton } from 'ui'; import { EventInfo } from './event-info'; @@ -44,11 +44,6 @@ export const CreateEventForm = () => { const address = watch('location.address'); - const onError = (errors: any, e: any) => { - console.log('πŸš€ file: WorkInfo.tsx:52 data:', watch()); - console.log('πŸš€ file: WorkInfo.tsx:52 errors:', errors, e); - }; - const onSubmit = async (data: IcreateEventSchema) => { try { // Step 1: Add a new entry to the "events" collection diff --git a/apps/app/src/app/(protected)/profile/components/form/index.tsx b/apps/app/src/app/(protected)/profile/components/form/index.tsx index e867c57..2791b43 100644 --- a/apps/app/src/app/(protected)/profile/components/form/index.tsx +++ b/apps/app/src/app/(protected)/profile/components/form/index.tsx @@ -12,7 +12,7 @@ import { LinksInfo } from './components/links'; import { PersonalInfo } from './components/personal-info'; import { IpersonalInfoSchema, personalInfoSchema } from './components/personal-info/validation'; import { WorkInfo } from './components/work-info'; -import { onTestForm } from '__utils/helpers'; +import { onError, onTestForm } from '__utils/helpers'; import { ActionButton } from 'ui'; export const EditProfileForm = () => { @@ -30,10 +30,6 @@ export const EditProfileForm = () => { } }, [isSubmitSuccessful, reset]); - const onError = (errors: any, e: any) => { - console.log('πŸš€ file: WorkInfo.tsx:52 errors:', errors, e); - }; - const onSubmit = async (data: IpersonalInfoSchema) => { try { const userDocRef = doc(db, 'users', currentUser.uid); diff --git a/apps/app/src/utils/helpers.ts b/apps/app/src/utils/helpers.ts index 2c704c8..c50b363 100644 --- a/apps/app/src/utils/helpers.ts +++ b/apps/app/src/utils/helpers.ts @@ -41,3 +41,8 @@ export const onTestForm = (formState, data) => { console.log('❀️ isValid', isValid); console.log('πŸ˜’ errors', errors); }; + +/* For logging form erros */ +export const onError = (errors: any, e: any) => { + console.log('🚫 errors:', errors, e); +}; From a5c132e39cfabbde12723ca02970b22b38d26768 Mon Sep 17 00:00:00 2001 From: AndyOoh Date: Sun, 14 Jan 2024 22:42:44 +0700 Subject: [PATCH 10/18] refactor, cleanup --- .../(protected)/events/create/form/index.tsx | 29 +++++-------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/apps/app/src/app/(protected)/events/create/form/index.tsx b/apps/app/src/app/(protected)/events/create/form/index.tsx index dee0a58..a3e3289 100644 --- a/apps/app/src/app/(protected)/events/create/form/index.tsx +++ b/apps/app/src/app/(protected)/events/create/form/index.tsx @@ -3,38 +3,28 @@ import React, { useContext, useEffect } from 'react'; import { addDoc, arrayUnion, collection, doc, updateDoc } from 'firebase/firestore'; import { DevTool } from '@hookform/devtools'; -import { useFieldArray, useForm } from 'react-hook-form'; +import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import { CurrUserContext } from 'app/(protected)/components/Providers/CurrentUserProvider'; -import { getChangedFormData, onError, onTestForm } from '__utils/helpers'; +import { onError, onTestForm } from '__utils/helpers'; import { db } from '__firebase/clientApp'; import { ActionButton } from 'ui'; import { EventInfo } from './event-info'; import { IcreateEventSchema, createEventSchema } from './validation'; import { EventLocation } from './event-location'; import { EventRoles } from './event-roles'; -import { TestFieldArray } from './test-field-array'; export const CreateEventForm = () => { const { currentUser } = useContext(CurrUserContext); - const { - control, - register, - watch, - setValue, - getValues, - reset, - handleSubmit, - formState, - // } = useForm({ - } = useForm({ - mode: 'onTouched', - // resolver: yupResolver(createEventSchema({ initialEmail: currentUser?.email })), - resolver: yupResolver(createEventSchema), - }); + const { control, register, watch, setValue, getValues, reset, handleSubmit, formState } = + useForm({ + mode: 'onTouched', + resolver: yupResolver(createEventSchema), + }); const { errors, isDirty, isValid, isSubmitting, isSubmitSuccessful } = formState; + const address = watch('location.address'); useEffect(() => { if (isSubmitSuccessful) { @@ -42,8 +32,6 @@ export const CreateEventForm = () => { } }, [isSubmitSuccessful, reset]); - const address = watch('location.address'); - const onSubmit = async (data: IcreateEventSchema) => { try { // Step 1: Add a new entry to the "events" collection @@ -108,7 +96,6 @@ export const CreateEventForm = () => {
- {/*