make applyCode flag synchronous

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -45,6 +45,7 @@ export type OnFileChangeCallback = (data: OnFileChangeData) => void;
 export type OnOperationAppliedCallback = (data: OnOperationAppliedData) => void;
 
 export class ModelsHandler {
+  public isApplyingOperation: boolean = false;
   private modelAddedListener: { dispose: Function };
   private modelRemovedListener: { dispose: Function };
   private onChangeCallback: OnFileChangeCallback;
@@ -122,8 +123,9 @@ export class ModelsHandler {
       );
     }
 
+    this.isApplyingOperation = true;
     this.applyOperationToModel(operation, false, model.textEditorModel);
-
+    this.isApplyingOperation = false;
     this.onOperationAppliedCallback({
       code: model.textEditorModel.getValue(),
       moduleShortid: module.shortid,
@@ -433,6 +435,10 @@ export class ModelsHandler {
 
   private getModelContentChangeListener(sandbox: Sandbox, model) {
     return model.onDidChangeContent(e => {
+      if (this.isApplyingOperation) {
+        return;
+      }
+
       const { path } = model.uri;
       try {
         const module = resolveModule(

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

@@ -87,7 +87,7 @@ export class VSCodeEffect {
   private settings: Settings;
   private linter: Linter;
   private modelsHandler: ModelsHandler;
-  private isApplyingCode: boolean = false;
+  private isApplyingOperation: boolean = false;
   private modelSelectionListener: { dispose: Function };
   private readOnly: boolean;
   private elements = {
@@ -215,22 +215,22 @@ export class VSCodeEffect {
     moduleShortid: string,
     operation: (string | number)[]
   ) {
-    this.isApplyingCode = true;
-
     try {
       await this.modelsHandler.applyOperation(moduleShortid, operation);
     } catch (error) {
-      this.isApplyingCode = false;
       throw error;
     }
-    this.isApplyingCode = false;
   }
 
   public updateOptions(options: { readOnly: boolean }) {
     this.editorApi.getActiveCodeEditor().updateOptions(options);
   }
 
   public updateUserSelections(userSelections: EditorSelection[]) {
+    if (!this.modelsHandler) {
+      return;
+    }
+
     this.modelsHandler.updateUserSelections(
       this.options.getCurrentModule(),
       userSelections
@@ -676,22 +676,17 @@ export class VSCodeEffect {
         currentModule.code !== undefined &&
         activeEditor.getValue() !== currentModule.code
       ) {
-        // Don't send these changes over live, since these changes can also be made by someone else and
-        // we don't want to keep singing these changes
-        // TODO: a better long term solution would be to store the changes of someone else in a model, even if the
-        // model is not opened in an editor.
-
-        this.isApplyingCode = true;
         // This means that the file in Cerebral is dirty and has changed,
         // VSCode only gets saved contents. In this case we manually set the value correctly.
+        this.modelsHandler.isApplyingOperation = true;
         const model = activeEditor.getModel();
         model.applyEdits([
           {
             text: currentModule.code,
             range: model.getFullModelRange(),
           },
         ]);
-        this.isApplyingCode = false;
+        this.modelsHandler.isApplyingOperation = false;
       }
 
       this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx

@@ -1,16 +1,15 @@
-import React, { FunctionComponent } from 'react';
 import { useOvermind } from 'app/overmind';
-
-import LiveInfo from './LiveInfo';
-import LiveButton from './LiveButton';
+import React, { FunctionComponent } from 'react';
 
 import {
   Description,
+  ErrorDescription,
   WorkspaceInputContainer,
   WorkspaceSubtitle,
-  ErrorDescription,
 } from '../../elements';
 import { More } from '../More';
+import LiveButton from './LiveButton';
+import LiveInfo from './LiveInfo';
 
 export const Live: FunctionComponent = () => {
   const {
@@ -29,8 +28,7 @@ export const Live: FunctionComponent = () => {
       },
       editor: {
         isAllModulesSynced,
-        currentSandbox: { owned },
-        currentId,
+        currentSandbox: { owned, id },
       },
     },
     actions: {
@@ -112,7 +110,7 @@ export const Live: FunctionComponent = () => {
               <LiveButton
                 onClick={() => {
                   createLiveClicked({
-                    sandboxId: currentId,
+                    sandboxId: id,
                   });
                 }}
                 isLoading={isLoading}