Fixed saveCode sync (codesandbox#2416)

* Fixed saveCode sync

* fixed devtool tabs changes

Author: christianalfoni

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

@@ -1,4 +1,3 @@
-import apiFactory, { Api, ApiConfig } from './apiFactory';
 import {
   CurrentUser,
   Dependency,
@@ -14,14 +13,14 @@ import {
   GitInfo,
   GitCommit,
   GitPr,
-  RoomInfo,
   PaymentDetails,
   Profile,
   UserSandbox,
 } from '@codesandbox/common/lib/types';
 import { TemplateType } from '@codesandbox/common/lib/templates';
 import { client } from 'app/graphql/client';
 import { LIST_TEMPLATES } from 'app/pages/Dashboard/queries';
+import apiFactory, { Api, ApiConfig } from './apiFactory';
 
 let api: Api;
 
@@ -60,8 +59,17 @@ export default {
   getDependency(name: string): Promise<Dependency> {
     return api.get(`/dependencies/${name}@latest`);
   },
-  getSandbox(id: string): Promise<Sandbox> {
-    return api.get(`/sandboxes/${id}`);
+  async getSandbox(id: string): Promise<Sandbox> {
+    const sandbox = await api.get<Sandbox>(`/sandboxes/${id}`);
+
+    // We need to add savedCode property to track it
+    return {
+      ...sandbox,
+      modules: sandbox.modules.map(module => ({
+        ...module,
+        savedCode: null,
+      })),
+    };
   },
   forkSandbox(id: string): Promise<Sandbox> {
     const url = id.includes('/')

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

@@ -580,7 +580,7 @@ export const onDevToolsTabAdded: Action<{
 }> = ({ state, actions }, { tab }) => {
   const devToolTabs = state.editor.devToolTabs;
   const { devTools: newDevToolTabs, position } = addDevToolsTabUtil(
-    devToolTabs,
+    json(devToolTabs),
     tab
   );
 
@@ -599,7 +599,11 @@ export const onDevToolsTabMoved: Action<{
   nextPos: any;
 }> = ({ state, actions }, { prevPos, nextPos }) => {
   const devToolTabs = state.editor.devToolTabs;
-  const newDevToolTabs = moveDevToolsTabUtil(devToolTabs, prevPos, nextPos);
+  const newDevToolTabs = moveDevToolsTabUtil(
+    json(devToolTabs),
+    prevPos,
+    nextPos
+  );
   const code = JSON.stringify({ preview: newDevToolTabs }, null, 2);
 
   actions.editor.internal.updateDevtools({
@@ -614,7 +618,7 @@ export const onDevToolsTabClosed: Action<{
 }> = ({ state, actions }, { pos }) => {
   const devToolTabs = state.editor.devToolTabs;
   const closePos = pos;
-  const newDevToolTabs = closeDevToolsTabUtil(devToolTabs, closePos);
+  const newDevToolTabs = closeDevToolsTabUtil(json(devToolTabs), closePos);
   const code = JSON.stringify({ preview: newDevToolTabs }, null, 2);
 
   actions.editor.internal.updateDevtools({

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

@@ -290,10 +290,10 @@ export const setCurrentModule: Action<Module> = ({ state }, module) => {
   state.editor.currentTabId = null;
 
   const tabs = state.editor.tabs as ModuleTab[];
-  const tab = tabs.find(tab => tab.moduleShortid === module.shortid);
+  const tab = tabs.find(tabItem => tabItem.moduleShortid === module.shortid);
 
   if (!tab) {
-    const dirtyTabIndex = tabs.findIndex(tab => tab.dirty);
+    const dirtyTabIndex = tabs.findIndex(tabItem => tabItem.dirty);
     const newTab: ModuleTab = {
       type: TabType.MODULE,
       moduleShortid: module.shortid,
@@ -340,16 +340,19 @@ export const updateDevtools: AsyncAction<{
 
     if (devtoolsModule) {
       await actions.editor.internal.saveCode({
-        code: devtoolsModule.code,
+        code,
         moduleShortid: devtoolsModule.shortid,
         cbID: null,
       });
     } else {
       await actions.files.createModulesByPath({
-        '/.codesandbox/workspace.json': {
-          content: code,
-          isBinary: false,
+        files: {
+          '/.codesandbox/workspace.json': {
+            content: code,
+            isBinary: false,
+          },
         },
+        cbID: null,
       });
     }
   } else {

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

@@ -1,4 +1,3 @@
-import * as internalActions from './internalActions';
 import { AsyncAction } from 'app/overmind';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import getDefinition from '@codesandbox/common/lib/templates';
@@ -11,6 +10,7 @@ import { INormalizedModules } from 'codesandbox-import-util-types';
 import { ModuleTab } from '@codesandbox/common/lib/types';
 import { createOptimisticModule } from 'app/overmind/utils/common';
 import { withOwnedSandbox } from 'app/overmind/factories';
+import * as internalActions from './internalActions';
 
 export const internal = internalActions;
 
@@ -275,10 +275,11 @@ export const massCreateModules: AsyncAction<{
   modules: any;
   directories: any;
   directoryShortid: string;
+  cbID?: string;
 }> = withOwnedSandbox(
   async (
     { state, effects, actions },
-    { modules, directories, directoryShortid }
+    { modules, directories, directoryShortid, cbID }
   ) => {
     const sandboxId = state.editor.currentId;
 
@@ -300,11 +301,10 @@ export const massCreateModules: AsyncAction<{
       if (state.live.isCurrentEditor) {
         effects.live.sendMassCreatedModules(data.modules, data.directories);
       }
-      // Where is the id?
-      // effects.vscode.callCallback()
+
+      effects.vscode.callCallback(cbID);
     } catch (error) {
-      // Where is the id and message?
-      // effects.vscode.callCallbackError()
+      effects.vscode.callCallbackError(cbID);
       effects.notificationToast.error('Unable to create new files');
     }
   }
@@ -381,13 +381,15 @@ export const moduleCreated: AsyncAction<{
 
 export const moduleDeleted: AsyncAction<{
   moduleShortid: string;
-}> = async ({ state, effects }, { moduleShortid }) => {
+}> = async ({ state, effects, actions }, { moduleShortid }) => {
   const sandbox = state.editor.currentSandbox;
   const moduleToDeleteIndex = sandbox.modules.findIndex(
     module => module.shortid === moduleShortid
   );
   const removedModule = sandbox.modules.splice(moduleToDeleteIndex, 1)[0];
 
+  actions.editor.internal.setCurrentModule(state.editor.mainModule);
+
   try {
     await effects.api.deleteModule(sandbox.id, moduleShortid);
 
@@ -400,10 +402,10 @@ export const moduleDeleted: AsyncAction<{
   }
 };
 
-export const createModulesByPath: AsyncAction<INormalizedModules> = async (
-  { state, actions },
-  files
-) => {
+export const createModulesByPath: AsyncAction<{
+  cbID: string;
+  files: INormalizedModules;
+}> = async ({ state, actions }, { files, cbID }) => {
   const sandbox = state.editor.currentSandbox;
 
   const { modules, directories } = denormalize(files, sandbox.directories);
@@ -412,11 +414,12 @@ export const createModulesByPath: AsyncAction<INormalizedModules> = async (
     modules,
     directories,
     directoryShortid: null,
+    cbID,
   });
 };
 
 export const syncSandbox: AsyncAction<any[]> = async (
-  { state, effects, actions },
+  { state, effects },
   updates
 ) => {
   const id = state.editor.currentId;