diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index fcc805307..c90ab8e2f 100644 --- a/packages/datalib/src/GridDisplay.ts +++ b/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, 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, }, - }); + })); }); } diff --git a/packages/datalib/src/TableGridDisplay.ts b/packages/datalib/src/TableGridDisplay.ts index 2a2561d6f..b6a2aa6a1 100644 --- a/packages/datalib/src/TableGridDisplay.ts +++ b/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 ) { super(config, setConfig, cache, setCache, getTableInfo, driver); diff --git a/packages/web/package.json b/packages/web/package.json index fe89417d1..c3dde9d92 100644 --- a/packages/web/package.json +++ b/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", diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index 1b4daa7f4..8dec22366 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/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, diff --git a/packages/web/src/tabs/TableDataTab.js b/packages/web/src/tabs/TableDataTab.js index ae5d174e1..b10b2164d 100644 --- a/packages/web/src/tabs/TableDataTab.js +++ b/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 diff --git a/packages/web/src/utility/usePrevious.js b/packages/web/src/utility/usePrevious.js new file mode 100644 index 000000000..52ac35ca1 --- /dev/null +++ b/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; +} diff --git a/packages/web/src/utility/usePropsCompare.js b/packages/web/src/utility/usePropsCompare.js new file mode 100644 index 000000000..2653e8a28 --- /dev/null +++ b/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]}`); + } + } +}