save file refactor

packages/api/src/controllers/files.js

@@ -3,14 +3,16 @@ const path = require('path');
 const { filesdir } = require('../utility/directories');
 const socket = require('../utility/socket');
 
-function serialize(folder, data) {
+function serialize(format, data) {
-  if (folder == 'sql') return data;
+  if (format == 'text') return data;
-  return JSON.stringify(data);
+  if (format == 'json') return JSON.stringify(data);
+  throw new Error(`Invalid format: ${format}`);
 }
 
-function deserialize(folder, text) {
+function deserialize(format, text) {
-  if (folder == 'sql') return text;
+  if (format == 'text') return text;
-  return JSON.parse(text);
+  if (format == 'json') return JSON.parse(text);
+  throw new Error(`Invalid format: ${format}`);
 }
 
 module.exports = {
@@ -18,7 +20,7 @@ module.exports = {
   async list({ folder }) {
     const dir = path.join(filesdir(), folder);
     if (!(await fs.exists(dir))) return [];
-    const files = (await fs.readdir(dir)).map((name) => ({ name }));
+    const files = (await fs.readdir(dir)).map((file) => ({ folder, file }));
     return files;
   },
 
@@ -29,18 +31,18 @@ module.exports = {
   },
 
   load_meta: 'post',
-  async load({ folder, file }) {
+  async load({ folder, file, format }) {
     const text = await fs.readFile(path.join(filesdir(), folder, file), { encoding: 'utf-8' });
-    return deserialize(folder, text);
+    return deserialize(format, text);
   },
 
   save_meta: 'post',
-  async save({ folder, file, data }) {
+  async save({ folder, file, data, format }) {
     const dir = path.join(filesdir(), folder);
     if (!(await fs.exists(dir))) {
       await fs.mkdir(dir);
     }
-    await fs.writeFile(path.join(dir, file), serialize(folder, data));
+    await fs.writeFile(path.join(dir, file), serialize(format, data));
     socket.emitChanged(`files-changed-${folder}`);
   },
 };

packages/web/src/appobj/SavedSqlFileAppObject.js

@@ -17,21 +17,21 @@ function Menu({ data }) {
 }
 
 function SavedSqlFileAppObject({ data, commonProps }) {
-  const { name } = data;
+  const { file } = data;
   const newQuery = useNewQuery();
 
   const onClick = async () => {
-    const resp = await axios.post('files/load', { folder: 'sql', file: name });
+    const resp = await axios.post('files/load', { folder: 'sql', file, format: 'text' });
     newQuery({
-      title: name,
+      title: file,
       // @ts-ignore
       initialScript: resp.data,
     });
   };
 
-  return <AppObjectCore {...commonProps} data={data} title={name} icon="img sql-file" onClick={onClick} Menu={Menu} />;
+  return <AppObjectCore {...commonProps} data={data} title={file} icon="img sql-file" onClick={onClick} Menu={Menu} />;
 }
 
-SavedSqlFileAppObject.extractKey = (data) => data.name;
+SavedSqlFileAppObject.extractKey = (data) => data.file;
 
 export default SavedSqlFileAppObject;

packages/web/src/modals/SaveFileModal.js

@@ -9,16 +9,16 @@ import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
 // import FormikForm from '../utility/FormikForm';
 
-export default function SaveSqlFileModal({ storageKey, modalState, name, onSave = undefined }) {
+export default function SaveFileModal({ getData, folder, format, modalState, name, onSave = undefined }) {
   const handleSubmit = async (values) => {
     const { name } = values;
-    await axios.post('files/save', { folder: 'sql', file: name, data: localStorage.getItem(storageKey) });
+    await axios.post('files/save', { folder, file: name, data: getData(), format });
     modalState.close();
     if (onSave) onSave(name);
   };
   return (
     <ModalBase modalState={modalState}>
-      <ModalHeader modalState={modalState}>Save SQL file</ModalHeader>
+      <ModalHeader modalState={modalState}>Save file</ModalHeader>
       <Formik onSubmit={handleSubmit} initialValues={{ name }}>
         <Form>
           <ModalContent>

packages/web/src/tabs/FreeTableTab.js

@@ -17,7 +17,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
   const [config, setConfig] = useGridConfig(tabid);
   const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
   const storageKey = `tabdata_freetable_${tabid}`;
-  const saveSqlFileModalState = useModalState();
+  const saveFileModalState = useModalState();
   const setOpenedTabs = useSetOpenedTabs();
   const [isLoading, setIsLoading] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState(null);
@@ -79,10 +79,10 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
         dispatchModel={dispatchModel}
         tabVisible={tabVisible}
         toolbarPortalRef={toolbarPortalRef}
-        onSave={() => saveSqlFileModalState.open()}
+        onSave={() => saveFileModalState.open()}
       />
       <SaveArchiveModal
-        modalState={saveSqlFileModalState}
+        modalState={saveFileModalState}
         folder={archiveFolder}
         file={archiveFile}
         onSave={handleSave}

packages/web/src/tabs/QueryTab.js

@@ -14,7 +14,7 @@ import { VerticalSplitter } from '../widgets/Splitter';
 import keycodes from '../utility/keycodes';
 import { changeTab } from '../utility/common';
 import useSocket from '../utility/SocketProvider';
-import SaveSqlFileModal from '../modals/SaveSqlFileModal';
+import SaveFileModal from '../modals/SaveFileModal';
 import useModalState from '../modals/useModalState';
 import sqlFormatter from 'sql-formatter';
 import useExtensions from '../utility/useExtensions';
@@ -84,7 +84,7 @@ export default function QueryTab({
   const openedTabs = useOpenedTabs();
   const socket = useSocket();
   const [busy, setBusy] = React.useState(false);
-  const saveSqlFileModalState = useModalState();
+  const saveFileModalState = useModalState();
 
   const sqlFromTemplate = useSqlTemplate(sqlTemplate, { conid, database, ...other });
   React.useEffect(() => {
@@ -242,15 +242,17 @@ export default function QueryTab({
             busy={busy}
             cancel={handleCancel}
             format={handleFormatCode}
-            save={saveSqlFileModalState.open}
+            save={saveFileModalState.open}
             isConnected={!!sessionId}
             kill={handleKill}
           />,
           toolbarPortalRef.current
         )}
-      <SaveSqlFileModal
+      <SaveFileModal
-        modalState={saveSqlFileModalState}
+        modalState={saveFileModalState}
-        storageKey={localStorageKey}
+        getData={() => localStorage.getItem(localStorageKey)}
+        format="text"
+        folder="sql"
         name={openedTabs.find((x) => x.tabid == tabid).title}
         onSave={(name) => changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, title: name }))}
       />