refactor: combine query result provider and cell providers together

Author: invisal

src/renderer/contexts/EditableQueryResultProvider.tsx

@@ -0,0 +1,122 @@
+import NotImplementCallback from 'libs/NotImplementCallback';
+import ResultChangeCollector from 'libs/ResultChangeCollector';
+
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+
+import { TableEditableCellHandler } from 'renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableEditableCell';
+
+export class TableCellManager {
+  protected focused: [number, number] | null = null;
+  protected cells: Record<
+    string,
+    Record<string, TableEditableCellHandler | null>
+  > = {};
+
+  setFocus(row: number, col: number) {
+    this.clearFocus();
+    this.focused = [row, col];
+
+    const cell = this.cells[row][col];
+    if (cell) {
+      cell.setFocus(true);
+    }
+  }
+
+  getFocus() {
+    return this.focused ? [...this.focused] : null;
+  }
+
+  getFocusCell() {
+    if (this.focused) {
+      return this.get(this.focused[0], this.focused[1]);
+    }
+    return null;
+  }
+
+  clearFocus() {
+    if (this.focused) {
+      const cell = this.cells[this.focused[0]][this.focused[1]];
+      if (cell) {
+        cell.setFocus(false);
+      }
+    }
+    this.focused = null;
+  }
+
+  set(row: number, col: number, ref: TableEditableCellHandler | null) {
+    if (this.cells[row]) {
+      this.cells[row][col] = ref;
+    } else {
+      this.cells[row] = {};
+      this.cells[row][col] = ref;
+    }
+  }
+
+  get(row: number, col: number) {
+    if (this.cells[row]) {
+      return this.cells[row][col];
+    }
+    return null;
+  }
+}
+
+const QueryResultChangeContext = createContext<{
+  setChange: (row: number, col: number, value: unknown) => void;
+  removeChange: (row: number, col: number) => void;
+  collector: ResultChangeCollector;
+  clearChange: () => void;
+  cellManager: TableCellManager;
+}>({
+  collector: new ResultChangeCollector(),
+  setChange: NotImplementCallback,
+  removeChange: NotImplementCallback,
+  clearChange: NotImplementCallback,
+  cellManager: new TableCellManager(),
+});
+
+export function useEditableResult() {
+  return useContext(QueryResultChangeContext);
+}
+
+export function EditableQueryResultProvider({ children }: PropsWithChildren) {
+  const collector = useMemo(() => new ResultChangeCollector(), []);
+  const manager = useMemo(() => new TableCellManager(), []);
+
+  const setChange = useCallback(
+    (row: number, col: number, value: unknown) => {
+      collector.addChange(row, col, value);
+    },
+    [collector]
+  );
+
+  const removeChange = useCallback(
+    (row: number, col: number) => {
+      collector.removeChange(row, col);
+    },
+    [collector]
+  );
+
+  const clearChange = useCallback(() => {
+    collector.clear();
+  }, [collector]);
+
+  return (
+    <QueryResultChangeContext.Provider
+      value={{
+        removeChange,
+        setChange,
+        collector,
+        clearChange,
+        cellManager: manager,
+      }}
+    >
+      {children}
+    </QueryResultChangeContext.Provider>
+  );
+}

src/renderer/contexts/QueryResultChangeProvider.tsx

@@ -2,7 +2,6 @@ import { useCallback, useState, useEffect } from 'react';
 import applyQueryResultChanges from 'libs/ApplyQueryResultChanges';
 import generateSqlFromChanges from 'libs/GenerateSqlFromChanges';
 import generateSqlFromPlan from 'libs/GenerateSqlFromPlan';
-import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
 import { useSchema } from 'renderer/contexts/SchemaProvider';
 import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
 import { QueryResult } from 'types/SqlResult';
@@ -16,6 +15,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { useDebounceEffect } from 'hooks/useDebounce';
+import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
 
 interface QueryResultActionProps {
   result: QueryResult;
@@ -43,7 +43,7 @@ export default function QueryResultAction({
   const { showErrorDialog } = useDialog();
   const [changeCount, setChangeCount] = useState(0);
   const [showExportModal, setShowExportModal] = useState(false);
-  const { clearChange, collector } = useQueryResultChange();
+  const { clearChange, collector } = useEditableResult();
   const { schema, currentDatabase } = useSchema();
   const [search, setSearch] = useState('');
   const { runner } = useSqlExecute();

src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultAction.tsx

@@ -4,8 +4,6 @@ import TableCell from 'renderer/screens/DatabaseScreen/QueryResultViewer/TableCe
 import { QueryResultHeader, QueryResultWithIndex } from 'types/SqlResult';
 import { getUpdatableTable } from 'libs/GenerateSqlFromChanges';
 import { useSchema } from 'renderer/contexts/SchemaProvider';
-import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
-import { useTableCellManager } from './TableCellManager';
 import OptimizeTable from 'renderer/components/OptimizeTable';
 import Icon from 'renderer/components/Icon';
 import useDataTableContextMenu from './useDataTableContextMenu';
@@ -16,6 +14,7 @@ import {
   faChevronDown,
   faChevronUp,
 } from '@fortawesome/free-solid-svg-icons';
+import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
 
 interface QueryResultTableProps {
   headers: QueryResultHeader[];
@@ -33,8 +32,7 @@ function QueryResultTable({
   sortedHeader,
 }: QueryResultTableProps) {
   const [newRowCount, setNewRowCount] = useState(0);
-  const { collector } = useQueryResultChange();
-  const { cellManager } = useTableCellManager();
+  const { collector, cellManager } = useEditableResult();
   const { schema, currentDatabase } = useSchema();
 
   const [selectedRowsIndex, setSelectedRowsIndex] = useState<number[]>([]);

src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx

@@ -8,9 +8,8 @@ import {
   useRef,
 } from 'react';
 import styles from './styles.module.css';
-import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
-import { useTableCellManager } from '../TableCellManager';
 import { QueryResultHeader } from 'types/SqlResult';
+import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
 
 export interface TableEditableCellHandler {
   discard: () => void;
@@ -67,8 +66,8 @@ const TableEditableCell = forwardRef<
   },
   ref
 ) {
-  const { cellManager } = useTableCellManager();
-  const { setChange, removeChange, collector } = useQueryResultChange();
+  const { cellManager, setChange, removeChange, collector } =
+    useEditableResult();
   const [afterValue, setAfterValue] = useState(
     collector.getChange(row, col, value)
   );

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableEditableCell.tsx

@@ -3,8 +3,8 @@ import TableEditableCell, {
   TableEditableEditorProps,
   TableEditableContentProps,
 } from './TableEditableCell';
-import { useTableCellManager } from '../TableCellManager';
 import { QueryResultHeader } from 'types/SqlResult';
+import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
 
 interface TableCellCustomTypeOptions<T> {
   diff: (prev: T, current: T) => boolean;
@@ -35,7 +35,7 @@ export default function createTableCellType<T>(
     header,
   }: TableCellCustomTypeProps<T>) {
     const ref = useRef(null);
-    const { cellManager } = useTableCellManager();
+    const { cellManager } = useEditableResult();
 
     useEffect(() => {
       cellManager.set(row, col, ref?.current || null);