Fix automatically opening dirs

Author: CompuIves

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { DropTarget } from 'react-dnd';
+import { reaction } from 'mobx';
 import Modal from 'app/components/Modal';
 import Alert from 'app/components/Alert';
 
@@ -15,19 +16,10 @@ class DirectoryEntry extends React.Component {
     super(props);
 
     const { id, store } = this.props;
-    const { modules, directories } = store.editor.currentSandbox;
-    const currentModuleId = store.editor.currentModule.id;
-    const currentModuleParents = getModuleParents(
-      modules,
-      directories,
-      currentModuleId
-    );
-
-    const isParentOfModule = currentModuleParents.includes(id);
 
     this.state = {
       creating: '',
-      open: props.root || isParentOfModule,
+      open: props.root || store.editor.shouldDirectoryBeOpen(id),
       showDeleteDirectoryModal: false,
       showDeleteModuleModal: false,
       moduleToDeleteTitle: null,
@@ -39,27 +31,22 @@ class DirectoryEntry extends React.Component {
     if (this.props.innerRef) {
       this.props.innerRef(this);
     }
-  }
 
-  componentWillReceiveProps(nextProps, nextState) {
-    if (
-      !nextState.open &&
-      this.props.store.editor.currentModule !==
-        nextProps.store.editor.currentModule
-    ) {
-      const { id, store } = nextProps;
-      const { modules, directories } = store.editor.currentSandbox;
-      const currentModuleId = store.editor.currentModule.id;
-      const currentModuleParents = getModuleParents(
-        modules,
-        directories,
-        currentModuleId
-      );
-
-      const isParentOfModule = currentModuleParents.includes(id);
-      if (isParentOfModule) {
-        this.setState({ open: isParentOfModule });
+    this.openListener = reaction(
+      () => this.props.store.editor.currentModuleShortid,
+      () => {
+        if (!this.state.open) {
+          const { id, store } = this.props;
+
+          this.setState({ open: store.editor.shouldDirectoryBeOpen(id) });
+        }
       }
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.openListener) {
+      this.openListener();
     }
   }
 

packages/app/src/app/store/modules/editor/computed.js

@@ -1,3 +1,35 @@
 export function isModuleSynced(moduleShortid) {
   return this.changedModuleShortids.indexOf(moduleShortid) === -1;
 }
+
+function getModuleParents(modules, directories, id) {
+  const module = modules.find(moduleEntry => moduleEntry.id === id);
+
+  if (!module) return [];
+
+  let directory = directories.find(
+    directoryEntry => directoryEntry.shortid === module.directoryShortid
+  );
+  let directoryIds = [];
+  while (directory != null) {
+    directoryIds = [...directoryIds, directory.id];
+    directory = directories.find(
+      directoryEntry => directoryEntry.shortid === directory.directoryShortid // eslint-disable-line
+    );
+  }
+
+  return directoryIds;
+}
+
+export function shouldDirectoryBeOpen(directoryShortid) {
+  const { modules, directories } = this.currentSandbox;
+  const currentModuleId = this.currentModule.id;
+  const currentModuleParents = getModuleParents(
+    modules,
+    directories,
+    currentModuleId
+  );
+
+  const isParentOfModule = currentModuleParents.includes(directoryShortid);
+  return isParentOfModule;
+}

packages/app/src/app/store/modules/editor/index.js

@@ -10,7 +10,7 @@ import {
   currentPackageJSONCode,
   parsedConfigurations,
 } from './getters';
-import { isModuleSynced } from './computed';
+import { isModuleSynced, shouldDirectoryBeOpen } from './computed';
 import { loadSandbox } from '../../sequences';
 
 export default Module({
@@ -57,6 +57,7 @@ export default Module({
   },
   computed: {
     isModuleSynced,
+    shouldDirectoryBeOpen,
   },
   signals: {
     addNpmDependency: sequences.addNpmDependency,