fix: update form.collection on collection registration/unregistration (…

…#226)
BearStudio · Sep 24, 2024 · 377b827 · 377b827
1 parent bcf3e27
commit 377b827
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/apps/examples/src/pages/collection.tsx b/apps/examples/src/pages/collection.tsx
@@ -319,7 +319,6 @@ const ConditionedCollection = () => {
 
 const NestedCollections = () => {
   const parentCollection = useCollection("parent");
-  const form = useFormContext();
 
   return (
     <Stack flex={1}>
@@ -330,12 +329,6 @@ const NestedCollections = () => {
               name={`parent[${index}].name`}
               label={`Parent ${index}`}
             />
-            <AddPlaceholder
-              onClick={() =>
-                form.collection(`parent[${index}].children`)?.append("child")
-              }
-              label="Add child from form.collection"
-            />
             <Stack pl={20}>
               <Text fontWeight="bold" fontSize="sm">
                 Children
@@ -390,6 +383,7 @@ const NestedCollectionsChild = (props: { name: string }) => {
 const ManagedFromForm = () => {
   const form = useFormContext();
   const collection = form.collection("items");
+
   return (
     <Stack>
       <ButtonGroup size="sm">

diff --git a/packages/formiz-core/src/tests/store/submitForm.test.ts b/packages/formiz-core/src/tests/store/submitForm.test.ts
@@ -1,4 +1,3 @@
-import { formInterfaceSelector } from "@/selectors";
 import { createStore } from "@/store";
 import { generateField } from "@/utils/form";
 

diff --git a/packages/formiz-core/src/useForm.tsx b/packages/formiz-core/src/useForm.tsx
@@ -40,6 +40,7 @@ export const useForm = <Values extends object = any>(
 
   useOnValuesChange(useStore);
   useIsValidChange(useStore);
+  useOnCollectionsChange(useStore);
 
   const formActions = useStore(useCallback((state) => state.actions, []));
 
@@ -64,6 +65,26 @@ export const useForm = <Values extends object = any>(
   return formState;
 };
 
+export const useOnCollectionsChange = (
+  useStore?: UseBoundStore<StoreApi<Store>>
+) => {
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const prevCollectionsCountRef = useRef(-1);
+  useStore?.((state) => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      const collectionsCount = state.collections.size;
+      if (
+        prevCollectionsCountRef.current !== -1 &&
+        collectionsCount === prevCollectionsCountRef.current
+      )
+        return;
+      prevCollectionsCountRef.current = collectionsCount;
+    });
+    return prevCollectionsCountRef.current;
+  });
+};
+
 const useOnValuesChange = (useStore?: UseBoundStore<StoreApi<Store>>) => {
   const timeoutRef = useRef<NodeJS.Timeout>();
   const prevFormValuesRef = useRef({});

diff --git a/packages/formiz-core/src/useFormContext.tsx b/packages/formiz-core/src/useFormContext.tsx
@@ -3,6 +3,7 @@ import { formInterfaceSelector } from "@/selectors";
 import { ERROR_USE_FORM_CONTEXT_MISSING_CONTEXT } from "@/errors";
 import { Store, useFormProps } from "@/types";
 import { isDeepEqual } from "@/utils/global";
+import { useOnCollectionsChange } from "@/useForm";
 
 export const useFormContext = <Values extends object = any>(
   options?: Pick<useFormProps<Values>, "stateSubscription">
@@ -11,6 +12,7 @@ export const useFormContext = <Values extends object = any>(
   if (!useStore) {
     throw new Error(ERROR_USE_FORM_CONTEXT_MISSING_CONTEXT);
   }
+  useOnCollectionsChange(useStore);
   const formState = useStore?.(
     (state) =>
       formInterfaceSelector<Values>(