Use module path for selecting current module (codesandbox#94)

Author: CompuIves

src/app/components/sandbox/CodeEditor/Header.js

@@ -32,28 +32,34 @@ const Buttons = styled.div`
 `;
 
 type Props = {
-  title: string,
   path: string,
   saveComponent: ?() => void,
   prettify: ?Function,
 };
 
-export default ({ path, title, saveComponent, prettify }: Props) => (
-  <Container>
-    <div>
-      <Path>{path}</Path>
-      {title}
-    </div>
+export default ({ path, saveComponent, prettify }: Props) => {
+  const pathParts = path.split('/');
+  const fileName = pathParts[pathParts.length - 1];
+  const pathName = pathParts.slice(0, pathParts.length - 1).join('/');
+  return (
+    <Container>
+      <div>
+        <Path>
+          {pathName}/
+        </Path>
+        {fileName}
+      </div>
 
-    <Buttons>
-      <Tooltip position="bottom" title="Made possible by Prettier">
-        <Button disabled={!prettify} onClick={prettify} small>
-          Prettify
+      <Buttons>
+        <Tooltip position="bottom" title="Made possible by Prettier">
+          <Button disabled={!prettify} onClick={prettify} small>
+            Prettify
+          </Button>
+        </Tooltip>
+        <Button disabled={!saveComponent} onClick={saveComponent} small>
+          Save
         </Button>
-      </Tooltip>
-      <Button disabled={!saveComponent} onClick={saveComponent} small>
-        Save
-      </Button>
-    </Buttons>
-  </Container>
-);
+      </Buttons>
+    </Container>
+  );
+};

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

@@ -460,20 +460,13 @@ export default class CodeEditor extends React.PureComponent {
   server: typeof CodeMirror.TernServer;
 
   render() {
-    const {
-      title,
-      canSave,
-      onlyViewMode,
-      modulePath,
-      preferences,
-    } = this.props;
+    const { canSave, onlyViewMode, modulePath, preferences } = this.props;
 
     return (
       <Container>
         <Header
           saveComponent={canSave && !onlyViewMode && this.handleSaveCode}
           prettify={!onlyViewMode && this.prettify}
-          title={title}
           path={modulePath}
         />
         <CodeContainer

src/app/pages/Sandbox/Editor/Content/Header/ShareView.js

@@ -8,6 +8,7 @@ import ModeIcons from 'app/components/sandbox/ModeIcons';
 import {
   findMainModule,
   modulesFromSandboxSelector,
+  getModulePath,
 } from 'app/store/entities/sandboxes/modules/selectors';
 import { directoriesFromSandboxSelector } from 'app/store/entities/sandboxes/directories/selectors';
 import {
@@ -172,9 +173,11 @@ class ShareView extends React.PureComponent {
   setMixedView = () => this.setState({ showEditor: true, showPreview: true });
 
   setDefaultModule = id => this.setState({ defaultModule: id });
+
   clearDefaultModule = () => this.setState({ defaultModule: null });
 
   getOptionsUrl = () => {
+    const { modules, directories } = this.props;
     const {
       defaultModule,
       showEditor,
@@ -188,9 +191,10 @@ class ShareView extends React.PureComponent {
 
     const options = {};
 
-    const mainModuleShortid = findMainModule(this.props.modules).shortid;
-    if (defaultModule && defaultModule !== mainModuleShortid) {
-      options.module = defaultModule;
+    const mainModuleId = findMainModule(modules).id;
+    if (defaultModule && defaultModule !== mainModuleId) {
+      const modulePath = getModulePath(modules, directories, defaultModule);
+      options.module = modulePath;
     }
 
     if (showEditor && !showPreview) {
@@ -291,7 +295,7 @@ class ShareView extends React.PureComponent {
     } = this.state;
 
     const defaultModule =
-      this.state.defaultModule || findMainModule(modules).shortid;
+      this.state.defaultModule || findMainModule(modules).id;
 
     return (
       <Container>

src/app/pages/Sandbox/Editor/Content/index.js

@@ -139,6 +139,7 @@ class EditorPreview extends React.PureComponent {
 
     const currentModule = findCurrentModule(
       modules,
+      directories,
       currentModuleId,
       mainModule,
     );

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

@@ -54,6 +54,7 @@ class Files extends React.PureComponent {
     const { currentModule: currentModuleId } = sandbox;
     const currentModule = findCurrentModule(
       modules,
+      directories,
       currentModuleId,
       mainModule,
     );

src/app/store/entities/sandboxes/modules/selectors.js

@@ -2,6 +2,7 @@
 import type { Directory, Module } from 'common/types';
 import { createSelector } from 'reselect';
 import { values } from 'lodash';
+import resolveModule from 'sandbox/utils/resolve-module';
 
 export const modulesSelector = state => state.entities.modules;
 
@@ -13,13 +14,26 @@ export const findMainModule = (modules: Module[]) =>
 
 export const findCurrentModule = (
   modules: Module[],
-  currentModuleId: string,
+  directories: Directory[],
+  modulePath: string,
   mainModule: Module,
-): Module =>
-  modules.find(m => m.id === currentModuleId) ||
-  modules.find(m => m.shortid === currentModuleId) || // deep-links requires this
-  mainModule;
+): Module => {
+  // cleanPath, encode and replace first /
+  const cleanPath = decodeURIComponent(modulePath).replace('/', '');
+  let foundModule = null;
+  try {
+    foundModule = resolveModule(cleanPath, modules, directories);
+  } catch (e) {
+    /* leave empty */
+  }
 
+  return (
+    foundModule ||
+    modules.find(m => m.id === modulePath) ||
+    modules.find(m => m.shortid === modulePath) || // deep-links requires this
+    mainModule
+  );
+};
 function findById(entities: Array<Module | Directory>, id: string) {
   return entities.find(e => e.id === id);
 }
@@ -43,7 +57,7 @@ export const getModulePath = (
     path = `/${directory.title}${path}`;
     directory = findByShortid(directories, directory.directoryShortid);
   }
-  return path;
+  return `${path}${module.title}`;
 };
 
 /**

src/embed/App.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { camelizeKeys } from 'humps';
 import 'whatwg-fetch';
 
-import type { Sandbox } from 'common/types';
+import type { Sandbox, Module } from 'common/types';
 import Centered from 'app/components/flex/Centered';
 import Title from 'app/components/text/Title';
 import SubTitle from 'app/components/text/SubTitle';
@@ -13,6 +13,10 @@ import Header from './components/Header';
 import Content from './components/Content';
 import Sidebar from './components/Sidebar';
 import { getSandboxOptions } from '../common/url';
+import {
+  findCurrentModule,
+  findMainModule,
+} from 'app/store/entities/sandboxes/modules/selectors';
 
 const Container = styled.div`
   display: flex;
@@ -106,16 +110,10 @@ export default class App extends React.PureComponent {
         .then(res => res.json())
         .then(camelizeKeys);
 
-      const currentModule =
-        this.state.currentModule ||
-        response.data.modules.find(
-          m => m.title === 'index.js' && m.directoryShortid == null,
-        ).shortid;
-
       document.title = response.data.title
         ? `${response.data.title} - CodeSandbox`
         : 'Embed - CodeSandbox';
-      this.setState({ sandbox: response.data, currentModule });
+      this.setState({ sandbox: response.data });
     } catch (e) {
       this.setState({ notFound: true });
     }
@@ -144,6 +142,18 @@ export default class App extends React.PureComponent {
   setProjectView = (sandboxId: string, isOpen: boolean) =>
     this.setState({ isInProjectView: isOpen });
 
+  getCurrentModuleFromPath = () => {
+    const { sandbox, currentModule: currentModulePath } = this.state;
+    if (!sandbox) return null;
+
+    return findCurrentModule(
+      sandbox.modules,
+      sandbox.directories,
+      currentModulePath,
+      findMainModule(sandbox.modules),
+    );
+  };
+
   content = () => {
     if (this.state.notFound) {
       return (
@@ -183,7 +193,7 @@ export default class App extends React.PureComponent {
           isInProjectView={isInProjectView}
           setProjectView={this.setProjectView}
           sandbox={this.state.sandbox}
-          currentModule={this.state.currentModule}
+          currentModule={this.getCurrentModuleFromPath().id}
           hideNavigation={this.state.hideNavigation}
           autoResize={this.state.autoResize}
           fontSize={this.state.fontSize}
@@ -199,7 +209,7 @@ export default class App extends React.PureComponent {
         {this.state.sandbox &&
           <Sidebar
             setCurrentModule={this.setCurrentModule}
-            currentModule={this.state.currentModule}
+            currentModule={this.getCurrentModuleFromPath().id}
             sandbox={this.state.sandbox}
           />}
         <Moving sidebarOpen={this.state.sidebarOpen}>

src/embed/components/Content.js

@@ -8,6 +8,10 @@ import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 
 import type { Sandbox, Module, ModuleError } from 'common/types';
 import fetchBundle from 'app/store/entities/sandboxes/bundler';
+import {
+  findCurrentModule,
+  findMainModule,
+} from '../../app/store/entities/sandboxes/modules/selectors';
 
 const Container = styled.div`
   display: flex;
@@ -178,6 +182,7 @@ export default class Content extends React.PureComponent {
       sandbox,
       showEditor,
       showPreview,
+
       isInProjectView,
       currentModule,
       hideNavigation,
@@ -188,11 +193,12 @@ export default class Content extends React.PureComponent {
     const alteredModules = this.getAlteredModules();
 
     // $FlowIssue
-    const mainModule: Module =
-      alteredModules.find((m: Module) => m.shortid === currentModule) ||
-      alteredModules.find(
-        (m: Module) => m.title === 'index.js' && m.directoryShortid == null,
-      );
+    const mainModule: Module = findCurrentModule(
+      sandbox.modules,
+      sandbox.directories,
+      currentModule,
+      findMainModule(sandbox.modules),
+    );
 
     if (!mainModule) throw new Error('Cannot find main module');
 

src/embed/components/File.js

@@ -8,16 +8,15 @@ import Entry from 'app/pages/Sandbox/Editor/Workspace/EntryContainer';
 
 type Props = {
   id: string,
+  shortid: string,
   title: string,
   type: 'module' | 'directory',
-  setCurrentModule: (id: string) => void,
+  setCurrentModule: (shortid: string, id: string) => void,
   depth: number,
   active?: boolean,
   alternative?: boolean,
 };
-const LeftOffset = styled.div`
-  padding-left: ${props => props.depth}rem;
-`;
+const LeftOffset = styled.div`padding-left: ${props => props.depth}rem;`;
 
 export default class File extends React.PureComponent {
   props: Props;
@@ -40,9 +39,9 @@ export default class File extends React.PureComponent {
   };
 
   setCurrentModule = () => {
-    const { id, setCurrentModule } = this.props;
+    const { id, shortid, setCurrentModule } = this.props;
 
-    setCurrentModule(id);
+    setCurrentModule(id, shortid);
   };
 
   render() {
@@ -54,7 +53,9 @@ export default class File extends React.PureComponent {
           active={active}
           onClick={this.setCurrentModule}
         >
-          <LeftOffset depth={depth}>{this.getIcon()} {title}</LeftOffset>
+          <LeftOffset depth={depth}>
+            {this.getIcon()} {title}
+          </LeftOffset>
         </Entry>
       </div>
     );

src/embed/components/Files.js

@@ -15,7 +15,7 @@ type Props = {
   directoryId: string,
   depth: number,
   currentModule: string,
-  setCurrentModule: (id: string) => any,
+  setCurrentModule: (id: string, shortid: string) => any,
 };
 
 const Files = ({
@@ -39,7 +39,8 @@ const Files = ({
       {sortBy(childrenDirectories, d => d.title).map(d =>
         <div key={d.shortid}>
           <File
-            id={d.shortid}
+            id={d.id}
+            shortid={d.shortid}
             title={d.title}
             type="directory"
             depth={depth}
@@ -57,13 +58,14 @@ const Files = ({
       )}
       {sortBy(childrenModules, m => m.title).map(m =>
         <File
-          id={m.shortid}
+          id={m.id}
+          shortid={m.shortid}
           title={m.title}
           key={m.shortid}
           type="module"
           depth={depth}
           setCurrentModule={setCurrentModule}
-          active={m.shortid === currentModule}
+          active={m.id === currentModule}
           alternative={m.title === 'index.js' && m.directoryShortid == null}
         />,
       )}