undo. Rerender is a bad idea

Author: RafaelGB

src/cdm/HeaderModel.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState, ColumnResizeMode, Header, Table } from "@tanstack/react-table";
+import { ColumnOrderState, Header, Table } from "@tanstack/react-table";
 import { DatabaseHeaderProps, RowDataType, TableColumn } from "cdm/FolderModel";
 
 export type HeaderMenuProps = {

src/cdm/TableStateInterface.ts

@@ -47,17 +47,11 @@ export interface RowTemplateState {
     update: (template: string) => void;
 }
 
-export interface RenderState {
-    enableRender: boolean;
-    alterEnableRender: (enableRender: boolean) => void;
-}
-
 export interface TableStateInterface {
     initialState: UseBoundStore<StoreApi<InitialState>>;
     configState: UseBoundStore<StoreApi<ConfigState>>;
     rowTemplate: UseBoundStore<StoreApi<RowTemplateState>>;
     data: UseBoundStore<StoreApi<DataState>>;
     sorting: UseBoundStore<StoreApi<ColumnSortingState>>;
     columns: UseBoundStore<StoreApi<ColumnsState>>;
-    renderState: UseBoundStore<StoreApi<RenderState>>;
 }

src/components/HeaderMenu.tsx

@@ -22,9 +22,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     (state) => state.ddbbConfig
   );
 
-  const alterEnableRender = table.options.meta.tableState.renderState(
-    (store) => store.alterEnableRender
-  );
   /** Header props */
   const {
     propertyIcon,
@@ -129,7 +126,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     );
 
     alterColumnLabel(column.columnDef as TableColumn, labelState);
-    alterEnableRender(true);
   }
 
   function handleKeyDown(e: any) {

src/components/Table.tsx

@@ -20,7 +20,6 @@ import {
   TableColumn,
   RowTemplateOption,
 } from "cdm/FolderModel";
-import { DatabaseView } from "DatabaseView";
 import StateManager from "StateManager";
 import { getNormalizedPath } from "helpers/VaultManagement";
 import {
@@ -37,7 +36,7 @@ import { c } from "helpers/StylesHelper";
 import { HeaderNavBar } from "components/NavBar";
 import TableHeader from "components/TableHeader";
 import CustomTemplateSelectorStyles from "components/styles/RowTemplateStyles";
-import Select, { ActionMeta, OnChangeValue } from "react-select";
+import Select, { OnChangeValue } from "react-select";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import TableCell from "components/TableCell";
@@ -69,24 +68,11 @@ export function Table(tableData: TableDataType) {
     store.global,
     store.alterConfig,
   ]);
-  const [enableRender, alterEnableRender] = tableStore.renderState((store) => [
-    store.enableRender,
-    store.alterEnableRender,
-  ]);
+
   /** Plugin services */
   const stateManager: StateManager = tableData.stateManager;
   const filePath = stateManager.file.path;
 
-  /** Reducer */
-  const rerender = React.useReducer(() => ({}), {})[1];
-  React.useEffect(() => {
-    if (enableRender) {
-      console.log("=> Table. rerender");
-      alterEnableRender(false);
-      rerender();
-    }
-  });
-
   /** Table services */
   // Sorting
   const [sorting, onSortingChange] = tableStore.sorting((store) => [
@@ -101,6 +87,9 @@ export function Table(tableData: TableDataType) {
   );
   const [persistSizingTimeout, setPersistSizingTimeout] = React.useState(null);
   // Drag and drop
+  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(
+    columns.map((c) => c.id)
+  );
   const findColumn = React.useCallback(
     (id: string) => {
       const findedColumn = columns.filter((c) => `${c.id}` === id)[0];
@@ -109,10 +98,7 @@ export function Table(tableData: TableDataType) {
         index: columns.indexOf(findedColumn),
       };
     },
-    [columns]
-  );
-  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(
-    columns.map((c) => c.id)
+    [columnOrder]
   );
   // Niveling number of columns
   if (columnOrder.length !== columns.length) {
@@ -187,7 +173,7 @@ export function Table(tableData: TableDataType) {
   );
 
   const table: Table<RowDataType> = useReactTable({
-    columns,
+    columns: columns,
     data: rows,
     columnResizeMode: ResizeConfiguration.RESIZE_MODE,
     state: {
@@ -239,6 +225,7 @@ export function Table(tableData: TableDataType) {
     debugHeaders: global.enable_debug_mode,
     debugColumns: global.enable_debug_mode,
   });
+
   // Manage input of new row
   const [inputNewRow, setInputNewRow] = React.useState("");
   const newRowRef = React.useRef(null);
@@ -263,6 +250,7 @@ export function Table(tableData: TableDataType) {
       current_row_template: settingsValue,
     });
   }
+
   LOGGER.debug(`<= Table`);
   return (
     <>

src/components/headerActions/handlers/types/NumberTypeHeaderAction.tsx

@@ -31,9 +31,6 @@ function numberTypeComponent(headerActionResponse: HeaderActionResponse) {
   const ddbbConfig = table.options.meta.tableState.configState(
     (state) => state.ddbbConfig
   );
-  const alterEnableRender = table.options.meta.tableState.renderState(
-    (store) => store.alterEnableRender
-  );
 
   const numberOnClick = (e: any) => {
     hooks.setShowType(false);
@@ -44,7 +41,6 @@ function numberTypeComponent(headerActionResponse: HeaderActionResponse) {
       ddbbConfig
     );
     alterColumnType(column.columnDef as TableColumn, InputType.NUMBER);
-    alterEnableRender(true);
   };
   return headerTypeComponent({
     onClick: numberOnClick,

src/components/headerActions/handlers/types/TagsTypeHeaderAction.tsx

@@ -32,9 +32,6 @@ function tagsTypeComponent(headerActionResponse: HeaderActionResponse) {
   const ddbbConfig = table.options.meta.tableState.configState(
     (state) => state.ddbbConfig
   );
-  const alterEnableRender = table.options.meta.tableState.renderState(
-    (store) => store.alterEnableRender
-  );
 
   const tagsOnClick = (e: any) => {
     hooks.setShowType(false);
@@ -45,7 +42,6 @@ function tagsTypeComponent(headerActionResponse: HeaderActionResponse) {
       ddbbConfig
     );
     alterColumnType(column.columnDef as TableColumn, InputType.TAGS, rows);
-    alterEnableRender(true);
   };
   return headerTypeComponent({
     onClick: tagsOnClick,

src/components/headerActions/handlers/types/TextTypeHeaderAction.tsx

@@ -32,10 +32,6 @@ function textTypeComponent(headerActionResponse: HeaderActionResponse) {
   const ddbbConfig = table.options.meta.tableState.configState(
     (state) => state.ddbbConfig
   );
-  const alterEnableRender = table.options.meta.tableState.renderState(
-    (store) => store.alterEnableRender
-  );
-
   const tagsOnClick = (e: any) => {
     hooks.setShowType(false);
     hooks.setExpanded(false);
@@ -45,7 +41,6 @@ function textTypeComponent(headerActionResponse: HeaderActionResponse) {
       ddbbConfig
     );
     alterColumnType(column.columnDef as TableColumn, InputType.TEXT);
-    alterEnableRender(true);
   };
 
   return headerTypeComponent({

src/components/reducers/TableReducer.tsx

@@ -5,7 +5,6 @@ import useConfigStore from "stateManagement/useConfigStore";
 import useDataStore from "stateManagement/useDataStore";
 import useInitialTypeStore from "stateManagement/useInitialTypeStore";
 import useRowTemplateStore from "stateManagement/useRowTemplateStore";
-import useRenderStore from "stateManagement/userRenderStore";
 import useSortingStore from "stateManagement/useSortingStore";
 
 function useTableStore(view: DatabaseView): TableStateInterface {
@@ -15,12 +14,10 @@ function useTableStore(view: DatabaseView): TableStateInterface {
   const rowTemplate = useRowTemplateStore(view);
   const sorting = useSortingStore(view);
   const columns = useColumnsStore(view);
-  const render = useRenderStore();
   return {
     configState: config,
     initialState: initialType,
     rowTemplate: rowTemplate,
-    renderState: render,
     data: data,
     sorting: sorting,
     columns: columns,

src/stateManagement/useColumnsStore.tsx

@@ -14,7 +14,7 @@ import { dbTrim } from "helpers/StylesHelper";
 import create from "zustand";
 
 const useColumnsStore = (view: DatabaseView) => {
-  return create<ColumnsState>()((set) => ({
+  return create<ColumnsState>()((set, get) => ({
     columns: view.columns,
     shadowColumns: view.shadowColumns,
     addToLeft: (column: TableColumn) =>