Fix saving code and missing operations

Author: CompuIves

packages/app/src/app/overmind/effects/api/index.ts

@@ -112,12 +112,16 @@ export default {
       `/sandboxes/${sandboxId}/modules/${moduleShortid}`
     );
   },
-  saveModuleCode(sandboxId: string, module: Module): Promise<Module> {
+  saveModuleCode(
+    sandboxId: string,
+    moduleShortid: string,
+    code: string
+  ): Promise<Module> {
     return api
       .put<IModuleAPIResponse>(
-        `/sandboxes/${sandboxId}/modules/${module.shortid}`,
+        `/sandboxes/${sandboxId}/modules/${moduleShortid}`,
         {
-          module: { code: module.code },
+          module: { code },
         }
       )
       .then(transformModule);

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -32,6 +32,7 @@ import {
 import { convertAuthorizationToPermissionType } from 'app/utils/authorization';
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import history from 'app/utils/history';
+import { getSavedCode } from 'app/overmind/utils/sandbox';
 import { Selection, TextOperation } from 'ot';
 import { json } from 'overmind';
 
@@ -371,12 +372,14 @@ export const codeChanged: Action<{
     return;
   }
 
-  // module.code !== code check is there to make sure that we don't end up sending
-  // duplicate updates to live. module.code === code only when VSCode detected a change
-  // from the filesystem (fs changed, vscode sees it, sends update). If this happens we
-  // never want to send that code update, since this actual code change goes through this
-  // specific code flow already.
-  if (state.live.isLive && module.code !== code) {
+  const savedCode = getSavedCode(module.code, module.savedCode);
+  const isSavedCode = savedCode === code;
+  const isFirstChange = !effects.live.hasClient(module.shortid);
+
+  // Don't send saved code of a moduke that has not been registered with yet, since the server
+  // will take the saved code as base. Which means that the change that would generate the saved code
+  // would be applied on the saved code by the server.
+  if (state.live.isLive && !(isSavedCode && isFirstChange)) {
     let operation: TextOperation;
     if (event) {
       logBreadcrumb({

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -8,10 +8,6 @@ import {
   ServerContainerStatus,
   TabType,
 } from '@codesandbox/common/lib/types';
-import {
-  captureException,
-  logBreadcrumb,
-} from '@codesandbox/common/lib/utils/analytics/sentry';
 import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import slugify from '@codesandbox/common/lib/utils/slugify';
 import {
@@ -106,14 +102,6 @@ export const setModuleSavedCode: Action<{
   if (moduleIndex > -1) {
     const module = state.editor.sandboxes[sandbox.id].modules[moduleIndex];
 
-    if (savedCode === undefined) {
-      logBreadcrumb({
-        type: 'error',
-        message: `SETTING UNDEFINED SAVEDCODE FOR CODE: ${module.code}`,
-      });
-      captureException(new Error('SETTING UNDEFINED SAVEDCODE'));
-    }
-
     module.savedCode = module.code === savedCode ? null : savedCode;
   }
 };
@@ -137,27 +125,20 @@ export const saveCode: AsyncAction<{
     return;
   }
 
-  if (module.code !== code) {
-    actions.editor.codeChanged({ moduleShortid, code });
-  }
-
   try {
     await effects.live.saveModule(module);
-    const updatedModule = await effects.api.saveModuleCode(sandbox.id, module);
+    const updatedModule = await effects.api.saveModuleCode(
+      sandbox.id,
+      module.shortid,
+      code
+    );
 
     module.insertedAt = updatedModule.insertedAt;
     module.updatedAt = updatedModule.updatedAt;
     module.isBinary = updatedModule.isBinary;
 
     const savedCode =
       updatedModule.code === module.code ? null : updatedModule.code;
-    if (savedCode === undefined) {
-      logBreadcrumb({
-        type: 'error',
-        message: `SETTING UNDEFINED SAVEDCODE FOR CODE: ${updatedModule.code}`,
-      });
-      captureException(new Error('SETTING UNDEFINED SAVEDCODE'));
-    }
 
     module.savedCode = savedCode;
 
@@ -192,7 +173,12 @@ export const saveCode: AsyncAction<{
     }
 
     if (state.live.isLive && state.live.isCurrentEditor) {
-      effects.live.sendModuleSaved(module);
+      setTimeout(() => {
+        // Send the save event 50ms later so the operation can be sent first (the operation that says the
+        // file difference created by VSCode due to the file watch event). If the other client gets the save before the operation,
+        // the other client will also send an operation with the same difference resulting in a duplicate event.
+        effects.live.sendModuleSaved(module);
+      }, 50);
     }
 
     await actions.editor.internal.updateCurrentTemplate();

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -13,6 +13,7 @@ import { Operator } from 'app/overmind';
 import { camelizeKeys } from 'humps';
 import { json, mutate } from 'overmind';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
+import { getSavedCode } from 'app/overmind/utils/sandbox';
 
 export const onJoin: Operator<LiveMessage<{
   status: 'connected';
@@ -170,16 +171,17 @@ export const onModuleSaved: Operator<LiveMessage<{
   );
 
   if (module) {
-    module.isNotSynced = false;
-
     actions.editor.internal.setModuleSavedCode({
       moduleShortid: data.moduleShortid,
       savedCode: data.module.savedCode,
     });
 
     effects.vscode.sandboxFsSync.writeFile(state.editor.modulesByPath, module);
-    // We revert the module so that VSCode will flag saved indication correctly
-    effects.vscode.syncModule(module);
+    const savedCode = getSavedCode(module.code, module.savedCode);
+    if (module.code === savedCode) {
+      // We revert the module so that VSCode will flag saved indication correctly
+      effects.vscode.syncModule(module);
+    }
     actions.editor.internal.updatePreviewCode();
   }
 });