use editor data hook

packages/web/src/utility/common.js

@@ -1,4 +1,5 @@
 import uuidv1 from 'uuid/v1';
+import localforage from 'localforage';
 
 export class LoadingToken {
   constructor() {
@@ -14,8 +15,11 @@ export function sleep(milliseconds) {
   return new Promise((resolve) => window.setTimeout(() => resolve(null), milliseconds));
 }
 
-export function openNewTab(setOpenedTabs, newTab) {
+export async function openNewTab(setOpenedTabs, newTab, initialData = undefined) {
   const tabid = uuidv1();
+  if (initialData) {
+    await localforage.setItem(`tabdata_${tabid}`, initialData);
+  }
   setOpenedTabs((files) => [
     ...(files || []).map((x) => ({ ...x, selected: false })),
     {

packages/web/src/utility/useEditorData.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import _ from 'lodash';
+import localforage from 'localforage';
+
+export default function useEditorData(tabid, initialData = null) {
+  const localStorageKey = `tabdata_${tabid}`;
+
+  const [value, setValue] = React.useState(initialData);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  const valueRef = React.useRef(null);
+
+  const initialLoad = async () => {
+    const init = await localforage.getItem(localStorageKey);
+    if (init) {
+      setValue(init);
+      valueRef.current = init;
+    }
+    setIsLoading(false);
+  };
+
+  React.useEffect(() => {
+    initialLoad();
+  }, []);
+
+  const saveToStorage = React.useCallback(async () => {
+    if (valueRef.current == null) return;
+    try {
+      await localforage.setItem(localStorageKey, valueRef.current);
+    } catch (err) {
+      console.error(err);
+    }
+  }, [localStorageKey, valueRef]);
+
+  const saveToStorageDebounced = React.useMemo(() => _.debounce(saveToStorage, 500), [saveToStorage]);
+
+  const handleChange = (newValue) => {
+    if (newValue != null) valueRef.current = newValue;
+    setValue(newValue);
+    saveToStorageDebounced();
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('beforeunload', saveToStorage);
+    return () => {
+      saveToStorage();
+      window.removeEventListener('beforeunload', saveToStorage);
+    };
+  }, []);
+
+  return { editorData: value, setEditorData: handleChange, isLoading };
+}

packages/web/src/utility/useSqlTemplate.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { getDbCore, getConnectionInfo, getSqlObjectInfo } from '../utility/metadataLoaders';
+import sqlFormatter from 'sql-formatter';
+import useExtensions from '../utility/useExtensions';
+import { driverBase, findEngineDriver } from 'dbgate-tools';
+
+export default function useSqlTemplate(sqlTemplate, props) {
+  const [sql, setSql] = React.useState('');
+  const extensions = useExtensions();
+  const [isLoading, setIsLoading] = React.useState(!!sqlTemplate);
+
+  async function loadTemplate() {
+    if (sqlTemplate == 'CREATE TABLE') {
+      const tableInfo = await getDbCore(props, props.objectTypeField || 'tables');
+      const connection = await getConnectionInfo(props);
+      const driver = findEngineDriver(connection, extensions) || driverBase;
+      const dmp = driver.createDumper();
+      if (tableInfo) dmp.createTable(tableInfo);
+      setSql(dmp.s);
+    }
+    if (sqlTemplate == 'CREATE OBJECT') {
+      const objectInfo = await getSqlObjectInfo(props);
+      if (objectInfo) {
+        if (objectInfo.requiresFormat && objectInfo.createSql) setSql(sqlFormatter.format(objectInfo.createSql));
+        else setSql(objectInfo.createSql);
+      }
+    }
+    if (sqlTemplate == 'EXECUTE PROCEDURE') {
+      const procedureInfo = await getSqlObjectInfo(props);
+      const connection = await getConnectionInfo(props);
+
+      const driver = findEngineDriver(connection, extensions) || driverBase;
+      const dmp = driver.createDumper();
+      if (procedureInfo) dmp.put('^execute %f', procedureInfo);
+      setSql(dmp.s);
+    }
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (sqlTemplate) {
+      loadTemplate();
+    }
+  }, []);
+
+  return [sql, isLoading];
+}