handle next element id

cds-snc · Nov 25, 2024 · 529cd27 · 529cd27
1 parent 4792a62
commit 529cd27
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 19 deletions.
diff --git a/lib/store/defaults.ts b/lib/store/defaults.ts
@@ -38,5 +38,6 @@ export const defaultForm = {
   },
   layout: [],
   elements: [],
+  nextElementId: 1,
   groups: {},
 };
diff --git a/lib/store/types.ts b/lib/store/types.ts
@@ -76,6 +76,7 @@ export interface TemplateStoreState extends TemplateStoreProps {
   setChangeKey: (key: string) => void;
   getGroupsEnabled: () => boolean;
   setGroupsLayout: (layout: string[]) => void;
+  incrementNextElementId: () => void;
 }
 
 export interface InitialTemplateStoreProps extends TemplateStoreProps {

diff --git a/lib/store/useTemplateStore.tsx b/lib/store/useTemplateStore.tsx
@@ -29,7 +29,6 @@ import {
   moveElementUp,
   removeElementById,
   removeById,
-  incrementElementId,
   getSchemaFromState,
   incrementSubElementId,
   cleanInput,
@@ -80,6 +79,11 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
     } else {
       initProps.form.groups = orderGroups(initProps.form.groups, initProps.form.groupsLayout);
     }
+
+    // Handle legacy forms to ensure nextElementId is set correctly
+    if (initProps.form.nextElementId === 1 && initProps.form.elements.length == 1) {
+      initProps.form.nextElementId = initProps.form.elements.length + 1;
+    }
   }
 
   return createStore<TemplateStoreState>()(
@@ -212,11 +216,13 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
               });
             },
             add: async (elIndex = 0, type = FormElementTypes.radio, data, groupId) => {
+              const id = get().form.nextElementId;
+              get().incrementNextElementId();
+
               return new Promise((resolve) => {
                 set((state) => {
                   const allowGroups = state.allowGroupsFlag;
 
-                  const id = incrementElementId(state.form.elements);
                   const item = {
                     ...defaultField,
                     ...data,
@@ -365,8 +371,9 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
             },
             duplicateElement: (itemId, groupId = "", copyEn = "", copyFr = "") => {
               const elIndex = get().form.elements.findIndex((el) => el.id === itemId);
+              const id = get().form.nextElementId;
+              get().incrementNextElementId();
               set((state) => {
-                const id = incrementElementId(state.form.elements);
                 // deep copy the element
                 const element = JSON.parse(JSON.stringify(state.form.elements[elIndex]));
                 element.id = id;
@@ -497,6 +504,13 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
                 state.form.groupsLayout = layout;
               });
             },
+            incrementNextElementId: () => {
+              set((state) => {
+                // Increment nextElementId
+                const nextElementId = state.form.nextElementId;
+                state.form.nextElementId = nextElementId + 1;
+              });
+            },
           }),
           {
             name: "form-storage",

diff --git a/lib/types/form-types.ts b/lib/types/form-types.ts
@@ -143,6 +143,7 @@ export interface FormProperties {
   groups?: GroupsType;
   groupsLayout?: string[];
   elements: FormElement[];
+  nextElementId: number;
   brand?: BrandProperties;
   formPurpose?: string;
   [key: string]:

diff --git a/lib/utils/form-builder/__tests__/util.test.js b/lib/utils/form-builder/__tests__/util.test.js
@@ -1,6 +1,5 @@
 import {
   sortByLayout,
-  incrementElementId,
   swap,
   moveUp,
   moveDown,
@@ -37,13 +36,6 @@ describe("Util", () => {
     expect(sorted4).toEqual([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);
   });
 
-  it("increments element id", () => {
-    expect(incrementElementId([])).toBe(1);
-    expect(incrementElementId([{ id: 3 }])).toBe(4);
-    expect(incrementElementId([{ id: 1 }, { id: 3 }, { id: 2 }])).toBe(4);
-    expect(incrementElementId([{ id: 6 }, { id: 8 }, { id: 4 }])).toBe(9);
-  });
-
   it("increments subElement id", () => {
     expect(incrementSubElementId([], 4)).toBe(401);
     expect(incrementSubElementId([], 5)).toBe(501);

diff --git a/lib/utils/form-builder/index.ts b/lib/utils/form-builder/index.ts
@@ -68,14 +68,6 @@ export const swapElement = (arr: FormElement[], index1: number, index2: number)
   });
 };
 
-export const incrementElementId = (elements: FormElement[]) => {
-  if (!elements || !elements.length) {
-    return 1;
-  }
-  const ids = elements.map((element) => element.id).sort((a, b) => a - b);
-  return ids[ids.length - 1] + 1;
-};
-
 export const incrementSubElementId = (subElements: FormElement[], elId: number) => {
   if (!subElements || !subElements.length) {
     return Number(elId.toString() + "01");
@@ -126,6 +118,7 @@ export const getSchemaFromState = (state: TemplateStoreState, allowGroups = fals
       layout,
       groups,
       groupsLayout,
+      nextElementId,
     },
   } = state;
 
@@ -141,6 +134,7 @@ export const getSchemaFromState = (state: TemplateStoreState, allowGroups = fals
     brand,
     groups,
     groupsLayout,
+    nextElementId,
   };
 
   // Force this is off until a enable in a follow-up PR