Merge pull request #610 from gibsonliketheguitar/fix-558

fix-bug-558: adding column left or right unpredictable state

src/components/Table/ColumnMenu/NewColumn.tsx

@@ -27,10 +27,8 @@ export default function NewColumn({
   data,
   openSettings,
   handleClose,
-  handleSave,
 }: INewColumnProps) {
-  const { table, settingsActions } = useProjectContext();
-
+  const { settingsActions, table, tableActions } = useProjectContext();
   const [columnLabel, setColumnLabel] = useState("");
   const [fieldKey, setFieldKey] = useState("");
   const [type, setType] = useState(FieldType.shortText);
@@ -139,14 +137,19 @@ export default function NewColumn({
       actions={{
         primary: {
           onClick: () => {
-            handleSave(fieldKey, {
-              type,
-              name: columnLabel,
-              fieldName: fieldKey,
-              key: fieldKey,
-              config: {},
-              ...data.initializeColumn,
-            });
+            tableActions?.column.insert(
+              {
+                type,
+                name: columnLabel,
+                fieldName: fieldKey,
+                key: fieldKey,
+                config: {},
+              },
+              {
+                insert: data.insert,
+                index: data.sourceIndex,
+              }
+            );
             if (requireConfiguration) {
               openSettings({
                 type,
@@ -154,7 +157,6 @@ export default function NewColumn({
                 fieldName: fieldKey,
                 key: fieldKey,
                 config: {},
-                ...data.initializeColumn,
               });
             } else handleClose();
             analytics.logEvent("create_column", {

src/components/Table/ColumnMenu/index.tsx

@@ -92,9 +92,7 @@ export default function ColumnMenu() {
     if (column && column.type === FieldType.last) {
       setModal({
         type: ModalStates.new,
-        data: {
-          initializeColumn: { index: column.index ? column.index + 1 : 0 },
-        },
+        data: {},
       });
     }
   }, [column]);
@@ -209,7 +207,8 @@ export default function ColumnMenu() {
         setModal({
           type: ModalStates.new,
           data: {
-            initializeColumn: { index: column.index ? column.index - 1 : 0 },
+            insert: "left",
+            sourceIndex: column.index,
           },
         }),
     },
@@ -220,7 +219,8 @@ export default function ColumnMenu() {
         setModal({
           type: ModalStates.new,
           data: {
-            initializeColumn: { index: column.index ? column.index + 1 : 0 },
+            insert: "right",
+            sourceIndex: column.index,
           },
         }),
     },

src/hooks/useTable/index.ts

@@ -4,6 +4,7 @@ export type TableActions = {
   // TODO: Stricter types here
   column: {
     add: Function;
+    insert: Function;
     resize: (index: number, width: number) => void;
     rename: Function;
     remove: Function;
@@ -89,6 +90,7 @@ export default function useTable() {
   const actions: TableActions = {
     column: {
       add: configActions.addColumn,
+      insert: configActions.insert,
       resize: configActions.resize,
       rename: configActions.rename,
       update: configActions.updateColumn,

src/hooks/useTable/useTableConfig.ts

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import _camelCase from "lodash/camelCase";
 
+import _orderBy from "lodash/orderBy";
 import _sortBy from "lodash/sortBy";
 
 import useDoc, { DocActions } from "../useDoc";
@@ -85,12 +86,13 @@ const useTableConfig = (tableId?: string) => {
       _columnValues.filter((col: any) => !col.hidden && !col.fixed),
       "index"
     );
+
     const targetColumn: any = columnsArray[index - numberOfFixedColumns];
     const updatedColumns = {
       ...columns,
       [targetColumn.key]: { ...targetColumn, width },
     };
-
+    
     documentDispatch({
       action: DocActions.update,
       data: { columns: updatedColumns },
@@ -116,6 +118,40 @@ const useTableConfig = (tableId?: string) => {
       callback: onSuccess,
     });
   };
+
+  /** insert column by index
+   * @param col     properties of new column
+   * @param source  source object { index: selected source index, insert: left | right }
+   */
+  const insert = (col, source) => {
+    const { columns } = tableConfigState;
+    const orderedCol = _orderBy(Object.values(columns), "index");
+
+    //offset index is necessary for splice insert
+    const offset = source.insert === "left" ? 0 : 1;
+
+    //insert poistion, is source index + offset
+    //if source.index is undefined, set target index to end of row
+    const targetIndx = Boolean(typeof source.index === "undefined")
+      ? orderedCol.length
+      : source.index + offset;
+
+    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+    orderedCol.splice(targetIndx, 0, col);
+
+    const updatedColumns = orderedCol.reduce(
+      (acc: any, col: any, indx: number) => {
+        acc[col.key] = { ...col, index: indx };
+        return acc;
+      },
+      {}
+    );
+
+    documentDispatch({
+      action: DocActions.update,
+      data: { columns: updatedColumns },
+    });
+  };
   /** remove column by index
    *  @param index of column.
    */
@@ -168,6 +204,7 @@ const useTableConfig = (tableId?: string) => {
     });
   };
   const actions = {
+    insert,
     updateColumn,
     updateConfig,
     addColumn,