free table editor uses useEditorData

packages/web/src/appobj/ArchiveFileAppObject.js

@@ -35,7 +35,7 @@ function Menu({ data, setOpenedTabs }) {
       icon: 'img archive',
       tabComponent: 'FreeTableTab',
       props: {
-        initialData: {
+        initialArgs: {
           functionName: 'archiveReader',
           props: {
             fileName: data.fileName,

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -146,7 +146,7 @@ function Menu({ data }) {
                 icon: 'img free-table',
                 tabComponent: 'FreeTableTab',
                 props: {
-                  initialData: {
+                  initialArgs: {
                     functionName: 'tableReader',
                     props: {
                       connection: {

packages/web/src/datagrid/DataGridCore.js

@@ -324,19 +324,21 @@ export default function DataGridCore(props) {
   const handleOpenFreeTable = () => {
     const columns = getSelectedColumns();
     const rows = getSelectedRowData().map((row) => _.pickBy(row, (v, col) => columns.find((x) => x.columnName == col)));
-    openNewTab(setOpenedTabs, {
+    openNewTab(
-      title: 'selection',
+      setOpenedTabs,
-      icon: 'img free-table',
+      {
-      tabComponent: 'FreeTableTab',
+        title: 'selection',
-      props: {
+        icon: 'img free-table',
-        initialData: {
+        tabComponent: 'FreeTableTab',
-          structure: {
+        props: {},
-            columns,
-          },
-          rows,
-        },
       },
-    });
+      {
+        structure: {
+          columns,
+        },
+        rows,
+      }
+    );
   };
 
   const handleContextMenu = (event) => {

packages/web/src/tabs/FreeTableTab.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { createGridCache, createChangeSet, createGridConfig, createFreeTableModel } from 'dbgate-datalib';
+import {  createFreeTableModel } from 'dbgate-datalib';
 import useUndoReducer from '../utility/useUndoReducer';
-import usePropsCompare from '../utility/usePropsCompare';
+import { useSetOpenedTabs } from '../utility/globalState';
-import { useSetOpenedTabs, useUpdateDatabaseForTab } from '../utility/globalState';
-import TableDataGrid from '../datagrid/TableDataGrid';
 import useGridConfig from '../utility/useGridConfig';
 import FreeTableGrid from '../freetable/FreeTableGrid';
 import SaveArchiveModal from '../modals/SaveArchiveModal';
@@ -12,46 +10,28 @@ import axios from '../utility/axios';
 import LoadingInfo from '../widgets/LoadingInfo';
 import { changeTab } from '../utility/common';
 import ErrorInfo from '../widgets/ErrorInfo';
+import useEditorData from '../utility/useEditorData';
 
-export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid, initialData }) {
+export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, toolbarPortalRef, tabid, initialArgs }) {
   const [config, setConfig] = useGridConfig(tabid);
   const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
-  const storageKey = `tabdata_freetable_${tabid}`;
   const saveFileModalState = useModalState();
   const setOpenedTabs = useSetOpenedTabs();
-  const [isLoading, setIsLoading] = React.useState(false);
+  const { initialData, setEditorData, errorMessage, isLoading } = useEditorData({
-  const [errorMessage, setErrorMessage] = React.useState(null);
+    tabid,
-
+    loadFromArgs:
-  const handleLoadInitialData = async () => {
+      initialArgs && initialArgs.functionName
-    setIsLoading(true);
+        ? () => axios.post('runners/load-reader', initialArgs).then((x) => x.data)
-    try {
+        : null,
-      const resp = await axios.post('runners/load-reader', initialData);
+  });
-      // @ts-ignore
-      dispatchModel({ type: 'reset', value: resp.data });
-      setIsLoading(false);
-    } catch (err) {
-      setIsLoading(false);
-      const errorMessage = (err && err.response && err.response.data && err.response.data.error) || 'Loading failed';
-      setErrorMessage(errorMessage);
-      console.error(err.response);
-    }
-  };
 
   React.useEffect(() => {
-    const existingData = localStorage.getItem(storageKey);
+    // @ts-ignore
-    if (existingData) {
+    if (initialData) dispatchModel({ type: 'reset', value: initialData });
-      const value = JSON.parse(existingData);
+  }, [initialData]);
-      // @ts-ignore
-      dispatchModel({ type: 'reset', value });
-    } else if (initialData) {
-      if (initialData.functionName) handleLoadInitialData();
-      // @ts-ignore
-      else dispatchModel({ type: 'reset', value: initialData });
-    }
-  }, []);
 
   React.useEffect(() => {
-    localStorage.setItem(storageKey, JSON.stringify(modelState.value));
+    setEditorData(modelState.value);
   }, [modelState]);
 
   const handleSave = async (folder, file) => {
@@ -81,12 +61,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
         toolbarPortalRef={toolbarPortalRef}
         onSave={() => saveFileModalState.open()}
       />
-      <SaveArchiveModal
+      <SaveArchiveModal modalState={saveFileModalState} folder={archiveFolder} file={archiveFile} onSave={handleSave} />
-        modalState={saveFileModalState}
-        folder={archiveFolder}
-        file={archiveFile}
-        onSave={handleSave}
-      />
     </>
   );
 }

packages/web/src/utility/useEditorData.js

@@ -4,26 +4,35 @@ import localforage from 'localforage';
 import { changeTab } from './common';
 import { useSetOpenedTabs } from './globalState';
 
-export default function useEditorData({ tabid, loadFromArgs }) {
+export default function useEditorData({ tabid, loadFromArgs = null }) {
   const localStorageKey = `tabdata_${tabid}`;
   const setOpenedTabs = useSetOpenedTabs();
   const changeCounterRef = React.useRef(0);
   const savedCounterRef = React.useRef(0);
+  const [errorMessage, setErrorMessage] = React.useState(null);
 
   const [value, setValue] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
+  const initialDataRef = React.useRef(null);
 
   const valueRef = React.useRef(null);
 
   const initialLoad = async () => {
     if (loadFromArgs) {
-      const init = await loadFromArgs();
+      try {
-      changeTab(tabid, setOpenedTabs, (tab) => ({
+        const init = await loadFromArgs();
-        ...tab,
+        changeTab(tabid, setOpenedTabs, (tab) => ({
-        props: _.omit(tab.props, ['initialArgs']),
+          ...tab,
-      }));
+          props: _.omit(tab.props, ['initialArgs']),
-      setValue(init);
+        }));
-      valueRef.current = init;
+        setValue(init);
+        valueRef.current = init;
+        initialDataRef.current = init;
+      } catch (err) {
+        const message = (err && err.response && err.response.data && err.response.data.error) || 'Loading failed';
+        setErrorMessage(message);
+        console.error(err.response);
+      }
     } else {
       const initFallback = localStorage.getItem(localStorageKey);
       if (initFallback != null) {
@@ -33,11 +42,13 @@ export default function useEditorData({ tabid, loadFromArgs }) {
         // move to local forage
         await localforage.setItem(localStorageKey, init);
         localStorage.removeItem(localStorageKey);
+        initialDataRef.current = init;
       } else {
         const init = await localforage.getItem(localStorageKey);
         if (init) {
           setValue(init);
           valueRef.current = init;
+          initialDataRef.current = init;
         }
       }
     }
@@ -82,5 +93,11 @@ export default function useEditorData({ tabid, loadFromArgs }) {
     };
   }, []);
 
-  return { editorData: value, setEditorData: handleChange, isLoading };
+  return {
+    editorData: value,
+    setEditorData: handleChange,
+    isLoading,
+    initialData: initialDataRef.current,
+    errorMessage,
+  };
 }