save file refactor

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
-        modalState={saveSqlFileModalState}
-        storageKey={localStorageKey}
+      <SaveFileModal
+        modalState={saveFileModalState}
+        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 }))}
       />