Only send updates to non-optimistic modules in live (codesandbox#3463)

Author: CompuIves

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

@@ -14,6 +14,7 @@ import uuid from 'uuid';
 import { SandboxAPIResponse } from '../api/types';
 import { transformSandbox } from '../utils/sandbox';
 import clientsFactory from './clients';
+import { OPTIMISTIC_ID_PREFIX } from '../utils';
 
 type Options = {
   onApplyOperation(args: { moduleShortid: string; operation: any }): void;
@@ -188,6 +189,12 @@ export default {
       return;
     }
 
+    if (moduleShortid.startsWith(OPTIMISTIC_ID_PREFIX)) {
+      // Module is an optimistic module, we will send a full code update
+      // once the module has been created, until then, send nothing!
+      return;
+    }
+
     try {
       clients.get(moduleShortid).applyClient(operation);
     } catch (e) {

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

@@ -2,10 +2,11 @@ import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import { isEqual } from 'lodash-es';
 
 let nextOptimisticId = 0;
+export const OPTIMISTIC_ID_PREFIX = 'OPTIMISTIC_';
 
 export default {
   createOptimisticId() {
-    return 'OPTIMISTIC_' + nextOptimisticId++;
+    return OPTIMISTIC_ID_PREFIX + nextOptimisticId++;
   },
   resolveModule,
   isEqual,

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

@@ -369,6 +369,9 @@ export const getErrorMessage: Action<{ error: ApiError | Error }, string> = (
       const fields = Object.keys(result.errors);
       if (Array.isArray(errors)) {
         if (errors[0]) {
+          if (fields[0] === 'detail') {
+            return errors[0];
+          }
           return `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
         }
       } else {

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

@@ -4,6 +4,7 @@ import {
   getModulesAndDirectoriesInDirectory,
 } from '@codesandbox/common/lib/sandbox/modules';
 import getDefinition from '@codesandbox/common/lib/templates';
+import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 import { Directory, Module } from '@codesandbox/common/lib/types';
 import { AsyncAction } from 'app/overmind';
 import { withOwnedSandbox } from 'app/overmind/factories';
@@ -593,10 +594,16 @@ export const moduleCreated: AsyncAction<{
       );
       state.editor.currentModuleShortid = module.shortid;
 
+      effects.executor.updateFiles(state.editor.currentSandbox);
+
       if (state.live.isCurrentEditor) {
         effects.live.sendModuleCreated(module);
+        // Update server with latest data
+        effects.live.sendCodeUpdate(
+          module.shortid,
+          getTextOperation('', module.code)
+        );
       }
-      effects.executor.updateFiles(state.editor.currentSandbox);
     } catch (error) {
       sandbox.modules.splice(sandbox.modules.indexOf(module), 1);
       actions.editor.internal.setCurrentModule(state.editor.mainModule);