chore: add move helpers (#4802)

* add move helpers
cds-snc · Dec 10, 2024 · e860a68 · e860a68
1 parent 9d53af2
commit e860a68
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 30 deletions.
diff --git a/lib/store/helpers/move/index.ts b/lib/store/helpers/move/index.ts
@@ -0,0 +1,4 @@
+import { moveUp } from "./moveUp";
+import { moveDown } from "./moveDown";
+
+export { moveUp, moveDown };
diff --git a/lib/store/helpers/move/moveDown.ts b/lib/store/helpers/move/moveDown.ts
@@ -0,0 +1,19 @@
+import { TemplateStoreState, SetStateFunction } from "../../types";
+import { moveDown as moveElementDown } from "@lib/utils/form-builder";
+
+type MoveDownType = (set: SetStateFunction) => TemplateStoreState["moveDown"];
+
+export const moveDown: MoveDownType = (set) => (elIndex, groupId) =>
+  set((state) => {
+    state.form.layout = moveElementDown(state.form.layout, elIndex);
+    const allowGroups = state.allowGroupsFlag;
+    if (allowGroups && groupId) {
+      const group = state.form.groups && state.form.groups[groupId];
+      if (group) {
+        // Convert the elements array to a number array
+        const els = group.elements.map((el) => Number(el));
+        // Move the element down and convert back to string array
+        group.elements = moveElementDown(els, elIndex).map((el) => String(el));
+      }
+    }
+  });
diff --git a/lib/store/helpers/move/moveUp.ts b/lib/store/helpers/move/moveUp.ts
@@ -0,0 +1,19 @@
+import { TemplateStoreState, SetStateFunction } from "../../types";
+import { moveUp as moveElementUp } from "@lib/utils/form-builder";
+
+type MoveUpType = (set: SetStateFunction) => TemplateStoreState["moveUp"];
+
+export const moveUp: MoveUpType = (set) => (elIndex, groupId) =>
+  set((state) => {
+    state.form.layout = moveElementUp(state.form.layout, elIndex);
+    const allowGroups = state.allowGroupsFlag;
+    if (allowGroups && groupId) {
+      const group = state.form.groups && state.form.groups[groupId];
+      if (group) {
+        // Convert the elements array to a number array
+        const els = group.elements.map((el) => Number(el));
+        // Move the element up and convert back to string array
+        group.elements = moveElementUp(els, elIndex).map((el) => String(el));
+      }
+    }
+  });
diff --git a/lib/store/types.ts b/lib/store/types.ts
@@ -82,6 +82,8 @@ export interface TemplateStoreState extends TemplateStoreProps {
   generateElementId: () => number;
 }
 
+export type SetStateFunction = (fn: (state: TemplateStoreState) => void) => void;
+
 export interface InitialTemplateStoreProps extends TemplateStoreProps {
   locale?: Language;
 }

diff --git a/lib/store/useTemplateStore.tsx b/lib/store/useTemplateStore.tsx
@@ -23,9 +23,7 @@ import { TreeRefProvider } from "@formBuilder/components/shared/right-panel/tree
 import { FlowRefProvider } from "@formBuilder/[id]/edit/logic/components/flow/provider/FlowRefProvider";
 import { initializeGroups } from "@formBuilder/components/shared/right-panel/treeview/util/initializeGroups";
 import {
-  moveDown,
   moveElementDown,
-  moveUp,
   moveElementUp,
   removeElementById,
   removeById,
@@ -43,6 +41,8 @@ import { clearTemplateStorage } from "./utils";
 import { orderGroups } from "@lib/utils/form-builder/orderUsingGroupsLayout";
 import { initStore } from "./initStore";
 
+import { moveUp, moveDown } from "./helpers/move";
+
 const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) => {
   const props = initStore(initProps);
   return createStore<TemplateStoreState>()(
@@ -117,20 +117,8 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
               set((state) => {
                 unset(state, path);
               }),
-            moveUp: (elIndex, groupId) =>
-              set((state) => {
-                state.form.layout = moveUp(state.form.layout, elIndex);
-                const allowGroups = state.allowGroupsFlag;
-                if (allowGroups && groupId) {
-                  const group = state.form.groups && state.form.groups[groupId];
-                  if (group) {
-                    // Convert the elements array to a number array
-                    const els = group.elements.map((el) => Number(el));
-                    // Move the element up and convert back to string array
-                    group.elements = moveUp(els, elIndex).map((el) => String(el));
-                  }
-                }
-              }),
+            moveUp: moveUp(set),
+            moveDown: moveDown(set),
             subMoveUp: (elId, subIndex) =>
               set((state) => {
                 const parentIndex = getParentIndex(elId, state.form.elements);
@@ -146,20 +134,6 @@ const createTemplateStore = (initProps?: Partial<InitialTemplateStoreProps>) =>
                   );
                 }
               }),
-            moveDown: (elIndex, groupId) =>
-              set((state) => {
-                state.form.layout = moveDown(state.form.layout, elIndex);
-                const allowGroups = state.allowGroupsFlag;
-                if (allowGroups && groupId) {
-                  const group = state.form.groups && state.form.groups[groupId];
-                  if (group) {
-                    // Convert the elements array to a number array
-                    const els = group.elements.map((el) => Number(el));
-                    // Move the element down and convert back to string array
-                    group.elements = moveDown(els, elIndex).map((el) => String(el));
-                  }
-                }
-              }),
             subMoveDown: (elId, subIndex = 0) => {
               set((state) => {
                 const parentIndex = getParentIndex(elId, state.form.elements);