electron: save file to custom location

packages/web/src/modals/SaveFileModal.js

@@ -6,14 +6,52 @@ import ModalHeader from './ModalHeader';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
 import { FormProvider } from '../utility/FormProvider';
+import FormStyledButton from '../widgets/FormStyledButton';
+import getElectron from '../utility/getElectron';
+
+export default function SaveFileModal({
+  data,
+  folder,
+  format,
+  modalState,
+  name,
+  fileExtension,
+  filePath,
+  onSave = undefined,
+}) {
+  const electron = getElectron();
 
-export default function SaveFileModal({ data, folder, format, modalState, name, onSave = undefined }) {
   const handleSubmit = async values => {
     const { name } = values;
     await axios.post('files/save', { folder, file: name, data, format });
     modalState.close();
-    if (onSave) onSave(name);
+    if (onSave) {
+      onSave(name, {
+        savedFile: name,
+        savedFolder: folder,
+        savedFilePath: null,
+      });
+    }
   };
+
+  const handleSaveAs = async filePath => {
+    const path = window.require('path');
+
+    const parsed = path.parse(filePath);
+    if (!parsed.ext) filePath += `.${fileExtension}`;
+
+    await axios.post('files/save-as', { filePath, data, format });
+    modalState.close();
+
+    if (onSave) {
+      onSave(parsed.name, {
+        savedFile: null,
+        savedFolder: null,
+        savedFilePath: filePath,
+      });
+    }
+  };
+
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>Save file</ModalHeader>
@@ -23,6 +61,21 @@ export default function SaveFileModal({ data, folder, format, modalState, name,
         </ModalContent>
         <ModalFooter>
           <FormSubmit value="Save" onClick={handleSubmit} />
+          {electron && (
+            <FormStyledButton
+              type="button"
+              value="Save to disk"
+              onClick={() => {
+                const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
+                  filters: { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
+                  defaultPath: filePath,
+                });
+                if (file) {
+                  handleSaveAs(file);
+                }
+              }}
+            />
+          )}
         </ModalFooter>
       </FormProvider>
     </ModalBase>

packages/web/src/modals/SaveTabModal.js

@@ -4,22 +4,22 @@ import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
 import keycodes from '../utility/keycodes';
 import SaveFileModal from './SaveFileModal';
 
-export default function SaveTabModal({ data, folder, format, modalState, tabid, tabVisible }) {
+export default function SaveTabModal({ data, folder, format, modalState, tabid, tabVisible, fileExtension }) {
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
 
-  const { savedFile } = openedTabs.find(x => x.tabid == tabid).props || {};
-  const onSave = name =>
+  const { savedFile, savedFilePath } = openedTabs.find(x => x.tabid == tabid).props || {};
+  const onSave = (title, newProps) => {
     changeTab(tabid, setOpenedTabs, tab => ({
       ...tab,
-      title: name,
+      title,
       props: {
         ...tab.props,
-        savedFile: name,
-        savedFolder: folder,
         savedFormat: format,
+        ...newProps,
       },
     }));
+  };
 
   const handleKeyboard = React.useCallback(
     e => {
@@ -47,6 +47,8 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
       format={format}
       modalState={modalState}
       name={savedFile || 'newFile'}
+      filePath={savedFilePath}
+      fileExtension={fileExtension}
       onSave={onSave}
     />
   );