Add transforms for modules and directories (codesandbox#2624)

Author: CompuIves

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

@@ -22,7 +22,11 @@ import {
 import { client } from 'app/graphql/client';
 import { LIST_TEMPLATES } from 'app/pages/Dashboard/queries';
 
-import { transformSandbox } from '../utils/sandbox';
+import {
+  transformSandbox,
+  transformDirectory,
+  transformModule,
+} from '../utils/sandbox';
 import apiFactory, { Api, ApiConfig } from './apiFactory';
 
 let api: Api;
@@ -78,22 +82,26 @@ export default {
     return transformSandbox(sandbox);
   },
   createModule(sandboxId: string, module: Module): Promise<Module> {
-    return api.post(`/sandboxes/${sandboxId}/modules`, {
-      module: {
-        title: module.title,
-        directoryShortid: module.directoryShortid,
-        code: module.code,
-        isBinary: module.isBinary === undefined ? false : module.isBinary,
-      },
-    });
+    return api
+      .post(`/sandboxes/${sandboxId}/modules`, {
+        module: {
+          title: module.title,
+          directoryShortid: module.directoryShortid,
+          code: module.code,
+          isBinary: module.isBinary === undefined ? false : module.isBinary,
+        },
+      })
+      .then(transformModule);
   },
   deleteModule(sandboxId: string, moduleShortid: string): Promise<void> {
     return api.delete(`/sandboxes/${sandboxId}/modules/${moduleShortid}`);
   },
   saveModuleCode(sandboxId: string, module: Module): Promise<Module> {
-    return api.put(`/sandboxes/${sandboxId}/modules/${module.shortid}`, {
-      module: { code: module.code },
-    });
+    return api
+      .put(`/sandboxes/${sandboxId}/modules/${module.shortid}`, {
+        module: { code: module.code },
+      })
+      .then(transformModule);
   },
   saveModules(sandboxId: string, modules: Module[]) {
     return api.put(`/sandboxes/${sandboxId}/modules/mupdate`, {
@@ -193,12 +201,14 @@ export default {
     directoryShortid: string,
     title: string
   ): Promise<Directory> {
-    return api.post(`/sandboxes/${sandboxId}/directories`, {
-      directory: {
-        title,
-        directoryShortid,
-      },
-    });
+    return api
+      .post(`/sandboxes/${sandboxId}/directories`, {
+        directory: {
+          title,
+          directoryShortid,
+        },
+      })
+      .then(transformDirectory);
   },
   saveModuleDirectory(
     sandboxId: string,
@@ -247,7 +257,7 @@ export default {
       name,
     });
   },
-  massCreateModules(
+  async massCreateModules(
     sandboxId: string,
     directoryShortid: string | null,
     modules: Module[],
@@ -256,11 +266,18 @@ export default {
     modules: Module[];
     directories: Directory[];
   }> {
-    return api.post(`/sandboxes/${sandboxId}/modules/mcreate`, {
+    const data = (await api.post(`/sandboxes/${sandboxId}/modules/mcreate`, {
       directoryShortid,
       modules,
       directories,
-    });
+    })) as {
+      modules: Module[];
+      directories: Directory[];
+    };
+
+    data.modules = data.modules.map(transformModule);
+    data.directories = data.directories.map(transformDirectory);
+    return data;
   },
   createGit(
     sandboxId: string,

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

@@ -1,20 +1,28 @@
-import { Sandbox } from '@codesandbox/common/lib/types';
+import { Sandbox, Module, Directory } from '@codesandbox/common/lib/types';
+
+export function transformModule(module: Module) {
+  return {
+    ...module,
+    savedCode: null,
+    isNotSynced: false,
+    errors: [],
+    corrections: [],
+    type: 'file' as 'file',
+  };
+}
+
+export function transformDirectory(directory: Directory) {
+  return {
+    ...directory,
+    type: 'directory' as 'directory',
+  };
+}
 
 export function transformSandbox(sandbox: Sandbox) {
   // We need to add client side properties for tracking
   return {
     ...sandbox,
-    modules: sandbox.modules.map(module => ({
-      ...module,
-      savedCode: null,
-      isNotSynced: false,
-      errors: [],
-      corrections: [],
-      type: 'file' as 'file',
-    })),
-    directories: sandbox.directories.map(directory => ({
-      ...directory,
-      type: 'directory' as 'directory',
-    })),
+    modules: sandbox.modules.map(transformModule),
+    directories: sandbox.directories.map(transformDirectory),
   };
 }