feat: add commit in the table list

Author: invisal

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

@@ -0,0 +1,91 @@
+import applyQueryResultChanges from 'libs/ApplyQueryResultChanges';
+import generateSqlFromChanges from 'libs/GenerateSqlFromChanges';
+import generateSqlFromPlan from 'libs/GenerateSqlFromPlan';
+import { useCallback, useEffect, useState } from 'react';
+import Toolbar from 'renderer/components/Toolbar';
+import { useDialog } from 'renderer/contexts/DialogProvider';
+import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
+import { useSchema } from 'renderer/contexts/SchemaProvider';
+import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
+import { QueryResult } from 'types/SqlResult';
+
+interface CommitChangeToolbarItemProps {
+  result: QueryResult;
+  onResultChange: React.Dispatch<React.SetStateAction<QueryResult>>;
+  onRequestRefetch: () => void;
+}
+
+export default function CommitChangeToolbarItem({
+  result,
+  onResultChange,
+  onRequestRefetch,
+}: CommitChangeToolbarItemProps) {
+  const { showErrorDialog } = useDialog();
+  const [changeCount, setChangeCount] = useState(0);
+  const { clearChange, collector } = useEditableResult();
+  const { schema, currentDatabase } = useSchema();
+  const { runner } = useSqlExecute();
+
+  useEffect(() => {
+    const cb = (count: number) => {
+      setChangeCount(count);
+    };
+
+    collector.registerChange(cb);
+    return () => collector.unregisterChange(cb);
+  }, [collector, setChangeCount]);
+
+  const onCommit = useCallback(() => {
+    if (schema) {
+      const currentDatabaseSchema = schema[currentDatabase || ''];
+
+      if (currentDatabaseSchema && result) {
+        const plans = generateSqlFromChanges(
+          currentDatabaseSchema,
+          result,
+          collector.getChanges()
+        );
+
+        const rawSql = plans.map((plan) => ({
+          sql: generateSqlFromPlan(plan),
+        }));
+
+        runner
+          .execute(rawSql, { insideTransaction: true })
+          .then(() => {
+            const changes = collector.getChanges();
+
+            if (changes.new.length === 0 && changes.remove.length === 0) {
+              onResultChange((prev) => {
+                clearChange();
+                return applyQueryResultChanges(prev, changes.changes);
+              });
+            } else {
+              onRequestRefetch();
+            }
+          })
+          .catch((e) => {
+            if (e.message) {
+              showErrorDialog(e.message);
+            }
+          });
+      }
+    }
+  }, [
+    collector,
+    schema,
+    currentDatabase,
+    clearChange,
+    onResultChange,
+    onRequestRefetch,
+  ]);
+
+  return (
+    <Toolbar.Item
+      text="Commit"
+      badge={changeCount}
+      onClick={onCommit}
+      disabled={!changeCount}
+    />
+  );
+}

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

@@ -1,21 +1,15 @@
-import { useCallback, useState, useEffect } from 'react';
-import applyQueryResultChanges from 'libs/ApplyQueryResultChanges';
-import generateSqlFromChanges from 'libs/GenerateSqlFromChanges';
-import generateSqlFromPlan from 'libs/GenerateSqlFromPlan';
-import { useSchema } from 'renderer/contexts/SchemaProvider';
-import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
+import { useState } from 'react';
 import { QueryResult } from 'types/SqlResult';
 import styles from './styles.module.scss';
 import ExportModal from '../ExportModal';
-import { useDialog } from 'renderer/contexts/DialogProvider';
 import Toolbar from 'renderer/components/Toolbar';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faChevronLeft,
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { useDebounceEffect } from 'hooks/useDebounce';
-import { useEditableResult } from 'renderer/contexts/EditableQueryResultProvider';
+import CommitChangeToolbarItem from './CommitChangeToolbarItem';
 
 interface QueryResultActionProps {
   result: QueryResult;
@@ -40,13 +34,8 @@ export default function QueryResultAction({
   onSearchChange,
   time,
 }: QueryResultActionProps) {
-  const { showErrorDialog } = useDialog();
-  const [changeCount, setChangeCount] = useState(0);
   const [showExportModal, setShowExportModal] = useState(false);
-  const { clearChange, collector } = useEditableResult();
-  const { schema, currentDatabase } = useSchema();
   const [search, setSearch] = useState('');
-  const { runner } = useSqlExecute();
 
   const rowStart = page * pageSize;
   const rowEnd = Math.min(resultAfterFilter.length, rowStart + pageSize);
@@ -59,71 +48,18 @@ export default function QueryResultAction({
     1000
   );
 
-  useEffect(() => {
-    const cb = (count: number) => {
-      setChangeCount(count);
-    };
-
-    collector.registerChange(cb);
-    return () => collector.unregisterChange(cb);
-  }, [collector, setChangeCount]);
-
-  const onCommit = useCallback(() => {
-    if (schema) {
-      const currentDatabaseSchema = schema[currentDatabase || ''];
-
-      if (currentDatabaseSchema && result) {
-        const plans = generateSqlFromChanges(
-          currentDatabaseSchema,
-          result,
-          collector.getChanges()
-        );
-
-        const rawSql = plans.map((plan) => ({
-          sql: generateSqlFromPlan(plan),
-        }));
-
-        runner
-          .execute(rawSql, { insideTransaction: true })
-          .then(() => {
-            const changes = collector.getChanges();
-
-            if (changes.new.length === 0 && changes.remove.length === 0) {
-              onResultChange((prev) => {
-                clearChange();
-                return applyQueryResultChanges(prev, changes.changes);
-              });
-            } else {
-              onRequestRefetch();
-            }
-          })
-          .catch((e) => {
-            if (e.message) {
-              showErrorDialog(e.message);
-            }
-          });
-      }
-    }
-  }, [
-    collector,
-    schema,
-    currentDatabase,
-    clearChange,
-    onResultChange,
-    onRequestRefetch,
-  ]);
-
   return (
     <div className={styles.footer}>
       <Toolbar>
         <Toolbar.Text>Took {Math.round(time / 1000)}s</Toolbar.Text>
         <Toolbar.Separator />
-        <Toolbar.Item
-          text="Commit"
-          badge={changeCount}
-          onClick={onCommit}
-          disabled={!changeCount}
+
+        <CommitChangeToolbarItem
+          onRequestRefetch={onRequestRefetch}
+          onResultChange={onResultChange}
+          result={result}
         />
+
         <Toolbar.Item text="Export" onClick={() => setShowExportModal(true)} />
 
         <Toolbar.Separator />

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

@@ -44,7 +44,7 @@ function QueryResultViewer({
   );
 
   const resultWithIndex = useMemo(() => {
-    let rows = result.rows.map((value, rowIndex) => {
+    let rows = cacheResult.rows.map((value, rowIndex) => {
       return {
         rowIndex: rowIndex + page * pageSize,
         data: value,
@@ -66,7 +66,7 @@ function QueryResultViewer({
     }
 
     return rows;
-  }, [page, result, search]);
+  }, [page, cacheResult, search]);
 
   const slicedResult = useMemo(() => {
     return resultWithIndex.slice(page * pageSize, (page + 1) * pageSize);