Robustify forking (codesandbox#369)

Author: CompuIves

packages/app/src/app/components/sandbox/CodeEditor/Tabs/index.js

@@ -161,7 +161,7 @@ export default class EditorTabs extends React.PureComponent<Props> {
       moduleObject[m.id] = m;
     });
 
-    tabs.forEach(tab => {
+    tabs.filter(tab => moduleObject[tab.moduleId]).forEach(tab => {
       const module = moduleObject[tab.moduleId];
 
       tabNamesObject[module.title] = tabNamesObject[module.title] || [];
@@ -179,6 +179,7 @@ export default class EditorTabs extends React.PureComponent<Props> {
         >
           {tabs
             .map(tab => ({ ...tab, module: moduleObject[tab.moduleId] }))
+            .filter(tab => tab.module)
             .map((tab, i) => {
               const { module } = tab;
               const modulesWithName = tabNamesObject[module.title];

packages/app/src/app/store/entities/sandboxes/actions/fork.js

@@ -3,7 +3,6 @@ import { values } from 'lodash';
 
 import { push } from 'react-router-redux';
 
-import type { Module, Directory } from 'common/types';
 import { sandboxUrl } from 'common/utils/url-generator';
 
 import { createAPIActions, doRequest } from '../../../api/actions';
@@ -16,35 +15,6 @@ import notificationActions from '../../../notifications/actions';
 
 export const FORK_SANDBOX_API_ACTIONS = createAPIActions('SANDBOX', 'FORK');
 
-/**
- * When you fork you get a 'copy' of the modules, these modules have the shortid
- * in common, so if we want to get the module that is equivalent we want to use
- * this
- */
-export const getEquivalentModule = (module: Module, modules: Array<Module>) => {
-  const newModule = modules.find(
-    m => m.id !== module.id && m.shortid === module.shortid
-  );
-
-  return newModule;
-};
-
-/**
- * When you fork you get a 'copy' of the directories, these directories have the shortid
- * in common, so if we want to get the directory that is equivalent we want to use
- * this
- */
-export const getEquivalentDirectory = (
-  directory: Directory,
-  directories: Array<Directory>
-) => {
-  const newDirectory = directories.find(
-    d => d.id !== directory.id && d.shortid === directory.shortid
-  );
-
-  return newDirectory;
-};
-
 export const forkSandbox = (id: string) => async (
   dispatch: Function,
   getState: Function
@@ -57,7 +27,17 @@ export const forkSandbox = (id: string) => async (
 
   const currentSandbox = singleSandboxSelector(getState(), { id });
   if (currentSandbox) {
-    data.currentModule = currentSandbox.currentModule;
+    const currentModule = modulesSelector(getState())[
+      currentSandbox.currentModule
+    ];
+    if (currentModule) {
+      const equivalentModule = data.modules.find(
+        m => m.shortid === currentModule.shortid && m.sourceId === data.sourceId
+      );
+      if (equivalentModule) {
+        data.currentModule = equivalentModule.id;
+      }
+    }
   }
   data.forked = true;
 
@@ -73,7 +53,10 @@ export const forkSandbox = (id: string) => async (
     // Mark old modules as synced so there is no confirm when moving to new url
     dispatch(moduleActions.setModuleSynced(m.id));
 
-    const newModule = getEquivalentModule(m, modules) || m;
+    const newModule =
+      modules.find(
+        m2 => m2.shortid === m.shortid && m2.sourceId === data.sourceId
+      ) || m;
     dispatch(moduleActions.setCode(newModule.id, m.code));
   });
 

packages/app/src/app/store/entities/sandboxes/actions/fork.test.js

@@ -18,13 +18,15 @@ export default new schema.Entity(
   {
     processStrategy: sandbox => {
       const {
-        currentModule,
+        currentModule: hrefCurrentModule,
         initialPath,
         isInProjectView,
         isEditorScreen,
         isPreviewScreen,
       } = getSandboxOptions(document.location.href);
 
+      const currentModule = hrefCurrentModule || sandbox.currentModule;
+
       const mainModule = findMainModule(
         sandbox.modules,
         sandbox.directories,

packages/app/src/app/store/entities/sandboxes/entity.js

@@ -1,7 +1,7 @@
 // @flow
 import type { Sandbox } from 'common/types';
 import { moveItem } from 'common/utils/array';
-import { mapValues } from 'lodash';
+import { mapValues, omit } from 'lodash';
 
 import {
   SET_NPM_DEPENDENCIES,
@@ -311,10 +311,7 @@ export default function reducer(
         owned: false,
       }));
     case DELETE_SANDBOX_API_ACTIONS.SUCCESS:
-      return {
-        ...state,
-        [action.meta.id]: null,
-      };
+      return omit(state, action.meta.id);
 
     case SET_MODULE_SYNCED:
       return mapValues(state, s => ({