split components - prepare for #3

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) {

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

packages/web/src/tabs/TableDataTab.js

@@ -1,71 +1,27 @@
 import React from 'react';
-import useFetch from '../utility/useFetch';
+import { createGridCache, createChangeSet } from '@dbgate/datalib';
-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 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
+    <TableDataGrid
-      // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
       conid={conid}
       database={database}
-      display={display}
+      schemaName={schemaName}
+      pureName={pureName}
       tabVisible={tabVisible}
+      toolbarPortalRef={toolbarPortalRef}
+      cache={cache}
+      setCache={setCache}
       changeSetState={changeSetState}
       dispatchChangeSet={dispatchChangeSet}
-      toolbarPortalRef={toolbarPortalRef}
     />
   );
 }