correctly delete nested directories and modules

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/sandboxFsSync/index.ts

@@ -123,7 +123,6 @@ class SandboxFsSync {
         m.path = path;
         sandboxFs[path] = {
           ...m,
-          path,
           type: 'file',
         };
       }
@@ -132,10 +131,10 @@ class SandboxFsSync {
     sandbox.directories.forEach(d => {
       const path = getDirectoryPath(sandbox.modules, sandbox.directories, d.id);
 
+      d.path = path;
       // If this is a single directory with no children
       if (!Object.keys(sandboxFs).some(p => dirname(p) === path)) {
-        d.path = path;
-        sandboxFs[path] = { ...d, path, type: 'directory' };
+        sandboxFs[path] = { ...d, type: 'directory' };
       }
     });
 

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

@@ -101,8 +101,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     await effects.vscode.closeAllTabs();
 
     actions.internal.setCurrentSandbox(sandbox);
-
-    state.editor.modulesByPath = effects.vscode.fs.create(sandbox);
   } catch (error) {
     state.editor.notFound = true;
     state.editor.error = error.message;
@@ -112,6 +110,7 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
   const sandbox = state.editor.currentSandbox;
 
+  state.editor.modulesByPath = effects.vscode.fs.create(sandbox);
   actions.internal.ensurePackageJSON();
 
   await actions.editor.internal.initializeLiveSandbox(sandbox);

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

@@ -1,9 +1,10 @@
 import {
   getDirectoryPath,
   getModulePath,
+  getModulesAndDirectoriesInDirectory,
 } from '@codesandbox/common/lib/sandbox/modules';
 import getDefinition from '@codesandbox/common/lib/templates';
-import { Module } from '@codesandbox/common/lib/types';
+import { Directory, Module } from '@codesandbox/common/lib/types';
 import { AsyncAction } from 'app/overmind';
 import { withOwnedSandbox } from 'app/overmind/factories';
 import { createOptimisticModule } from 'app/overmind/utils/common';
@@ -75,14 +76,15 @@ export const directoryCreated: AsyncAction<{
       insertedAt: new Date().toString(),
       updatedAt: new Date().toString(),
       type: 'directory' as 'directory',
-      path: getDirectoryPath(
-        sandbox.modules,
-        sandbox.directories,
-        optimisticId
-      ),
+      path: null,
     };
 
-    sandbox.directories.push(optimisticDirectory);
+    sandbox.directories.push(optimisticDirectory as Directory);
+    optimisticDirectory.path = getDirectoryPath(
+      sandbox.modules,
+      sandbox.directories,
+      optimisticId
+    );
     effects.vscode.fs.mkdir(state.editor.modulesByPath, optimisticDirectory);
 
     try {
@@ -216,10 +218,26 @@ export const directoryDeleted: AsyncAction<{
       sandbox.directories.indexOf(directory),
       1
     )[0];
+    const {
+      removedModules,
+      removedDirectories,
+    } = getModulesAndDirectoriesInDirectory(
+      removedDirectory,
+      sandbox.modules,
+      sandbox.directories
+    );
 
-    // We need to recreate everything, as you might have deleted any number
-    // of nested directories or files
-    state.editor.modulesByPath = effects.vscode.fs.create(sandbox);
+    removedModules.forEach(removedModule => {
+      effects.vscode.fs.unlink(state.editor.modulesByPath, removedModule);
+      sandbox.modules.splice(sandbox.modules.indexOf(removedModule), 1);
+    });
+
+    removedDirectories.forEach(removedDirectoryItem => {
+      sandbox.directories.splice(
+        sandbox.directories.indexOf(removedDirectoryItem),
+        1
+      );
+    });
 
     // We open the main module as we do not really know if you had opened
     // any nested file of this directory. It would require complex logic
@@ -231,6 +249,12 @@ export const directoryDeleted: AsyncAction<{
       effects.live.sendDirectoryDeleted(directoryShortid);
     } catch (error) {
       sandbox.directories.push(removedDirectory);
+      removedModules.forEach(removedModule => {
+        sandbox.modules.push(removedModule);
+      });
+      removedDirectories.forEach(removedDirectoryItem => {
+        sandbox.directories.push(removedDirectoryItem);
+      });
       state.editor.modulesByPath = effects.vscode.fs.create(sandbox);
       effects.notificationToast.error('Could not delete directory');
     }

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -1,3 +1,4 @@
+import { getModulesAndDirectoriesInDirectory } from '@codesandbox/common/lib/sandbox/modules';
 import {
   Directory,
   LiveDisconnectReason,
@@ -274,9 +275,30 @@ export const onDirectoryDeleted: Operator<
     return;
   }
 
-  // We need to recreate everything, as you might have deleted any number
-  // of nested directories or files
-  state.editor.modulesByPath = effects.vscode.fs.create(sandbox);
+  const removedDirectory = sandbox.directories.splice(
+    sandbox.directories.indexOf(directory),
+    1
+  )[0];
+  const {
+    removedModules,
+    removedDirectories,
+  } = getModulesAndDirectoriesInDirectory(
+    removedDirectory,
+    sandbox.modules,
+    sandbox.directories
+  );
+
+  removedModules.forEach(removedModule => {
+    effects.vscode.fs.unlink(state.editor.modulesByPath, removedModule);
+    sandbox.modules.splice(sandbox.modules.indexOf(removedModule), 1);
+  });
+
+  removedDirectories.forEach(removedDirectoryItem => {
+    sandbox.directories.splice(
+      sandbox.directories.indexOf(removedDirectoryItem),
+      1
+    );
+  });
 
   // We open the main module as we do not really know if you had opened
   // any nested file of this directory. It would require complex logic

packages/common/src/sandbox/modules.ts

@@ -76,6 +76,23 @@ export function resolveDirectory(
   return directories.find(d => d.shortid === foundDirectoryShortid);
 }
 
+export function getModulesAndDirectoriesInDirectory(
+  directory: Directory,
+  modules: Array<Module>,
+  directories: Array<Directory>
+) {
+  const { path } = directory;
+  return {
+    removedModules: modules.filter(moduleItem =>
+      moduleItem.path.startsWith(path)
+    ),
+    removedDirectories: directories.filter(
+      directoryItem =>
+        directoryItem.path.startsWith(path) && directoryItem !== directory
+    ),
+  };
+}
+
 export function getModulesInDirectory(
   _path: string | undefined,
   modules: Array<Module>,