grid load fix

packages/datalib/src/GridDisplay.ts

@@ -38,12 +38,14 @@ export function combineReferenceActions(a: ReferenceActionResult, b: ReferenceAc
   return 'noAction';
 }
 
+export type ChangeCacheFunc = (changeFunc: (config: GridCache) => GridCache) => void;
+
 export abstract class GridDisplay {
   constructor(
     public config: GridConfig,
     protected setConfig: (config: GridConfig) => void,
     public cache: GridCache,
-    protected setCache: (config: GridCache) => void,
+    protected setCache: ChangeCacheFunc,
     protected getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>,
     public driver: EngineDriver
   ) {}
@@ -67,10 +69,10 @@ export abstract class GridDisplay {
   }
 
   reload() {
-    this.setCache({
-      ...this.cache,
+    this.setCache(cache => ({
+      ...cache,
       refreshTime: new Date().getTime(),
-    });
+    }));
   }
 
   includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
@@ -128,13 +130,13 @@ export abstract class GridDisplay {
   requireFkTarget(column: DisplayColumn) {
     const { uniqueName, foreignKey } = column;
     this.getTableInfo({ schemaName: foreignKey.refSchemaName, pureName: foreignKey.refTableName }).then(table => {
-      this.setCache({
-        ...this.cache,
+      this.setCache(cache => ({
+        ...cache,
         tables: {
-          ...this.cache.tables,
+          ...cache.tables,
           [uniqueName]: table,
         },
-      });
+      }));
     });
   }
 

packages/datalib/src/TableGridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { GridDisplay, combineReferenceActions } from './GridDisplay';
+import { GridDisplay, combineReferenceActions, ChangeCacheFunc } from './GridDisplay';
 import { Select, treeToSql, dumpSqlSelect } from '@dbgate/sqltree';
 import { TableInfo, EngineDriver } from '@dbgate/types';
 import { GridConfig, GridCache } from './GridConfig';
@@ -11,7 +11,7 @@ export class TableGridDisplay extends GridDisplay {
     config: GridConfig,
     setConfig: (config: GridConfig) => void,
     cache: GridCache,
-    setCache: (config: GridCache) => void,
+    setCache: ChangeCacheFunc,
     getTableInfo: ({ schemaName, pureName }) => Promise<TableInfo>
   ) {
     super(config, setConfig, cache, setCache, getTableInfo, driver);

packages/web/package.json

@@ -27,8 +27,7 @@
     "@dbgate/engines": "^0.1.0"
   },
   "scripts": {
-    "start": "cross-env PORT=5000 react-scripts start",
-    "start:silent": "cross-env BROWSER=none PORT=5000 react-scripts start",
+    "start": "cross-env BROWSER=none PORT=5000 react-scripts start",
     "build": "react-scripts build",
     "build:app": "cross-env PUBLIC_URL=. react-scripts build",
     "test": "react-scripts test",

packages/web/src/datagrid/DataGridCore.js

@@ -41,6 +41,7 @@ import { scriptToSql } from '@dbgate/sqltree';
 import { sleep } from '../utility/common';
 import { copyTextToClipboard } from '../utility/clipboard';
 import DataGridToolbar from './DataGridToolbar';
+import usePropsCompare from '../utility/usePropsCompare';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -101,6 +102,8 @@ export default function DataGridCore(props) {
   const { conid, database, display, changeSetState, dispatchChangeSet, tabVisible } = props;
   const columns = display.getGridColumns();
 
+  // usePropsCompare(props);
+
   // console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
   const [loadProps, setLoadProps] = React.useState({
     isLoading: false,

packages/web/src/tabs/TableDataTab.js

@@ -9,6 +9,7 @@ import useConnectionInfo from '../utility/useConnectionInfo';
 import engines from '@dbgate/engines';
 import getTableInfo from '../utility/getTableInfo';
 import useUndoReducer from '../utility/useUndoReducer';
+import usePropsCompare from '../utility/usePropsCompare';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
@@ -19,6 +20,9 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
   // console.log('changeSet', changeSet);
 
   const connection = useConnectionInfo(conid);
+
+  // usePropsCompare({ tableInfo, connection, config, cache });
+
   const display = React.useMemo(
     () =>
       tableInfo && connection

packages/web/src/utility/usePrevious.js

@@ -0,0 +1,17 @@
+// copied from https://usehooks.com/usePrevious/
+
+import React from 'react';
+
+export default function usePrevious(value) {
+  const ref = React.useRef();
+
+  // Store current value in ref
+
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+
+  return ref.current;
+}

packages/web/src/utility/usePropsCompare.js

@@ -0,0 +1,12 @@
+import _ from 'lodash';
+import usePrevious from './usePrevious';
+
+export default function usePropsCompare(props) {
+  const prevProps = usePrevious(props);
+  if (!prevProps) return;
+  for (const key of _.union(_.keys(props), _.keys(prevProps))) {
+    if (props[key] !== prevProps[key]) {
+      console.log(`Different prop value found: prop=${key}, old=${prevProps[key]}, new=${prevProps[key]}`);
+    }
+  }
+}