feat: integrate database controller (tauri)

* feat: using controllers in react hooks WIP (#1915)

* chore: add edit / create field test

* chore: add delete field test

* chore: change log class arguments

* chore: delete/create row

* chore: set tracing log to debug level

* fix: filter notification with id

* chore: add get single select type option data

* fix: high cpu usage

* chore: format code

* chore: update tokio version

* chore: config tokio runtime subscriber

* chore: add profiling feature

* chore: setup auto login

* chore: fix tauri build

* chore: (unstable) using controllers

* fix: initially authenticated and serializable fix

* fix: ci warning

* ci: compile error

* fix: new folder trash overflow

* fix: min width for nav panel

* fix: nav panel and main panel animation on hide menu

* fix: highlight active page

* fix: post merge fixes

* fix: post merge fix

* fix: remove warnings

* fix: change IDatabaseField fix eslint errors

* chore: create cell component for each field type

* chore: move cell hook into custom cell component

* chore: refactor row hook

* chore: add tauri clean

---------

Co-authored-by: nathan <[email protected]>
Co-authored-by: Nathan.fooo <[email protected]>

* ci: fix wanrings

---------

Co-authored-by: Askarbek Zadauly <[email protected]>

Author: appflowy

frontend/appflowy_tauri/package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview",
     "format": "prettier --write .",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
+    "test:errors": "eslint --quiet --ext .js,.ts,.tsx .",
     "test:prettier": "yarn prettier --list-different src",
+    "tauri:clean": "cargo make --cwd .. tauri_clean",
     "tauri:dev": "tauri dev",
     "test": "jest"
   },

frontend/appflowy_tauri/src/appflowy_app/components/_shared/Database.hooks.ts

@@ -9,7 +9,7 @@ export const useDatabase = () => {
   const database = useAppSelector((state) => state.database);
 
   const newField = () => {
-    dispatch(
+    /* dispatch(
       databaseActions.addField({
         field: {
           fieldId: nanoid(8),
@@ -18,22 +18,25 @@ export const useDatabase = () => {
           title: 'new field',
         },
       })
-    );
+    );*/
+    console.log('depreciated');
   };
 
   const renameField = (fieldId: string, newTitle: string) => {
-    const field = database.fields[fieldId];
+    /*   const field = database.fields[fieldId];
     field.title = newTitle;
 
     dispatch(
       databaseActions.updateField({
         field,
       })
-    );
+    );*/
+    console.log('depreciated');
   };
 
   const newRow = () => {
-    dispatch(databaseActions.addRow());
+    // dispatch(databaseActions.addRow());
+    console.log('depreciated');
   };
 
   return {

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/loadField.ts

@@ -0,0 +1,108 @@
+import { TypeOptionController } from '../../../stores/effects/database/field/type_option/type_option_controller';
+import { Some } from 'ts-results';
+import { IDatabaseField, ISelectOption } from '../../../stores/reducers/database/slice';
+import {
+  ChecklistTypeOptionPB,
+  DateFormat,
+  FieldType,
+  MultiSelectTypeOptionPB,
+  NumberFormat,
+  SingleSelectTypeOptionPB,
+  TimeFormat,
+} from '../../../../services/backend';
+import {
+  makeChecklistTypeOptionContext,
+  makeDateTypeOptionContext,
+  makeMultiSelectTypeOptionContext,
+  makeNumberTypeOptionContext,
+  makeSingleSelectTypeOptionContext,
+} from '../../../stores/effects/database/field/type_option/type_option_context';
+import { boardActions } from '../../../stores/reducers/board/slice';
+import { FieldInfo } from '../../../stores/effects/database/field/field_controller';
+import { AppDispatch } from '../../../stores/store';
+
+export default async function (viewId: string, fieldInfo: FieldInfo, dispatch?: AppDispatch): Promise<IDatabaseField> {
+  const field = fieldInfo.field;
+  const typeOptionController = new TypeOptionController(viewId, Some(fieldInfo));
+
+  // temporary hack to set grouping field
+  let groupingFieldSelected = false;
+
+  switch (field.field_type) {
+    case FieldType.SingleSelect:
+    case FieldType.MultiSelect:
+    case FieldType.Checklist: {
+      let selectOptions: ISelectOption[] = [];
+      let typeOption: SingleSelectTypeOptionPB | MultiSelectTypeOptionPB | ChecklistTypeOptionPB | undefined;
+
+      if (field.field_type === FieldType.SingleSelect) {
+        typeOption = (await makeSingleSelectTypeOptionContext(typeOptionController).getTypeOption()).unwrap();
+        if (!groupingFieldSelected) {
+          if (dispatch) {
+            dispatch(boardActions.setGroupingFieldId({ fieldId: field.id }));
+          }
+          groupingFieldSelected = true;
+        }
+      }
+      if (field.field_type === FieldType.MultiSelect) {
+        typeOption = (await makeMultiSelectTypeOptionContext(typeOptionController).getTypeOption()).unwrap();
+      }
+      if (field.field_type === FieldType.Checklist) {
+        typeOption = (await makeChecklistTypeOptionContext(typeOptionController).getTypeOption()).unwrap();
+      }
+
+      if (typeOption) {
+        selectOptions = typeOption.options.map<ISelectOption>((option) => {
+          return {
+            selectOptionId: option.id,
+            title: option.name,
+            color: option.color,
+          };
+        });
+      }
+
+      return {
+        fieldId: field.id,
+        title: field.name,
+        fieldType: field.field_type,
+        fieldOptions: {
+          selectOptions,
+        },
+      };
+    }
+
+    case FieldType.Number: {
+      const typeOption = (await makeNumberTypeOptionContext(typeOptionController).getTypeOption()).unwrap();
+      return {
+        fieldId: field.id,
+        title: field.name,
+        fieldType: field.field_type,
+        fieldOptions: {
+          numberFormat: typeOption.format,
+        },
+      };
+    }
+
+    case FieldType.DateTime: {
+      const typeOption = (await makeDateTypeOptionContext(typeOptionController).getTypeOption()).unwrap();
+      return {
+        fieldId: field.id,
+        title: field.name,
+        fieldType: field.field_type,
+        fieldOptions: {
+          dateFormat: typeOption.date_format,
+          timeFormat: typeOption.time_format,
+          includeTime: typeOption.include_time,
+        },
+      };
+    }
+
+    default: {
+      return {
+        fieldId: field.id,
+        title: field.name,
+        fieldType: field.field_type,
+      };
+    }
+  }
+}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts

@@ -0,0 +1,32 @@
+import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '../../../stores/effects/database/cell/cell_cache';
+import { FieldController } from '../../../stores/effects/database/field/field_controller';
+import { CellControllerBuilder } from '../../../stores/effects/database/cell/controller_builder';
+import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '../../../../services/backend';
+import { useEffect, useState } from 'react';
+
+export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fieldController: FieldController) => {
+  const [data, setData] = useState<DateCellDataPB | URLCellDataPB | SelectOptionCellDataPB | string | undefined>();
+
+  useEffect(() => {
+    const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
+    const cellController = builder.build();
+    cellController.subscribeChanged({
+      onCellChanged: (value) => {
+        setData(value.unwrap());
+      },
+    });
+
+    // ignore the return value, because we are using the subscription
+    void cellController.getCellData();
+
+    // dispose the cell controller when the component is unmounted
+    return () => {
+      void cellController.dispose();
+    };
+  }, []);
+
+  return {
+    data,
+  };
+};

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { DatabaseController } from '../../../stores/effects/database/database_controller';
+import {
+  databaseActions,
+  DatabaseFieldMap,
+  IDatabaseColumn,
+  IDatabaseRow,
+} from '../../../stores/reducers/database/slice';
+import { useAppDispatch, useAppSelector } from '../../../stores/store';
+import loadField from './loadField';
+import { FieldInfo } from '../../../stores/effects/database/field/field_controller';
+import { RowInfo } from '../../../stores/effects/database/row/row_cache';
+
+export const useDatabase = (viewId: string) => {
+  const dispatch = useAppDispatch();
+  const databaseStore = useAppSelector((state) => state.database);
+  const boardStore = useAppSelector((state) => state.board);
+  const [controller, setController] = useState<DatabaseController>();
+  const [rows, setRows] = useState<readonly RowInfo[]>([]);
+
+  useEffect(() => {
+    if (!viewId.length) return;
+    const c = new DatabaseController(viewId);
+    setController(c);
+
+    // on unmount dispose the controller
+    return () => void c.dispose();
+  }, [viewId]);
+
+  const loadFields = async (fieldInfos: readonly FieldInfo[]) => {
+    const fields: DatabaseFieldMap = {};
+    const columns: IDatabaseColumn[] = [];
+
+    for (const fieldInfo of fieldInfos) {
+      const fieldPB = fieldInfo.field;
+      columns.push({
+        fieldId: fieldPB.id,
+        sort: 'none',
+        visible: fieldPB.visibility,
+      });
+
+      const field = await loadField(viewId, fieldInfo, dispatch);
+      fields[field.fieldId] = field;
+    }
+
+    dispatch(databaseActions.updateFields({ fields }));
+    dispatch(databaseActions.updateColumns({ columns }));
+    console.log(fields, columns);
+  };
+
+  useEffect(() => {
+    if (!controller) return;
+
+    void (async () => {
+      controller.subscribe({
+        onRowsChanged: (rowInfos) => {
+          setRows(rowInfos);
+        },
+        onFieldsChanged: (fieldInfos) => {
+          void loadFields(fieldInfos);
+        },
+      });
+      await controller.open();
+    })();
+  }, [controller]);
+
+  return { loadFields, controller, rows };
+};

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts

@@ -0,0 +1,43 @@
+import { DatabaseController } from '../../../stores/effects/database/database_controller';
+import { RowController } from '../../../stores/effects/database/row/row_controller';
+import { RowInfo } from '../../../stores/effects/database/row/row_cache';
+import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_svc';
+import { useEffect, useState } from 'react';
+
+export const useRow = (viewId: string, databaseController: DatabaseController, rowInfo: RowInfo) => {
+  const [cells, setCells] = useState<{ fieldId: string; cellIdentifier: CellIdentifier }[]>([]);
+  const [rowController, setRowController] = useState<RowController>();
+
+  useEffect(() => {
+    const rowCache = databaseController.databaseViewCache.getRowCache();
+    const fieldController = databaseController.fieldController;
+    const c = new RowController(rowInfo, fieldController, rowCache);
+    setRowController(c);
+
+    return () => {
+      // dispose row controller in future
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!rowController) return;
+
+    void (async () => {
+      const cellsPB = await rowController.loadCells();
+      const loadingCells: { fieldId: string; cellIdentifier: CellIdentifier }[] = [];
+
+      for (const [fieldId, cellIdentifier] of cellsPB.entries()) {
+        loadingCells.push({
+          fieldId,
+          cellIdentifier,
+        });
+      }
+
+      setCells(loadingCells);
+    })();
+  }, [rowController]);
+
+  return {
+    cells: cells,
+  };
+};

frontend/appflowy_tauri/src/appflowy_app/components/auth/ProtectedRoutes.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { GetStarted } from './GetStarted/GetStarted';
 import { AppflowyLogo } from '../_shared/svg/AppflowyLogo';
 
+
 export const ProtectedRoutes = () => {
   const { currentUser, checkUser } = useAuth();
   const [isLoading, setIsLoading] = useState(true);

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.hooks.ts

@@ -1,34 +1,24 @@
 import { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../stores/store';
 import { boardActions } from '../../stores/reducers/board/slice';
-import { ICellData, IDatabase, IDatabaseRow, ISelectOption } from '../../stores/reducers/database/slice';
+import { ISelectOption, ISelectOptionType } from '../../stores/reducers/database/slice';
 
 export const useBoard = () => {
   const dispatch = useAppDispatch();
   const groupingFieldId = useAppSelector((state) => state.board);
   const database = useAppSelector((state) => state.database);
   const [title, setTitle] = useState('');
-  const [boardColumns, setBoardColumns] =
-    useState<(ISelectOption & { rows: (IDatabaseRow & { isGhost: boolean })[] })[]>();
+  const [boardColumns, setBoardColumns] = useState<ISelectOption[]>([]);
   const [movingRowId, setMovingRowId] = useState<string | undefined>(undefined);
   const [ghostLocation, setGhostLocation] = useState<{ column: number; row: number }>({ column: 0, row: 0 });
 
   useEffect(() => {
     setTitle(database.title);
-    setBoardColumns(
-      database.fields[groupingFieldId].fieldOptions.selectOptions?.map((groupFieldItem) => {
-        const rows = database.rows
-          .filter((row) => row.cells[groupingFieldId].optionIds?.some((so) => so === groupFieldItem.selectOptionId))
-          .map((row) => ({
-            ...row,
-            isGhost: false,
-          }));
-        return {
-          ...groupFieldItem,
-          rows: rows,
-        };
-      }) || []
-    );
+    if (database.fields[groupingFieldId]) {
+      setBoardColumns(
+        (database.fields[groupingFieldId].fieldOptions as ISelectOptionType | undefined)?.selectOptions || []
+      );
+    }
   }, [database, groupingFieldId]);
 
   const changeGroupingField = (fieldId: string) => {

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx

@@ -1,13 +1,13 @@
 import { SettingsSvg } from '../_shared/svg/SettingsSvg';
 import { SearchInput } from '../_shared/SearchInput';
-import { useDatabase } from '../_shared/Database.hooks';
 import { BoardBlock } from './BoardBlock';
 import { NewBoardBlock } from './NewBoardBlock';
-import { IDatabaseRow } from '../../stores/reducers/database/slice';
 import { useBoard } from './Board.hooks';
+import { useDatabase } from '../_shared/database-hooks/useDatabase';
+
+export const Board = ({ viewId }: { viewId: string }) => {
+  const { controller, rows } = useDatabase(viewId);
 
-export const Board = () => {
-  const { database, newField, renameField, newRow } = useDatabase();
   const {
     title,
     boardColumns,
@@ -36,16 +36,15 @@ export const Board = () => {
       </div>
       <div className={'relative w-full flex-1 overflow-auto'}>
         <div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
-          {database &&
+          {controller &&
             boardColumns?.map((column, index) => (
               <BoardBlock
+                viewId={viewId}
+                controller={controller}
                 key={index}
                 title={column.title}
+                rows={rows}
                 groupingFieldId={groupingFieldId}
-                count={column.rows.length}
-                fields={database.fields}
-                columns={database.columns}
-                rows={column.rows}
                 startMove={startMove}
                 endMove={endMove}
               />