Remove need for running sandbox queries on joining a sandbox (codesandbox#3504)

CompuIves · web-flow · commit 80b13bb1a386 · 2020-02-12T15:20:25.000+01:00
diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts
@@ -3,16 +3,13 @@ import {
   LiveMessageEvent,
   Module,
   RoomInfo,
-  Sandbox,
 } from '@codesandbox/common/lib/types';
 import _debug from '@codesandbox/common/lib/utils/debug';
 import { camelizeKeys } from 'humps';
 import { TextOperation } from 'ot';
 import { Socket, Channel } from 'phoenix';
 import uuid from 'uuid';
 
-import { SandboxAPIResponse } from '../api/types';
-import { transformSandbox } from '../utils/sandbox';
 import clientsFactory from './clients';
 import { OPTIMISTIC_ID_PREFIX } from '../utils';
 
@@ -22,17 +19,10 @@ type Options = {
 };
 
 type JoinChannelResponse = {
-  sandboxId: string;
-  sandbox: SandboxAPIResponse;
-  moduleState: object;
   liveUserId: string;
   roomInfo: RoomInfo;
 };
 
-type JoinChannelTransformedResponse = JoinChannelResponse & {
-  sandbox: Sandbox;
-};
-
 declare global {
   interface Window {
     socket: any;
@@ -118,17 +108,15 @@ export default new (class Live {
     });
   }
 
-  joinChannel(roomId: string): Promise<JoinChannelTransformedResponse> {
+  joinChannel(roomId: string): Promise<JoinChannelResponse> {
     return new Promise((resolve, reject) => {
       channel = this.getSocket().channel(`live:${roomId}`, {});
 
       channel
         .join()
         .receive('ok', resp => {
           const result = camelizeKeys(resp) as JoinChannelResponse;
-          // @ts-ignore
-          result.sandbox = transformSandbox(result.sandbox);
-          resolve(result as JoinChannelTransformedResponse);
+          resolve(result);
         })
         .receive('error', resp => reject(camelizeKeys(resp)));
     });
diff --git a/packages/app/src/app/overmind/namespaces/editor/actions.ts b/packages/app/src/app/overmind/namespaces/editor/actions.ts
@@ -121,7 +121,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   if (sandbox.owned && !state.live.isLive) {
     actions.files.internal.recoverFiles();
   } else if (state.live.isLive) {
-    effects.live.sendModuleStateSyncRequest();
+    await effects.live.sendModuleStateSyncRequest();
   }
 
   effects.vscode.openModule(state.editor.currentModule);
diff --git a/packages/app/src/app/overmind/namespaces/live/internalActions.ts b/packages/app/src/app/overmind/namespaces/live/internalActions.ts
@@ -59,25 +59,19 @@ export const initialize: AsyncAction<string, Sandbox | null> = async (
   state.live.isLoading = true;
 
   try {
-    const {
-      roomInfo,
-      liveUserId,
-      sandbox,
-      moduleState,
-    } = await effects.live.joinChannel(id);
+    const { roomInfo, liveUserId } = await effects.live.joinChannel(id);
 
     state.live.roomInfo = roomInfo;
     state.live.liveUserId = liveUserId;
 
-    if (
-      !state.editor.currentSandbox ||
-      state.editor.currentSandbox.id !== sandbox.id
-    ) {
-      state.editor.sandboxes[sandbox.id] = sandbox;
-      state.editor.currentId = sandbox.id;
-    }
+    const sandboxId = roomInfo.sandboxId;
 
-    actions.live.internal.initializeModuleState(moduleState);
+    let sandbox = state.editor.currentSandbox;
+    if (!sandbox || sandbox.id !== sandboxId) {
+      sandbox = await effects.api.getSandbox(sandboxId);
+      state.editor.sandboxes[sandboxId] = sandbox;
+      state.editor.currentId = sandboxId;
+    }
 
     effects.analytics.track('Live Session Joined', {});
     effects.live.listen(actions.live.liveMessageReceived);

Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{`
`121`	`121`	`if (sandbox.owned && !state.live.isLive) {`
`122`	`122`	`actions.files.internal.recoverFiles();`
`123`	`123`	`} else if (state.live.isLive) {`
`124`		`- effects.live.sendModuleStateSyncRequest();`
	`124`	`+ await effects.live.sendModuleStateSyncRequest();`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`effects.vscode.openModule(state.editor.currentModule);`