migrating all to useSelector hook of zustand. Demo

Author: RafaelGB

src/cdm/TableStateInterface.ts

@@ -27,6 +27,9 @@ export interface ConfigState {
         alterFilters: (filters: Partial<FilterSettings>) => void;
         alterConfig: (config: Partial<LocalSettings>) => void;
     }
+    info: {
+        getLocalSettings: () => LocalSettings;
+    }
 }
 
 export interface DataState {
@@ -57,6 +60,7 @@ export interface ColumnsState {
         alterIsHidden: (column: TableColumn, isHidden: boolean) => void;
     }
     info: {
+        getAllColumns: () => TableColumn[];
         getValueOfAllColumnsAsociatedWith: <K extends keyof TableColumn>(key: K) => TableColumn[K][];
         getVisibilityRecord: () => Record<string, boolean>;
     }

src/components/cellTypes/CheckboxCell.tsx

@@ -8,19 +8,25 @@ function CheckboxCell(props: CellComponentProps) {
   const { row, column, table } = defaultCell;
   const tableColumn = column.columnDef as TableColumn;
 
-  const [rows, dataActions] = table.options.meta.tableState.data((state) => [
-    state.rows,
-    state.actions,
-  ]);
-  const columns = table.options.meta.tableState.columns(
-    (state) => state.columns
+  const dataActions = table.options.meta.tableState.data(
+    (state) => state.actions
   );
-  const ddbbConfig = table.options.meta.tableState.configState(
-    (state) => state.ddbbConfig
+
+  const checkboxCell = table.options.meta.tableState.data(
+    (state) => state.rows[row.index]
+  );
+
+  const columnsInfo = table.options.meta.tableState.columns(
+    (state) => state.info
   );
+
+  const configInfo = table.options.meta.tableState.configState(
+    (state) => state.info
+  );
+
   /** state of cell value */
   const [checked, setChecked] = useState(
-    Boolean(rows[row.index][tableColumn.key])
+    Boolean(checkboxCell[tableColumn.key])
   );
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = event.target.checked ? 1 : 0;
@@ -29,8 +35,8 @@ function CheckboxCell(props: CellComponentProps) {
       row.index,
       column.columnDef as TableColumn,
       newValue,
-      columns,
-      ddbbConfig
+      columnsInfo.getAllColumns(),
+      configInfo.getLocalSettings()
     );
     setChecked(event.target.checked);
   };

src/components/cellTypes/EditorCell.tsx

@@ -11,14 +11,14 @@ const EditorCell = (props: EditorCellComponentProps) => {
   /** Ref to cell container */
   const editableMdRef = useRef<HTMLInputElement>();
   /** Columns information */
-  const columns = table.options.meta.tableState.columns(
-    (state) => state.columns
+  const columnsInfo = table.options.meta.tableState.columns(
+    (state) => state.info
   );
   const dataActions = table.options.meta.tableState.data(
     (state) => state.actions
   );
-  const ddbbConfig = table.options.meta.tableState.configState(
-    (state) => state.ddbbConfig
+  const configInfo = table.options.meta.tableState.configState(
+    (state) => state.info
   );
 
   const [editorValue, setEditorValue] = useState(cellValue);
@@ -48,8 +48,8 @@ const EditorCell = (props: EditorCellComponentProps) => {
       row.index,
       column.columnDef as TableColumn,
       changedValue.trim(),
-      columns,
-      ddbbConfig
+      columnsInfo.getAllColumns(),
+      configInfo.getLocalSettings()
     );
   };
 

src/components/cellTypes/NumberCell.tsx

@@ -7,14 +7,14 @@ const NumberCell = (props: CellComponentProps) => {
   const { cell, row, column, table } = defaultCell;
 
   /** Columns information */
-  const columns = table.options.meta.tableState.columns(
-    (state) => state.columns
+  const columnsInfo = table.options.meta.tableState.columns(
+    (state) => state.info
   );
   const dataActions = table.options.meta.tableState.data(
     (state) => state.actions
   );
-  const ddbbConfig = table.options.meta.tableState.configState(
-    (state) => state.ddbbConfig
+  const configInfo = table.options.meta.tableState.configState(
+    (state) => state.info
   );
 
   const [cellValue, setCellValue] = useState(cell.getValue());
@@ -49,8 +49,8 @@ const NumberCell = (props: CellComponentProps) => {
       row.index,
       column.columnDef as TableColumn,
       changedValue,
-      columns,
-      ddbbConfig
+      columnsInfo.getAllColumns(),
+      configInfo.getLocalSettings()
     );
   }
 

src/components/portals/CalendarPortal.tsx

@@ -9,22 +9,19 @@ import { TableColumn } from "cdm/FolderModel";
 const CalendarPortal = (calendarProps: CellComponentProps) => {
   const { defaultCell } = calendarProps;
   const { row, column, table } = defaultCell;
+  const { tableState } = table.options.meta;
   const tableColumn = column.columnDef as TableColumn;
-  const [rows, dataActions] = table.options.meta.tableState.data((state) => [
-    state.rows,
-    state.actions,
-  ]);
-  const columns = table.options.meta.tableState.columns(
-    (state) => state.columns
-  );
-  const ddbbConfig = table.options.meta.tableState.configState(
-    (state) => state.ddbbConfig
-  );
+  const dataActions = tableState.data((state) => state.actions);
+
+  const calendarPortalRow = tableState.data((state) => state.rows[row.index]);
+
+  const columns = tableState.columns((state) => state.columns);
+  const ddbbConfig = tableState.configState((state) => state.ddbbConfig);
 
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
   const [calendarValue, setCalendarValue] = useState(
-    rows[row.index][tableColumn.key]
+    calendarPortalRow[tableColumn.key]
   );
 
   function handleSpanOnClick(event: any) {

src/stateManagement/columns/handlers/InfoColumnFunctions.ts

@@ -17,6 +17,10 @@ export default class InfoColumnFunctions extends AbstractTableAction<ColumnsStat
             return visibilityRecord;
         };
 
+        implementation.info.getAllColumns = () => {
+            return get().columns;
+        }
+
         response.implementation = implementation;
         return this.goNext(response);
     }

src/stateManagement/useColumnsStore.tsx

@@ -40,6 +40,7 @@ function mockColumnsState(): ColumnsState {
     info: {
       getValueOfAllColumnsAsociatedWith: null,
       getVisibilityRecord: null,
+      getAllColumns: null,
     },
   };
 }

src/stateManagement/useConfigStore.ts

@@ -7,7 +7,7 @@ const useConfigStore = (view: DatabaseView) => {
     const { global_settings } = view.plugin.settings;
     const { config, filters } = view.diskConfig.yaml;
     return create<ConfigState>()(
-        (set) => ({
+        (set, get) => ({
             ddbbConfig: config,
             filters: filters,
             global: global_settings,
@@ -22,7 +22,10 @@ const useConfigStore = (view: DatabaseView) => {
                         view.diskConfig.updateConfig(alteredConfig);
                         return ({ ddbbConfig: { ...state.ddbbConfig, ...alteredConfig } });
                     }),
-            }
+            },
+            info: {
+                getLocalSettings: () => get().ddbbConfig,
+            },
         })
     );
 }