Merge branch '227-migrate-actual-dispatcher-to-zustand'

Author: RafaelGB

package.json

@@ -21,11 +21,11 @@
 		"@rollup/plugin-commonjs": "22.0.1",
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/plugin-node-resolve": "13.3.0",
-		"@rollup/plugin-typescript": "8.3.3",
+		"@rollup/plugin-typescript": "8.3.4",
 		"@types/jest": "28.1.6",
 		"@testing-library/jest-dom": "5.16.4",
     	"@testing-library/react": "13.3.0",
-		"@types/node": "18.6.1",
+		"@types/node": "18.6.3",
 		"@types/react": "18.0.15",
 		"@types/react-dom": "18.0.6",
 		"@types/react-color": "3.0.6",
@@ -36,7 +36,7 @@
 		"@types/luxon": "3.0.0",
 		"@typescript-eslint/eslint-plugin": "5.30.7",
 		"@typescript-eslint/parser": "5.30.7",
-		"eslint": "8.20.0",
+		"eslint": "8.21.0",
 		"jest": "28.1.3",
 		"jest-mock-extended": "2.0.7",
 		"obsidian": "0.15.4",
@@ -49,8 +49,8 @@
 		"@faker-js/faker": "7.3.0"
 	},
 	"dependencies": {
-		"@emotion/styled": "11.9.3",
-		"@mui/material": "5.9.2",
+		"@emotion/styled": "11.10.0",
+		"@mui/material": "5.9.3",
 		"@mui/icons-material": "5.8.4",
 		"@popperjs/core": "2.11.5",
 		"immutability-helper": "3.1.1",
@@ -63,13 +63,14 @@
 		"react-dom": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"@tanstack/react-table": "8.5.1",
+		"@tanstack/react-table": "8.5.5",
 		"@tanstack/match-sorter-utils": "8.1.1",
 		"react-select": "5.4.0",
 		"react-color": "2.19.3",
 		"react-window": "1.8.7",
 		"react-datepicker": "4.8.0",
 		"regenerator-runtime": "0.13.9",
-		"luxon": "3.0.1"
+		"luxon": "3.0.1",
+		"zustand": "4.0.0"
 	}
 }

src/DatabaseView.tsx

@@ -1,13 +1,19 @@
 import { DatabaseColumn } from "cdm/DatabaseModel";
-import { InitialState, RowDataType, TableDataType } from "cdm/FolderModel";
+import {
+  InitialType,
+  RowDataType,
+  TableColumn,
+  TableDataType,
+} from "cdm/FolderModel";
+import { TableStateInterface } from "cdm/TableStateInterface";
 import {
   obtainColumnsFromFolder,
   obtainMetadataColumns,
 } from "components/Columns";
 import { createDatabase } from "components/index/Database";
 import { DbFolderException } from "errors/AbstractException";
 import { DatabaseCore, InputType, StyleClasses } from "helpers/Constants";
-import obtainInitialState from "helpers/InitialState";
+import obtainInitialType from "helpers/InitialType";
 import { adapterTFilesToRows, isDatabaseNote } from "helpers/VaultManagement";
 import DBFolderPlugin from "main";
 
@@ -23,6 +29,12 @@ import { createRoot, Root } from "react-dom/client";
 import DatabaseInfo from "services/DatabaseInfo";
 import { LOGGER } from "services/Logger";
 import { SettingsModal } from "Settings";
+import useColumnsStore from "stateManagement/useColumnsStore";
+import useConfigStore from "stateManagement/useConfigStore";
+import useDataStore from "stateManagement/useDataStore";
+import useInitialTypeStore from "stateManagement/useInitialTypeStore";
+import useRowTemplateStore from "stateManagement/useRowTemplateStore";
+import useSortingStore from "stateManagement/useSortingStore";
 import StateManager from "StateManager";
 export const databaseIcon = "blocks";
 
@@ -33,6 +45,10 @@ export class DatabaseView extends TextFileView implements HoverParent {
   rootContainer: Root | null = null;
   diskConfig: DatabaseInfo;
   rows: Array<RowDataType>;
+  columns: Array<TableColumn>;
+  shadowColumns: Array<TableColumn>;
+  initial: InitialType;
+
   constructor(leaf: WorkspaceLeaf, plugin: DBFolderPlugin) {
     super(leaf);
     this.plugin = plugin;
@@ -127,29 +143,27 @@ export class DatabaseView extends TextFileView implements HoverParent {
       );
       let yamlColumns: Record<string, DatabaseColumn> =
         this.diskConfig.yaml.columns;
+      this.diskConfig.yaml.config;
       // Complete the columns with the metadata columns
       yamlColumns = await obtainMetadataColumns(
         yamlColumns,
         this.diskConfig.yaml.config
       );
       // Obtain base information about columns
-      const columns = await obtainColumnsFromFolder(yamlColumns);
+      this.columns = await obtainColumnsFromFolder(yamlColumns);
       this.rows = await adapterTFilesToRows(
         this.file.parent.path,
-        columns,
+        this.columns,
         this.diskConfig.yaml
       );
-      const initialState: InitialState = obtainInitialState(columns, this.rows);
+      this.initial = obtainInitialType(this.columns, this.rows);
       // Define table properties
+      this.shadowColumns = this.columns.filter((col) => col.skipPersist);
       const tableProps: TableDataType = {
-        columns: columns,
-        shadowColumns: columns.filter((col) => col.skipPersist),
         skipReset: false,
         view: this,
         stateManager: this.plugin.getStateManager(this.file),
-        initialState: initialState,
       };
-
       // Render database
       const table = createDatabase(tableProps);
       this.rootContainer.render(table);

src/StateManager.ts

@@ -1,21 +1,17 @@
 import { DatabaseSettings } from "cdm/SettingsModel";
 import { DatabaseView } from "DatabaseView";
-import { App, TFile } from 'obsidian';
+import { TFile } from 'obsidian';
 export default class StateManager {
   private onEmpty: () => void;
   private getGlobalSettings: () => DatabaseSettings;
   private viewSet: Set<DatabaseView> = new Set();
-
-  public app: App;
   public file: TFile;
   constructor(
-    app: App,
     initialView: DatabaseView,
     initialData: string,
     onEmpty: () => void,
     getGlobalSettings: () => DatabaseSettings
   ) {
-    this.app = app;
     this.file = initialView.file;
     this.onEmpty = onEmpty;
     this.getGlobalSettings = getGlobalSettings;

src/cdm/CellModel.ts

@@ -1,14 +1,3 @@
-import { Cell, Column, Table } from "@tanstack/react-table";
-import { RowDataType } from "cdm/FolderModel";
-
-export type CellProps = {
-    cell: Cell<RowDataType, any>,
-    column: Column<RowDataType, unknown>;
-    row: any;
-    table: Table<RowDataType>;
-    [key: string]: any;
-}
-
 export type TableCellProps = {
     row: any,
     rowIndex: any

src/cdm/CheckboxModel.ts

@@ -1,8 +1,7 @@
-import { TableColumn, TableDataType } from "cdm/FolderModel";
-import { CellProps } from "cdm/CellModel";
 
+import { CellContext } from "@tanstack/react-table";
+import { Literal } from "obsidian-dataview";
+import { RowDataType } from "cdm/FolderModel";
 export type CheckboxProps = {
-    intialState: TableDataType;
-    column: TableColumn;
-    cellProperties: CellProps;
-};
+    defaultCell: CellContext<RowDataType, Literal>;
+}

src/cdm/ComponentsModel.ts

@@ -1,25 +1,21 @@
 import NoteInfo from "services/NoteInfo";
-import { BaseComponentProps } from "cdm/DatabaseModel";
-import { CellProps } from "cdm/CellModel";
+import { CellContext } from "@tanstack/react-table";
+import { RowDataType } from "cdm/FolderModel";
+import { Literal } from "obsidian-dataview/lib/data-model/value";
 
 export type RowSelectOption = {
     backgroundColor: string,
     label: string,
 }
-export type PopperProps = {
-    dispatch: (action: any) => void;
-    row: any;
-    columns: any;
-    note: NoteInfo;
-} & BaseComponentProps;
 
+export type PopperProps = {
+    defaultCell: CellContext<RowDataType, Literal>;
+}
 
 export type TagsProps = {
-    dispatch: (action: any) => void;
-    cellProperties: CellProps;
-    columns: any;
-} & BaseComponentProps;
+    defaultCell: CellContext<RowDataType, Literal>;
+}
 
 export type CalendarProps = {
-    cellProperties: CellProps;
-} & BaseComponentProps;
+    defaultCell: CellContext<RowDataType, Literal>;
+}

src/cdm/DatabaseModel.ts

@@ -1,7 +1,7 @@
 import { RowType } from "cdm/RowTypeModel"
 import { LocalSettings } from "cdm/SettingsModel";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
-import { Column, TableOptions } from "@tanstack/react-table";
+import { Column, TableMeta, TableOptions } from "@tanstack/react-table";
 import { BaseColumn, RowDataType, TableColumn, TableDataType } from "cdm/FolderModel";
 import { RowSelectOption } from "cdm/ComponentsModel";
 
@@ -39,10 +39,6 @@ export type OptionSelect = {
     label: string;
     backgroundColor: string;
 }
-export type BaseComponentProps = {
-    intialState: TableDataType;
-    column: Column<RowDataType, unknown>;
-}
 
 export type SortedType = {
     id: string;

src/cdm/FolderModel.ts

@@ -6,6 +6,7 @@ import NoteInfo from "services/NoteInfo";
 import { TFile } from "obsidian";
 import { Column, ColumnSort, Header, Table } from "@tanstack/react-table";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
+import { TableStateInterface } from "./TableStateInterface";
 
 export type Group = Parameter | Parameters | FolderModel | Models;
 type Parameter = {
@@ -71,18 +72,15 @@ export type RowDataType = {
     [key: string]: Literal | NoteInfo
 }
 
-export type InitialState = {
+export type InitialType = {
     sortBy?: ColumnSort[],
 }
 
 export type TableDataType = {
-    columns: TableColumn[],
-    shadowColumns: TableColumn[],
     skipReset: boolean,
     view: DatabaseView,
     stateManager: StateManager,
-    dispatch?: Dispatch<any>,
-    initialState?: InitialState,
+    tableStore?: TableStateInterface
 }
 
 export interface DatabaseHeaderProps {

src/cdm/HeaderActionModel.ts

@@ -11,6 +11,11 @@ export type HeaderActionResponse = {
     }
 }
 
+export type HeaderActionModel = {
+    label: string;
+    icon: React.ReactNode;
+    onClick: (e: any) => void;
+};
 export interface HeaderAction {
     setNext(handler: HeaderAction): HeaderAction;
     handle(settingHandlerResponse: HeaderActionResponse): HeaderActionResponse;

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 = {