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

[gibsonliketheguitar]

#558

• applying the single responsibility principle, to improve maintenance in the future.
• Introduce new table action called 'insert' to replace 'handleSave' in NewColumn Component

Reason

handleModalSave === tableActions.column.update === updateColumn

 const menuModalProps = {
   ...
    handleSave: handleModalSave,
  };

const handleModalSave = (key: string, update: Record<string, any>) => {
    actions.update(key, update);
};
 
const actions: TableActions = { 
...
column: {
      ...
      update: configActions.updateColumn,
    },
}

const updateColumn = (key: string, updates: any) => {
    const { columns } = tableConfigState;

    const updatedColumns = {
      ...columns,                                   // this maintains previous index
      [key]: { ...columns[key], ...updates },       // this allows for duplicate index
    };
  };

Bug

• a copy of a new column can result in duplicated indexes
• after copy, the other column's index has to be updated

Solution

• calculate the insert position, given left or right position, and handle the edge case
• use _orderBy lodash to covert columns into a data structure where we can use .splice on
• after insert, use reduce to rewrite index and return data into object format for dispatcher function

[gibsonliketheguitar]

wait for #626 to be merge. 626 contains fix for keeping the index correct.
This feature breaks when columns are delete because index are not updated