memorize grid config

packages/web/src/datagrid/TableDataGrid.js

@@ -42,29 +42,28 @@ export default function TableDataGrid({
   setCache = undefined,
   masterLoadedTime = undefined,
 }) {
-  const [myConfig, setMyConfig] = React.useState(createGridConfig());
   // const [childConfig, setChildConfig] = React.useState(createGridConfig());
   const [myCache, setMyCache] = React.useState(createGridCache());
   const [childCache, setChildCache] = React.useState(createGridCache());
   const [refReloadToken, setRefReloadToken] = React.useState(0);
   const [myLoadedTime, setMyLoadedTime] = React.useState(0);
 
-  const { childConfig } = config || myConfig;
+  const { childConfig } = config;
   const setChildConfig = (value, reference = undefined) => {
     if (_.isFunction(value)) {
-      (setConfig || setMyConfig)((x) => ({
+      setConfig((x) => ({
         ...x,
         childConfig: value(x.childConfig),
       }));
     } else {
-      (setConfig || setMyConfig)((x) => ({
+      setConfig((x) => ({
         ...x,
         childConfig: value,
         reference: reference === undefined ? x.reference : reference,
       }));
     }
   };
-  const { reference } = config || myConfig;
+  const { reference } = config;
 
   const connection = useConnectionInfo({ conid });
   const dbinfo = useDatabaseInfo({ conid, database });
@@ -75,8 +74,8 @@ export default function TableDataGrid({
       ? new TableGridDisplay(
           { schemaName, pureName },
           engines(connection),
-          config || myConfig,
+          config,
-          setConfig || setMyConfig,
+          setConfig,
           cache || myCache,
           setCache || setMyCache,
           dbinfo
@@ -95,7 +94,7 @@ export default function TableDataGrid({
     const newDisplay = createDisplay();
     if (display && display.isLoadedCorrectly && !newDisplay.isLoadedCorrectly) return;
     setDisplay(newDisplay);
-  }, [connection, config || myConfig, cache || myCache, conid, database, schemaName, pureName, dbinfo]);
+  }, [connection, config, cache || myCache, conid, database, schemaName, pureName, dbinfo]);
 
   const handleDatabaseStructureChanged = React.useCallback(() => {
     (setCache || setMyCache)(createGridCache());

packages/web/src/tabs/TableDataTab.js

@@ -4,16 +4,18 @@ import useUndoReducer from '../utility/useUndoReducer';
 import usePropsCompare from '../utility/usePropsCompare';
 import { useUpdateDatabaseForTab } from '../utility/globalState';
 import TableDataGrid from '../datagrid/TableDataGrid';
+import useGridConfig from '../utility/useGridConfig';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef, tabid }) {
   const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
   useUpdateDatabaseForTab(tabVisible, conid, database);
-  // const [config, setConfig] = React.useState(createGridConfig());
+  const [config, setConfig] = useGridConfig(tabid);
 
   return (
     <TableDataGrid
       conid={conid}
-      // config={config}
+      config={config}
+      setConfig={setConfig}
       database={database}
       schemaName={schemaName}
       pureName={pureName}

packages/web/src/tabs/ViewDataTab.js

@@ -3,16 +3,17 @@ import useFetch from '../utility/useFetch';
 import styled from 'styled-components';
 import theme from '../theme';
 import DataGrid from '../datagrid/DataGrid';
-import { ViewGridDisplay, createGridConfig, createGridCache, createChangeSet } from '@dbgate/datalib';
+import { ViewGridDisplay, createGridCache, createChangeSet } from '@dbgate/datalib';
 import { useConnectionInfo, useViewInfo } from '../utility/metadataLoaders';
 import engines from '@dbgate/engines';
 import useUndoReducer from '../utility/useUndoReducer';
 import usePropsCompare from '../utility/usePropsCompare';
 import { useUpdateDatabaseForTab } from '../utility/globalState';
+import useGridConfig from '../utility/useGridConfig';
 
-export default function ViewDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
+export default function ViewDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef, tabid }) {
   const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
-  const [config, setConfig] = React.useState(createGridConfig());
+  const [config, setConfig] = useGridConfig(tabid);
   const [cache, setCache] = React.useState(createGridCache());
   const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
 
@@ -24,7 +25,15 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
   const display = React.useMemo(
     () =>
       viewInfo && connection
-        ? new ViewGridDisplay(viewInfo, engines(connection), config, setConfig, cache, setCache)
+        ? new ViewGridDisplay(
+            viewInfo,
+            engines(connection),
+            //@ts-ignore
+            config,
+            setConfig,
+            cache,
+            setCache
+          )
         : null,
     [viewInfo, connection, config, cache]
   );

packages/web/src/utility/useGridConfig.js

@@ -0,0 +1,18 @@
+import { createGridConfig } from '@dbgate/datalib';
+import React from 'react';
+
+const loadGridConfigFunc = (tabid) => () => {
+  const existing = localStorage.getItem(`grid_${tabid}`);
+  if (existing) return JSON.parse(existing);
+  return createGridConfig();
+};
+
+export default function useGridConfig(tabid) {
+  const [config, setConfig] = React.useState(loadGridConfigFunc(tabid));
+
+  React.useEffect(() => {
+    localStorage.setItem(`grid_${tabid}`, JSON.stringify(config));
+  }, [config]);
+
+  return [config, setConfig];
+}

packages/web/src/widgets/FilesWidget.js

@@ -19,7 +19,7 @@ function OpenedTabsList() {
 
   return (
     <>
-      <WidgetTitle>Opened tabs</WidgetTitle>
+      <WidgetTitle>Recently closed tabs</WidgetTitle>
       <WidgetsInnerContainer>
         <AppObjectList list={tabs} makeAppObj={openedTabAppObject()} />
       </WidgetsInnerContainer>