fix(web): fix form initial values

undb-io · Dec 16, 2022 · 902cb8d · 902cb8d
1 parent 57544f1
commit 902cb8d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/apps/web/components/create-record-form/create-record-form-drawer.tsx b/apps/web/components/create-record-form/create-record-form-drawer.tsx
@@ -1,7 +1,8 @@
-import type { Table as CoreTable } from '@egodb/core'
+import type { ICreateRecordInput, Table as CoreTable } from '@egodb/core'
 import { createRecordCommandInput } from '@egodb/core'
 import { Drawer, useEgoUITheme, zodResolver } from '@egodb/ui'
 import { useAtom } from 'jotai'
+import useDeepCompareEffect from 'use-deep-compare-effect'
 import { useConfirmModal } from '../../hooks'
 import { CreateRecordForm } from './create-record-form'
 import { CreateRecordFormProvider, useCreateRecord } from './create-record-form-context'
@@ -15,26 +16,30 @@ export const CreateRecordFormDrawer: React.FC<IProps> = ({ table }) => {
   const [opened, setOpened] = useAtom(createRecordFormDrawerOpened)
   const theme = useEgoUITheme()
 
+  const initialValues: ICreateRecordInput = {
+    tableId: table.id.value,
+    value: table.schema.fields.map((field) => ({
+      name: field.name.value,
+      value: null,
+    })),
+  }
+
+  const form = useCreateRecord({
+    initialValues,
+    validate: zodResolver(createRecordCommandInput),
+  })
+
+  useDeepCompareEffect(() => {
+    form.setValues(initialValues)
+  }, [initialValues])
+
   const reset = () => {
     setOpened(false)
     form.clearErrors()
     form.reset()
-    form.resetTouched()
-    form.resetDirty()
   }
   const confirm = useConfirmModal({ onConfirm: reset })
 
-  const form = useCreateRecord({
-    initialValues: {
-      tableId: table.id.value,
-      value: table.schema.fields.map((field) => ({
-        name: field.name.value,
-        value: null,
-      })),
-    },
-    validate: zodResolver(createRecordCommandInput),
-  })
-
   return (
     <CreateRecordFormProvider form={form}>
       <Drawer

diff --git a/apps/web/components/create-table-form/create-table-form-drawer.tsx b/apps/web/components/create-table-form/create-table-form-drawer.tsx
@@ -1,6 +1,8 @@
+import type { ICreateTableInput } from '@egodb/core'
 import { createTableCommandInput } from '@egodb/core'
 import { Drawer, useEgoUITheme, zodResolver } from '@egodb/ui'
 import { useAtom } from 'jotai'
+import useDeepCompareEffect from 'use-deep-compare-effect'
 import { useConfirmModal } from '../../hooks'
 import { CreateTableForm } from './create-table-form'
 import { CreateTableFormProvider, useCreateTable } from './create-table-form-context'
@@ -10,21 +12,25 @@ export const CreateTableFormDrawer: React.FC = () => {
   const [opened, setOpened] = useAtom(createTableFormDrawerOpened)
   const theme = useEgoUITheme()
 
+  const initialValues: ICreateTableInput = {
+    name: '',
+    schema: [],
+  }
+
   const form = useCreateTable({
-    initialValues: {
-      name: '',
-      schema: [],
-    },
+    initialValues,
     validate: zodResolver(createTableCommandInput),
     validateInputOnBlur: ['name'],
   })
 
+  useDeepCompareEffect(() => {
+    form.setValues(initialValues)
+  }, [initialValues])
+
   const reset = () => {
     setOpened(false)
     form.clearErrors()
     form.reset()
-    form.resetTouched()
-    form.resetDirty()
   }
   const confirm = useConfirmModal({ onConfirm: reset })