Alter saving logic to become more robust

Author: Ives van Hoorne

packages/app/src/app/pages/Sandbox/Editor/Header/index.js

@@ -19,6 +19,7 @@ import Margin from 'common/components/spacing/Margin';
 import HeaderSearchBar from 'app/components/HeaderSearchBar';
 import UserMenu from 'app/pages/common/UserMenu';
 import theme from 'common/theme';
+import { saveAllModules } from 'app/store/modules/editor/utils';
 
 import Logo from './Logo';
 import Action from './Action';
@@ -56,7 +57,7 @@ const Header = ({ store, signals }) => {
             onClick={
               store.editor.isAllModulesSynced
                 ? null
-                : () => signals.editor.saveClicked()
+                : () => saveAllModules(store, signals)
             }
             placeholder={
               store.editor.isAllModulesSynced ? 'All modules are saved' : false

packages/app/src/app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js

@@ -4,6 +4,7 @@ import { inject, observer } from 'mobx-react';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
 import { getModulePath } from 'common/sandbox/modules';
+import { saveAllModules } from 'app/store/modules/editor/utils';
 
 import CrossIcon from 'react-icons/lib/md/clear';
 
@@ -35,7 +36,7 @@ const OpenedTabs = ({ store, signals }) => {
               e.preventDefault();
               e.stopPropagation();
             }
-            signals.editor.saveClicked();
+            saveAllModules(store, signals);
           }}
         />
       }

packages/app/src/app/store/modules/editor/actions.js

@@ -397,14 +397,6 @@ export function saveModuleCode({ props, state, api, recover }) {
       module: { code: codeToSave },
     })
     .then(x => {
-      recover.remove(sandbox.id, moduleToSave);
-
-      if (x.code !== codeToSave) {
-        throw new Error(
-          `Something went wrong while saving the code of '${title}', please try again.`
-        );
-      }
-
       const newSandbox = state.get('editor.currentSandbox');
       const newModuleToSave = sandbox.modules.find(
         module => module.shortid === props.moduleShortid
@@ -415,15 +407,19 @@ export function saveModuleCode({ props, state, api, recover }) {
       );
 
       if (index > -1) {
-        if (newModuleToSave.code === moduleToSave.code) {
+        if (newModuleToSave.code === codeToSave) {
           state.set(
             `editor.sandboxes.${newSandbox.id}.modules.${index}.savedCode`,
             undefined
           );
+          recover.remove(sandbox.id, moduleToSave);
         } else {
           state.set(
             `editor.sandboxes.${newSandbox.id}.modules.${index}.savedCode`,
-            moduleToSave.code
+            x.code
+          );
+          throw new Error(
+            `The code of '${title}' changed while saving, will ignore the save now. Please try again with saving.`
           );
         }
       }

packages/app/src/app/store/modules/editor/utils.js

@@ -0,0 +1,19 @@
+export function saveAllModules(store, signals) {
+  const sandbox = store.editor.currentSandbox;
+
+  // In case you don't own the sandbox we cannot do >1 calls for saving module as you would then
+  // also fork >1 times. The reason that we want to save seperately is because we want to have
+  // fine-grained control of which saves succeed and which saves fail
+  if (sandbox.owned) {
+    sandbox.modules
+      .filter(m => !store.editor.isModuleSynced(m.shortid))
+      .forEach(module => {
+        signals.editor.codeSaved({
+          code: module.code,
+          moduleShortid: module.shortid,
+        });
+      });
+  } else {
+    signals.saveClicked();
+  }
+}

packages/app/src/app/utils/prettify.js

@@ -80,23 +80,32 @@ export default function prettify(
     let timeout = setTimeout(() => {
       // If worker doesn't respond in time
       reject({ error: 'Prettify timeout' });
+      timeout = null;
     }, 5000);
 
-    worker.onmessage = e => {
+    const handler = e => {
       const { formatted, text, error } = e.data;
+
       if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
         if (text === getCode()) {
+          worker.removeEventListener('message', handler);
+          clearTimeout(timeout);
+          timeout = null;
+
           if (error) {
             console.error(error);
             reject({ error });
           }
+
           if (formatted) {
             resolve(formatted);
           }
         }
+      } else {
+        worker.removeEventListener('message', handler);
       }
     };
+
+    worker.addEventListener('message', handler);
   });
 }