Live fixes (codesandbox#2432)

* Fix selection issue

* Fix updated messages for modules and directories

* Fix moving directories and refactor a bit

* Fix deleting directory

* Fix issue with live code updates and save

Author: christianalfoni

packages/app/src/app/overmind/effects/live/clients.ts

@@ -56,7 +56,6 @@ class CodeSandboxOTClient extends Client {
     super.applyClient(operation);
   }
   applyServer(operation: any) {
-    console.log(operation);
     super.applyServer(operation);
   }
 }
@@ -97,16 +96,11 @@ export default (
           sendOperation(
             moduleShortid,
             revision,
-            operationToElixir(
-              Array.isArray(operation) ? operation : operation.toJSON()
-            )
+            operationToElixir(operation.toJSON())
           );
         },
         operation => {
-          applyOperation(
-            moduleShortid,
-            Array.isArray(operation) ? operation : operation.toJSON()
-          );
+          applyOperation(moduleShortid, operation);
         }
       );
       modules.set(moduleShortid, client);

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

@@ -164,31 +164,35 @@ export default {
     });
   },
   sendCodeUpdate(moduleShortid: string, currentCode: string, code: string) {
+    if (currentCode === code) {
+      return;
+    }
+
     const operation = getTextOperation(currentCode, code);
 
     if (!operation) {
       return;
     }
 
     try {
-      clients.get(moduleShortid).applyClient(TextOperation.fromJSON(operation));
+      clients.get(moduleShortid).applyClient(TextOperation.fromJSON());
     } catch (e) {
       // Something went wrong, probably a sync mismatch. Request new version
       console.error(
         'Something went wrong with applying OT operation',
         moduleShortid,
         operation
       );
-      this.send('live:module_state', {});
+      return this.send('live:module_state', {});
     }
   },
   sendUserCurrentModule(moduleShortid: string) {
-    this.send('user:current-module', {
+    return this.send('user:current-module', {
       moduleShortid,
     });
   },
   sendDirectoryCreated(directory: Directory) {
-    this.send('directory:created', {
+    return this.send('directory:created', {
       type: 'directory',
       module: directory,
     });
@@ -200,61 +204,65 @@ export default {
     });
   },
   sendModuleCreated(module: Module) {
-    this.send('module:created', {
+    return this.send('module:created', {
       type: 'module',
       moduleShortid: module.shortid,
       module,
     });
   },
   sendModuleDeleted(moduleShortid: string) {
-    this.send('module:deleted', {
+    return this.send('module:deleted', {
       type: 'module',
       moduleShortid,
     });
   },
   sendMassCreatedModules(modules: Module[], directories: Directory[]) {
-    this.send('module:mass-created', {
+    return this.send('module:mass-created', {
       directories,
       modules,
     });
   },
   sendLiveMode(mode: string) {
-    this.send('live:mode', {
+    return this.send('live:mode', {
       mode,
     });
   },
   sendEditorAdded(liveUserId: string) {
-    this.send('live:add-editor', {
+    return this.send('live:add-editor', {
       editor_user_id: liveUserId,
     });
   },
   sendEditorRemoved(liveUserId: string) {
-    this.send('live:remove-editor', {
+    return this.send('live:remove-editor', {
       editor_user_id: liveUserId,
     });
   },
   sendClosed() {
-    this.send('live:close', {});
+    return this.send('live:close', {});
   },
   sendChat(message: string) {
-    this.send('chat', {
+    return this.send('chat', {
       message,
     });
   },
-  sendModuleSaved(moduleShortid: string) {
-    this.send('module:saved', {
+  sendModuleState() {
+    return this.send('live:module_state', {});
+  },
+  sendModuleSaved(module: Module) {
+    return this.send('module:saved', {
       type: 'module',
-      moduleShortid,
+      module,
+      moduleShortid: module.shortid,
     });
   },
   sendChatEnabled(enabled: boolean) {
-    this.send('live:chat_enabled', { enabled });
+    return this.send('live:chat_enabled', { enabled });
   },
   sendModuleUpdateRequest() {
-    this.send('live:module_state', {});
+    return this.send('live:module_state', {});
   },
   sendUserSelection(moduleShortid: string, liveUserId: string, selection: any) {
-    this.send('user:selection', {
+    return this.send('user:selection', {
       liveUserId,
       moduleShortid,
       selection,
@@ -263,8 +271,18 @@ export default {
   getAllClients() {
     return clients.getAll();
   },
-  getClient(moduleShortid: string) {
-    return clients.get(moduleShortid);
+  applyClient(moduleShortid: string, operation: any) {
+    return clients
+      .get(moduleShortid)
+      .applyClient(TextOperation.fromJSON(operation));
+  },
+  applyServer(moduleShortid: string, operation: any) {
+    return clients
+      .get(moduleShortid)
+      .applyServer(TextOperation.fromJSON(operation));
+  },
+  serverAck(moduleShortid: string) {
+    return clients.get(moduleShortid).serverAck();
   },
   createClient(moduleShortid: string, revision: number) {
     return clients.create(moduleShortid, revision);

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

@@ -103,7 +103,7 @@ export const saveCode: AsyncAction<{
     }
 
     if (state.live.isLive && state.live.isCurrentEditor) {
-      effects.live.sendModuleUpdate(module);
+      effects.live.sendModuleSaved(module);
     }
 
     await actions.editor.internal.updateCurrentTemplate();

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

@@ -79,15 +79,15 @@ export const onTransformMade: Action<{
   }
 
   try {
-    effects.live.getClient(moduleShortid).applyClient(operation);
+    effects.live.applyClient(moduleShortid, operation);
   } catch (e) {
     // Something went wrong, probably a sync mismatch. Request new version
     console.error(
       'Something went wrong with applying OT operation',
       moduleShortid,
       operation
     );
-    effects.live.send('live:module_state', {});
+    effects.live.sendModuleState();
   }
 };
 
@@ -102,10 +102,10 @@ export const applyTransformation: Action<{
 
   if (existingPendingOperation) {
     pendingOperation = TextOperation.fromJSON(existingPendingOperation)
-      .compose(TextOperation.fromJSON(operation))
+      .compose(operation)
       .toJSON();
   } else {
-    pendingOperation = operation;
+    pendingOperation = operation.toJSON();
   }
 
   state.editor.pendingOperations[moduleShortid] = pendingOperation;

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

@@ -45,10 +45,6 @@ export const disconnect: Action = ({ effects }) => {
   effects.live.disconnect();
 };
 
-export const sendModuleSaved: Action<string> = ({ effects }, moduleShortid) => {
-  effects.live.sendModuleSaved(moduleShortid);
-};
-
 export const initialize: AsyncAction<string, Sandbox> = async (
   { state, effects, actions },
   id
@@ -79,7 +75,7 @@ export const initialize: AsyncAction<string, Sandbox> = async (
     state.live.receivingCode = false;
     state.live.isLive = true;
     state.live.error = null;
-    effects.live.send('live:module_state', {});
+    effects.live.sendModuleState();
 
     return sandbox;
   } catch (error) {

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

@@ -114,6 +114,12 @@ export const onModuleSaved: Operator<
     moduleItem => moduleItem.shortid === data.moduleShortid
   );
   module.isNotSynced = false;
+
+  state.editor.changedModuleShortids.splice(
+    state.editor.changedModuleShortids.indexOf(module.shortid),
+    1
+  );
+
   actions.editor.internal.setModuleSavedCode({
     moduleShortid: data.moduleShortid,
     savedCode: data.savedCode,
@@ -364,10 +370,10 @@ export const onOperation: Operator<
     return;
   }
   if (_isOwnMessage) {
-    effects.live.getClient(data.module_shortid).serverAck();
+    effects.live.serverAck(data.module_shortid);
   } else {
     try {
-      effects.live.getClient(data.module_shortid).applyServer(data.operation);
+      effects.live.applyServer(data.module_shortid, data.operation);
     } catch (e) {
       // Something went wrong, probably a sync mismatch. Request new version
       console.error('Something went wrong with applying OT operation');

packages/app/src/app/store/providers/Live.js

@@ -68,6 +68,6 @@ export default Provider({
       } else {
         reject('Channel is not defined');
       }
-    });
+    }).then(value => value);
   },
 });