chore(frontend): update code to integrate new react library changes

carrot-kpi · Nov 1, 2023 · 2cea0b1 · 2cea0b1
1 parent 47ca22e
commit 2cea0b1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/.changeset/giant-hats-breathe.md b/.changeset/giant-hats-breathe.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": patch
+---
+
+Update frontend after React library changes
diff --git a/packages/frontend/src/pages/create-with-template-id/index.tsx b/packages/frontend/src/pages/create-with-template-id/index.tsx
@@ -17,6 +17,7 @@ import { useInvalidateLatestKPITokens } from "../../hooks/useInvalidateLatestKPI
 import { Layout } from "../../components/layout";
 import { Permissioned } from "../../components/permissioned";
 import { useIsCreatorAllowed } from "../../hooks/useIsCreatorAllowed";
+import type { TemplateComponentStateUpdater } from "@carrot-kpi/react";
 
 export function CreateWithTemplateId<S extends SerializableObject<S>>() {
     const { i18n, t } = useTranslation();
@@ -133,12 +134,22 @@ export function CreateWithTemplateId<S extends SerializableObject<S>>() {
         templateId,
     ]);
 
-    const handleChange = useCallback((state: S) => {
-        setDraftState((prevState) => ({
-            templateId: prevState.templateId,
-            state,
-        }));
-    }, []);
+    const handleStateChange = useCallback(
+        (stateOrUpdater: S | TemplateComponentStateUpdater<S>) => {
+            setDraftState((prevState) => {
+                const newState =
+                    typeof stateOrUpdater === "function"
+                        ? stateOrUpdater(prevState.state)
+                        : (stateOrUpdater as S);
+
+                return {
+                    templateId: prevState.templateId,
+                    state: newState,
+                };
+            });
+        },
+        [],
+    );
 
     const handleCreate = useCallback(() => {
         invalidateLatestKPITokens();
@@ -189,7 +200,7 @@ export function CreateWithTemplateId<S extends SerializableObject<S>>() {
                         i18n={i18n}
                         className={{ root: "w-full h-full" }}
                         state={draftState.state}
-                        onChange={handleChange}
+                        onStateChange={handleStateChange}
                         onCreate={handleCreate}
                         navigate={navigate}
                         onTx={addTransaction}