dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 06:46:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

split components - prepare for #3

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-10 07:31:11 +02:00
parent 8f8dd15c04
commit 1e91abf37b
3 changed files with 82 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/web/src/tabs/TableDataTab.js
View File

@@ -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 (
<DataGrid
// key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
<TableDataGrid
conid={conid}
database={database}
display={display}
schemaName={schemaName}
pureName={pureName}
tabVisible={tabVisible}
toolbarPortalRef={toolbarPortalRef}
cache={cache}
setCache={setCache}
changeSetState={changeSetState}
dispatchChangeSet={dispatchChangeSet}
toolbarPortalRef={toolbarPortalRef}
/>
);
}