Fix automatically opening directories (codesandbox#4080)

Author: CompuIves

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

@@ -73,7 +73,10 @@ type State = {
   currentTab: Derive<State, ModuleTab | DiffTab | undefined>;
   modulesByPath: SandboxFs;
   isAdvancedEditor: Derive<State, boolean>;
-  shouldDirectoryBeOpen: Derive<State, (directoryShortid: string) => boolean>;
+  shouldDirectoryBeOpen: Derive<
+    State,
+    (params: { directoryId: string; module?: Module }) => boolean
+  >;
   currentDevToolsPosition: DevToolsTabPosition;
   sessionFrozen: boolean;
   hasLoadedInitialModule: boolean;
@@ -203,21 +206,23 @@ export const state: State = {
       ? currentPackageJSON.code
       : generateFileFromSandbox(currentSandbox);
   },
-  shouldDirectoryBeOpen: ({ currentSandbox, currentModule }) => (
-    directoryShortid: string
-  ) => {
+  shouldDirectoryBeOpen: ({ currentSandbox, currentModule }) => ({
+    directoryId,
+    module = currentModule,
+  }) => {
     if (!currentSandbox) {
       return false;
     }
 
     const { modules, directories } = currentSandbox;
-    const currentModuleId = currentModule.id;
+    const currentModuleId = module.id;
     const currentModuleParents = getModuleParents(
       modules,
       directories,
       currentModuleId
     );
-    const isParentOfModule = currentModuleParents.includes(directoryShortid);
+
+    const isParentOfModule = currentModuleParents.includes(directoryId);
 
     return isParentOfModule;
   },

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx

@@ -114,7 +114,9 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
   } = useOvermind();
 
   const [creating, setCreating] = React.useState<ItemTypes>(null);
-  const [open, setOpen] = React.useState(root || shouldDirectoryBeOpen(id));
+  const [open, setOpen] = React.useState(
+    root || shouldDirectoryBeOpen({ directoryId: id })
+  );
   const [modalConfirm, setModalConfirm] = React.useState<Modal | null>(null);
 
   React.useEffect(() => {
@@ -131,12 +133,19 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
   React.useEffect(
     () =>
       reaction(
-        ({ editor }) => editor.currentModuleShortid,
-        () => {
-          setOpen(isOpen => isOpen || shouldDirectoryBeOpen(id));
+        ({ editor }) => editor.currentModule,
+        currentModule => {
+          setOpen(
+            isOpen =>
+              isOpen ||
+              shouldDirectoryBeOpen({ directoryId: id, module: currentModule })
+          );
         }
       ),
-    [id, reaction, shouldDirectoryBeOpen]
+
+    // shouldDirectoryOpen causes this to unmount for some reason, which bugs out how directories open and close
+    // eslint-disable-next-line
+    [id, reaction]
   );
 
   React.useEffect(() => {

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/index.tsx

@@ -114,7 +114,9 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
   } = useOvermind();
 
   const [creating, setCreating] = React.useState<ItemTypes>(null);
-  const [open, setOpen] = React.useState(root || shouldDirectoryBeOpen(id));
+  const [open, setOpen] = React.useState(
+    root || shouldDirectoryBeOpen({ directoryId: id })
+  );
   const [modalConfirm, setModalConfirm] = React.useState<Modal | null>(null);
 
   React.useEffect(() => {
@@ -131,12 +133,19 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
   React.useEffect(
     () =>
       reaction(
-        ({ editor }) => editor.currentModuleShortid,
-        () => {
-          setOpen(isOpen => isOpen || shouldDirectoryBeOpen(id));
+        ({ editor }) => editor.currentModule,
+        currentModule => {
+          setOpen(
+            isOpen =>
+              isOpen ||
+              shouldDirectoryBeOpen({ directoryId: id, module: currentModule })
+          );
         }
       ),
-    [id, reaction, shouldDirectoryBeOpen]
+
+    // shouldDirectoryOpen causes this to unmount for some reason, which bugs out how directories open and close
+    // eslint-disable-next-line
+    [id, reaction]
   );
 
   React.useEffect(() => {