update call to increment element

cds-snc · Nov 25, 2024 · ecdebb7 · ecdebb7
1 parent 20a5091
commit ecdebb7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/...cforms)/[locale]/(form administration)/form-builder/[id]/edit/components/ElementPanel.tsx b/...cforms)/[locale]/(form administration)/form-builder/[id]/edit/components/ElementPanel.tsx
@@ -22,16 +22,25 @@ export const ElementPanel = ({
   elements: FormElement[];
   formId: string;
 }) => {
-  const { getFocusInput, setChangeKey, setFocusInput, remove, moveUp, moveDown, duplicateElement } =
-    useTemplateStore((s) => ({
-      getFocusInput: s.getFocusInput,
-      setChangeKey: s.setChangeKey,
-      setFocusInput: s.setFocusInput,
-      remove: s.remove,
-      moveUp: s.moveUp,
-      moveDown: s.moveDown,
-      duplicateElement: s.duplicateElement,
-    }));
+  const {
+    getFocusInput,
+    setChangeKey,
+    setFocusInput,
+    remove,
+    moveUp,
+    moveDown,
+    duplicateElement,
+    incrementNextElementId,
+  } = useTemplateStore((s) => ({
+    getFocusInput: s.getFocusInput,
+    setChangeKey: s.setChangeKey,
+    setFocusInput: s.setFocusInput,
+    remove: s.remove,
+    moveUp: s.moveUp,
+    moveDown: s.moveDown,
+    duplicateElement: s.duplicateElement,
+    incrementNextElementId: s.incrementNextElementId,
+  }));
 
   const [className, setClassName] = useState<string>("");
   const [ifFocus, setIfFocus] = useState<boolean>(false);
@@ -74,7 +83,8 @@ export const ElementPanel = ({
     setFocusInput(true);
     const { en, fr } = await getTranslatedProperties("copy");
     duplicateElement(item.id, groupId, en, fr);
-  }, [duplicateElement, groupId, item.id, setFocusInput]);
+    incrementNextElementId();
+  }, [duplicateElement, incrementNextElementId, groupId, item.id, setFocusInput]);
 
   return (
     <div

diff --git a/lib/hooks/form-builder/useHandleAdd.tsx b/lib/hooks/form-builder/useHandleAdd.tsx
@@ -18,10 +18,11 @@ import {
 import { useTreeRef } from "@formBuilder/components/shared/right-panel/treeview/provider/TreeRefProvider";
 
 export const useHandleAdd = () => {
-  const { add, addSubItem, setChangeKey } = useTemplateStore((s) => ({
+  const { add, incrementNextElementId, addSubItem, setChangeKey } = useTemplateStore((s) => ({
     add: s.add,
     addSubItem: s.addSubItem,
     setChangeKey: s.setChangeKey,
+    incrementNextElementId: s.incrementNextElementId,
   }));
 
   const { treeView } = useTreeRef();
@@ -61,6 +62,7 @@ export const useHandleAdd = () => {
         blockLoader(type as LoaderType, index, async (data, position) => {
           // Note add() returns the element id -- we're not using it yet
           id = await add(position, data.type, data, groupId);
+          incrementNextElementId();
         });
         return id;
       }
@@ -70,6 +72,7 @@ export const useHandleAdd = () => {
         item.properties.dynamicRow = await getTranslatedDynamicRowProperties();
       }
       id = await add(index, item.type, item, groupId);
+      incrementNextElementId();
       treeView?.current?.addItem(String(id));
 
       const el = document.getElementById(`item-${id}`);
@@ -82,7 +85,7 @@ export const useHandleAdd = () => {
 
       el?.focus();
     },
-    [add, create, groupId, treeView]
+    [add, incrementNextElementId, create, groupId, treeView]
   );
 
   const handleAddSubElement = useCallback(

diff --git a/lib/store/types.ts b/lib/store/types.ts
@@ -76,7 +76,7 @@ export interface TemplateStoreState extends TemplateStoreProps {
   setChangeKey: (key: string) => void;
   getGroupsEnabled: () => boolean;
   setGroupsLayout: (layout: string[]) => void;
-  getNextElementId: () => number;
+  incrementNextElementId: () => void;
 }
 
 export interface InitialTemplateStoreProps extends TemplateStoreProps {

diff --git a/lib/store/useTemplateStore.tsx b/lib/store/useTemplateStore.tsx
@@ -81,7 +81,7 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
     }
 
     // Handle legacy forms to ensure nextElementId is set correctly
-    if (initProps.form.nextElementId === 1 && initProps.form.elements.length >= 2) {
+    if (initProps.form.nextElementId === 1 && initProps.form.elements.length == 1) {
       initProps.form.nextElementId = initProps.form.elements.length + 1;
     }
   }
@@ -220,7 +220,8 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
                 set((state) => {
                   const allowGroups = state.allowGroupsFlag;
 
-                  const id = get().getNextElementId();
+                  const id = state.form.nextElementId;
+                  state.incrementNextElementId();
 
                   const item = {
                     ...defaultField,
@@ -371,7 +372,7 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
             duplicateElement: (itemId, groupId = "", copyEn = "", copyFr = "") => {
               const elIndex = get().form.elements.findIndex((el) => el.id === itemId);
               set((state) => {
-                const id = get().getNextElementId();
+                const id = state.form.nextElementId;
                 // deep copy the element
                 const element = JSON.parse(JSON.stringify(state.form.elements[elIndex]));
                 element.id = id;
@@ -502,13 +503,12 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
                 state.form.groupsLayout = layout;
               });
             },
-            getNextElementId: () => {
-              const nextElementId = get().form.nextElementId;
+            incrementNextElementId: () => {
               set((state) => {
                 // Increment nextElementId
+                const nextElementId = state.form.nextElementId;
                 state.form.nextElementId = nextElementId + 1;
               });
-              return nextElementId;
             },
           }),
           {