embed: make folders collapsable (codesandbox#2370)

* embed: make folders collapsable

* move util functions down

* move onClick logic to Files

* put logic for default calculation inside lazy

Author: siddharthkp

packages/app/src/embed/components/File/index.js

@@ -7,13 +7,12 @@ import EntryTitle from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/
 import { LeftOffset } from './elements';
 
 type Props = {
-  id: string,
-  setCurrentModule: (id: string) => void,
   title: string,
   depth: number,
   type: string,
   active?: boolean,
   alternative?: boolean,
+  onClick?: () => void,
 };
 
 export default class File extends React.PureComponent<Props> {
@@ -22,21 +21,15 @@ export default class File extends React.PureComponent<Props> {
     alternative: false,
   };
 
-  setCurrentModule = () => {
-    const { id, setCurrentModule } = this.props;
-
-    setCurrentModule(id);
-  };
-
   render() {
-    const { title, depth, type, active, alternative } = this.props;
+    const { title, depth, type, active, alternative, onClick } = this.props;
     return (
       <div>
         <Entry
           alternative={alternative}
           active={active}
-          onClick={this.setCurrentModule}
           type={type}
+          onClick={onClick}
         >
           <LeftOffset depth={depth}>
             <EntryIcons type={type} />

packages/app/src/embed/components/Files/index.js

@@ -3,7 +3,10 @@
 import * as React from 'react';
 import { sortBy } from 'lodash-es';
 
-import type { Module, Directory } from '@codesandbox/common/lib/types';
+import type {
+  Module,
+  Directory as DirectoryType,
+} from '@codesandbox/common/lib/types';
 
 import { isMainModule } from '@codesandbox/common/lib/sandbox/modules';
 // eslint-disable-next-line import/extensions
@@ -14,8 +17,8 @@ import File from '../File';
 import { Container } from './elements';
 
 type Props = {
-  modules: Array<Module>,
-  directories: Array<Directory>,
+  modules: Module[],
+  directories: DirectoryType[],
   directoryId: ?string,
   depth?: number,
   currentModule: string,
@@ -44,28 +47,21 @@ function Files({
 
   return (
     <Container>
-      {sortBy(childrenDirectories, d => d.title).map(d => (
-        <div key={d.shortid}>
-          <File
-            id={d.id}
-            shortid={d.shortid}
-            title={d.title}
-            type="directory-open"
-            depth={depth}
-            setCurrentModule={setCurrentModule}
-          />
-          <Files
-            modules={modules}
-            directories={directories}
-            directoryId={d.shortid}
-            depth={depth + 1}
+      {sortBy(childrenDirectories, directory => directory.title).map(
+        directory => (
+          <Directory
+            key={directory.shortid}
+            directory={directory}
+            currentModuleId={currentModule}
             setCurrentModule={setCurrentModule}
-            currentModule={currentModule}
             template={template}
             entry={entry}
+            modules={modules}
+            directories={directories}
+            depth={depth}
           />
-        </div>
-      ))}
+        )
+      )}
       {sortBy(childrenModules, m => m.title).map(m => (
         <File
           id={m.id}
@@ -74,13 +70,85 @@ function Files({
           key={m.shortid}
           type={getType(m.title)}
           depth={depth}
-          setCurrentModule={setCurrentModule}
           active={m.id === currentModule}
           alternative={isMainModule(m, modules, directories, entry)}
+          onClick={() => setCurrentModule(m.id)}
         />
       ))}
     </Container>
   );
 }
 
+/** Utils to help identify module tree */
+
+const getCurrentModule = (modules, currentModuleId) =>
+  modules.find(module => module.id === currentModuleId);
+
+const getParentDirectory = (directories, child) =>
+  directories.find(directory => directory.shortid === child.directoryShortid);
+
+const getCurrentModuleTree = (directories, currentModule) => {
+  const currentModuleTree = [currentModule];
+
+  let parentDirectory = getParentDirectory(directories, currentModule);
+
+  while (parentDirectory) {
+    currentModuleTree.push(parentDirectory);
+    // get parent directory of the parent directory
+    parentDirectory = getParentDirectory(directories, parentDirectory);
+  }
+
+  return currentModuleTree;
+};
+
+function Directory({
+  directory,
+  currentModuleId,
+  setCurrentModule,
+  template,
+  entry,
+  modules,
+  directories,
+  depth,
+}) {
+  /** directory should be open by default if currentModule is inside it */
+  const [open, setOpen] = React.useState(function() {
+    const currentModule = getCurrentModule(modules, currentModuleId);
+    const currentModuleTree = getCurrentModuleTree(directories, currentModule);
+
+    let openByDefault = false;
+    if (currentModuleTree.find(module => module.id === directory.id)) {
+      openByDefault = true;
+    }
+    return openByDefault;
+  });
+
+  return (
+    <div>
+      <File
+        id={directory.id}
+        shortid={directory.shortid}
+        title={directory.title}
+        type={open ? 'directory-open' : 'directory'}
+        depth={depth}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      />
+      {open ? (
+        <Files
+          modules={modules}
+          directories={directories}
+          directoryId={directory.shortid}
+          depth={depth + 1}
+          currentModule={currentModuleId}
+          setCurrentModule={setCurrentModule}
+          template={template}
+          entry={entry}
+        />
+      ) : null}
+    </div>
+  );
+}
+
 export default Files;