diff --git a/packages/datalib/src/TableGridDisplay.ts b/packages/datalib/src/TableGridDisplay.ts index d72604b65..4b4b04113 100644 --- a/packages/datalib/src/TableGridDisplay.ts +++ b/packages/datalib/src/TableGridDisplay.ts @@ -26,9 +26,10 @@ export class TableGridDisplay extends GridDisplay { ) { super(config, setConfig, cache, setCache, driver); - this.table = this.cache.tables.basetbl; + const baseTblCacheKey = `basetbl_${tableName.schemaName}_${tableName.pureName}`; + this.table = this.cache.tables[baseTblCacheKey]; if (!this.table) { - this.loadTableIntoCache('basetbl', tableName); + this.loadTableIntoCache(baseTblCacheKey, tableName); this.isLoadedCorrectly = false; } else { if (!this.table.columns || this.table.columns.length == 0) { diff --git a/packages/web/src/datagrid/TableDataGrid.js b/packages/web/src/datagrid/TableDataGrid.js new file mode 100644 index 000000000..3d734c77c --- /dev/null +++ b/packages/web/src/datagrid/TableDataGrid.js @@ -0,0 +1,71 @@ +import React from 'react'; +import DataGrid from './DataGrid'; +import { TableGridDisplay, createGridConfig, createGridCache } from '@dbgate/datalib'; +import { useConnectionInfo, getTableInfo } from '../utility/metadataLoaders'; +import engines from '@dbgate/engines'; +import useSocket from '../utility/SocketProvider'; + +export default function TableDataGrid({ + conid, + database, + schemaName, + pureName, + tabVisible, + toolbarPortalRef, + cache, + setCache, + changeSetState, + dispatchChangeSet, +}) { + const [config, setConfig] = React.useState(createGridConfig()); + + const connection = useConnectionInfo({ conid }); + + const display = React.useMemo( + () => + connection + ? new TableGridDisplay( + { schemaName, pureName }, + engines(connection), + config, + setConfig, + cache, + setCache, + (name) => getTableInfo({ conid, database, ...name }) + ) + : null, + [connection, config, cache] + ); + + const handleDatabaseStructureChanged = React.useCallback(() => { + setCache(createGridCache()); + }, []); + + const socket = useSocket(); + + React.useEffect(() => { + if (display && !display.isLoadedCorrectly) { + if (conid && socket) { + socket.on(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged); + return () => { + socket.off(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged); + }; + } + } + }, [conid, database, display]); + + if (!display) return null; + + return ( + + ); +} diff --git a/packages/web/src/tabs/TableDataTab.js b/packages/web/src/tabs/TableDataTab.js index d3baa34db..8d09b4d08 100644 --- a/packages/web/src/tabs/TableDataTab.js +++ b/packages/web/src/tabs/TableDataTab.js @@ -1,71 +1,27 @@ import React from 'react'; -import useFetch from '../utility/useFetch'; -import styled from 'styled-components'; -import theme from '../theme'; -import DataGrid from '../datagrid/DataGrid'; -import { TableGridDisplay, createGridConfig, createGridCache, createChangeSet } from '@dbgate/datalib'; -import { useTableInfo, useConnectionInfo, getTableInfo } from '../utility/metadataLoaders'; -import engines from '@dbgate/engines'; +import { createGridCache, createChangeSet } from '@dbgate/datalib'; import useUndoReducer from '../utility/useUndoReducer'; import usePropsCompare from '../utility/usePropsCompare'; import { useUpdateDatabaseForTab } from '../utility/globalState'; -import useSocket from '../utility/SocketProvider'; +import TableDataGrid from '../datagrid/TableDataGrid'; export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) { - const [config, setConfig] = React.useState(createGridConfig()); const [cache, setCache] = React.useState(createGridCache()); const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet()); useUpdateDatabaseForTab(tabVisible, conid, database); - const connection = useConnectionInfo({ conid }); - // console.log('GOT CONNECTION', connection); - - // usePropsCompare({ tableInfo, connection, config, cache }); - - const display = React.useMemo( - () => - connection - ? new TableGridDisplay( - { schemaName, pureName }, - engines(connection), - config, - setConfig, - cache, - setCache, - (name) => getTableInfo({ conid, database, ...name }) - ) - : null, - [connection, config, cache] - ); - - const handleDatabaseStructureChanged = React.useCallback(() => { - setCache(createGridCache()); - }, []); - - const socket = useSocket(); - - React.useEffect(() => { - if (display && !display.isLoadedCorrectly) { - if (conid && socket) { - socket.on(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged); - return () => { - socket.off(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged); - }; - } - } - }, [conid, database, display]); - - if (!display) return null; return ( - ); }