Fix creating a sandbox in overmind from dashboard as a team (codesandbox#2455)

Author: CompuIves

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

@@ -218,17 +218,8 @@ export const refetchSandboxInfo: AsyncAction = async ({
     sandbox.userLiked = updatedSandbox.userLiked;
     sandbox.title = updatedSandbox.title;
     sandbox.team = updatedSandbox.team;
-
-    state.live.isTeam = Boolean(sandbox.team);
-
-    if (sandbox.roomId === updatedSandbox.roomId) {
-      return;
-    }
-
     sandbox.roomId = updatedSandbox.roomId;
-    await actions.live.internal.disconnect();
-    if (updatedSandbox.owned && updatedSandbox.roomId) {
-      await actions.live.internal.initialize(sandbox.roomId);
-    }
+
+    await actions.editor.internal.initializeLiveSandbox(sandbox);
   }
 };

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

@@ -72,12 +72,12 @@ export default {
       })),
     };
   },
-  forkSandbox(id: string): Promise<Sandbox> {
+  forkSandbox(id: string, body?: unknown): Promise<Sandbox> {
     const url = id.includes('/')
       ? `/sandboxes/fork/${id}`
       : `/sandboxes/${id}/fork`;
 
-    return api.post(url, {});
+    return api.post(url, body || {});
   },
   createModule(sandboxId: string, module: Module): Promise<Module> {
     return api.post(`/sandboxes/${sandboxId}/modules`, {

packages/app/src/app/overmind/factories.ts

@@ -77,7 +77,9 @@ export const withOwnedSandbox = <T>(
         'This sandbox is frozen, and will be forked. Do you want to continue?'
       ))
   ) {
-    await actions.editor.internal.forkSandbox(state.editor.currentId);
+    await actions.editor.internal.forkSandbox({
+      sandboxId: state.editor.currentId,
+    });
   }
 
   return continueAction(context, payload);

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

@@ -64,7 +64,8 @@ export const searchChanged: Action<{ search: string }> = (
   state.dashboard.filters.search = search;
 };
 
-export const createSandboxClicked: AsyncAction<{ sandboxId: string }> = (
-  { actions },
-  { sandboxId }
-) => actions.editor.internal.forkSandbox(sandboxId);
+export const createSandboxClicked: AsyncAction<{
+  sandboxId: string;
+  body: { collectionId: string | undefined };
+}> = ({ actions }, { sandboxId, body }) =>
+  actions.editor.internal.forkSandbox({ sandboxId, body });

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

@@ -76,6 +76,10 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     const sandbox = await effects.api.getSandbox(newId);
 
     actions.internal.updateCurrentSandbox(sandbox);
+    state.editor.currentId = newId;
+    state.editor.isLoading = false;
+
+    await actions.editor.internal.initializeLiveSandbox(sandbox);
 
     return;
   }
@@ -104,13 +108,9 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
   actions.internal.ensurePackageJSON();
 
-  if (sandbox.owned && sandbox.roomId) {
-    if (sandbox.team) {
-      state.live.isTeam = true;
-    }
+  await actions.editor.internal.initializeLiveSandbox(sandbox);
 
-    await actions.live.internal.initialize(sandbox.roomId);
-  } else if (sandbox.owned) {
+  if (sandbox.owned && !state.live.isLive) {
     actions.files.internal.recoverFiles();
   }
 
@@ -231,7 +231,9 @@ export const forkSandboxClicked: AsyncAction = async ({
     return;
   }
 
-  await actions.editor.internal.forkSandbox(state.editor.currentId);
+  await actions.editor.internal.forkSandbox({
+    sandboxId: state.editor.currentId,
+  });
 };
 
 export const likeSandboxToggled: AsyncAction<{

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

@@ -5,6 +5,7 @@ import {
   ModuleTab,
   TabType,
   ServerContainerStatus,
+  Sandbox,
 } from '@codesandbox/common/lib/types';
 import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import { getTemplate as computeTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
@@ -29,6 +30,28 @@ export const ensureSandboxId: Action<string, string> = ({ state }, id) => {
   return matchingSandboxId || id;
 };
 
+export const initializeLiveSandbox: AsyncAction<Sandbox> = async (
+  { state, actions },
+  sandbox
+) => {
+  state.live.isTeam = Boolean(sandbox.team);
+
+  if (state.live.isLive) {
+    const roomChanged = state.live.roomInfo.roomId !== sandbox.roomId;
+
+    if (!roomChanged) {
+      // In this case we don't need to initialize new live session, we reuse the existing one
+      return;
+    }
+
+    await actions.live.internal.disconnect();
+  }
+
+  if (sandbox.owned && sandbox.roomId) {
+    await actions.live.internal.initialize(sandbox.roomId);
+  }
+};
+
 export const setModuleSavedCode: Action<{
   moduleShortid: string;
   savedCode: string;
@@ -255,10 +278,10 @@ export const setModuleCode: Action<{
   }
 };
 
-export const forkSandbox: AsyncAction<string> = async (
-  { state, effects, actions },
-  id
-) => {
+export const forkSandbox: AsyncAction<{
+  sandboxId: string;
+  body?: { collectionId: string | undefined };
+}> = async ({ state, effects, actions }, { sandboxId: id, body }) => {
   const templateDefinition = getTemplateDefinition(
     state.editor.currentSandbox ? state.editor.currentSandbox.template : null
   );
@@ -275,7 +298,7 @@ export const forkSandbox: AsyncAction<string> = async (
   try {
     state.editor.isForkingSandbox = true;
 
-    const forkedSandbox = await effects.api.forkSandbox(id);
+    const forkedSandbox = await effects.api.forkSandbox(id, body);
 
     // Copy over any unsaved code
     if (state.editor.currentSandbox) {