feat($urlParams): add params for isInProjectView + initialPath (codesandbox#49)

* feat($urlParams): add params for isInProjectView + initialPath

* fix($flow): addd isInprojectView + initialPath to Sandbox flow type

* Add @faceyspacey as a contributor

* Add @faceyspacey as a contributor

* feat($fileEavl): removed toggle isInProjectView switch from address bar, re-incarnated it as isFileEval in the Files WorkspaceItem

* fix($deleteLogging): remove console.logs

* fix($checked): switch checkbox value to checked attribute

* fix($logging): remove logging

* fix($frameUrl): insure iframe doesnt re-render when its URL changes

* bring navigator project/module view switch back

* start($currentDirectoryShortid)

* Rename path variables

* Remove file eval switch

* Remove directoryShortId from Files component

* Select index.js defaultModule by default in ShareView

* Change current module view wording

* Make embed work with URL parameters

* Auto open directory of current module

* fix($logging): remove logging

* Update @faceyspacey as a contributor

* chore($tests): update test snapshots

Author: faceyspacey

.all-contributorsrc

@@ -52,6 +52,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "faceyspacey",
+      "name": "James Gillmore",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/154732?v=3",
+      "profile": "http://twitter.com/faceyspacey",
+      "contributions": [
+        "code",
+        "bug"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client)
 
 An online code editor with a focus on React.
 
@@ -44,8 +44,8 @@ CodeSandbox consists several separate servers, some of these are open sourced.
 Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=bengummer "Code") |
-| :---: | :---: | :---: | :---: |
+| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub>Ives van Hoorne</sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/CodeSandbox/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub>Donavon West</sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub>Jeff Allen</sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub>Ben Gummer</sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub>James Gillmore</sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/CodeSandbox/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/CodeSandbox/issues?q=author%3Afaceyspacey "Bug reports") |
+| :---: | :---: | :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

src/app/components/sandbox/Preview/Navigator.js

@@ -92,4 +92,4 @@ export default ({
         </Tooltip>
       </SwitchContainer>}
   </Container>
-);
+);

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

@@ -29,6 +29,7 @@ const StyledFrame = styled.iframe`
 
 type Props = {
   sandboxId: string,
+  initialPath: ?string,
   isInProjectView: boolean,
   modules: Array<Module>,
   directories: Array<Directory>,
@@ -56,20 +57,27 @@ type State = {
 };
 
 export default class Preview extends React.PureComponent {
+  initialPath: string;
+
   constructor(props: Props) {
     super(props);
 
     this.state = {
       frameInitialized: false,
       history: [],
       historyPosition: 0,
-      urlInAddressBar: '',
+      urlInAddressBar: props.initialPath || '',
       url: null,
     };
 
     if (!props.noDelay) {
       this.executeCode = debounce(this.executeCode, 800);
     }
+
+    // we need a value that doesn't change when receiving `initialPath`
+    // from the query params, or the iframe will continue to be re-rendered
+    // when the user navigates the iframe app, which shows the loading screen
+    this.initialPath = this.state.urlInAddressBar;
   }
 
   static defaultProps = {
@@ -252,6 +260,7 @@ export default class Preview extends React.PureComponent {
     const { history, historyPosition } = this.state;
 
     document.getElementById('sandbox').src = frameUrl(history[historyPosition]);
+
     this.setState({
       urlInAddressBar: history[historyPosition],
     });
@@ -350,7 +359,7 @@ export default class Preview extends React.PureComponent {
           />}
         <StyledFrame
           sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups allow-presentation"
-          src={frameUrl()}
+          src={frameUrl(this.initialPath)}
           id="sandbox"
           hideNavigation={hideNavigation}
         />

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

@@ -144,13 +144,16 @@ const mapStateToProps = createSelector(
 );
 class ShareView extends React.PureComponent {
   props: Props;
+
   state = {
     showEditor: true,
     showPreview: true,
     defaultModule: null,
     autoResize: false,
     hideNavigation: false,
+    isCurrentModuleView: false,
     fontSize: 14,
+    initialPath: '',
   };
 
   handleChange = e => this.setState({ message: e.target.value });
@@ -169,6 +172,7 @@ 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 {
@@ -177,12 +181,15 @@ class ShareView extends React.PureComponent {
       showPreview,
       autoResize,
       hideNavigation,
+      isCurrentModuleView,
       fontSize,
+      initialPath,
     } = this.state;
 
     const options = {};
 
-    if (defaultModule) {
+    const mainModuleShortid = findMainModule(this.props.modules).shortid;
+    if (defaultModule && defaultModule !== mainModuleShortid) {
       options.module = defaultModule;
     }
 
@@ -201,10 +208,18 @@ class ShareView extends React.PureComponent {
       options.hidenavigation = 1;
     }
 
+    if (isCurrentModuleView) {
+      options.moduleview = 1;
+    }
+
     if (fontSize !== 14) {
       options.fontsize = fontSize;
     }
 
+    if (initialPath) {
+      options.initialpath = initialPath;
+    }
+
     return optionsToParameterizedUrl(options);
   };
 
@@ -220,6 +235,11 @@ class ShareView extends React.PureComponent {
     return protocolAndHost() + embedUrl(sandbox) + this.getOptionsUrl();
   };
 
+  setInitialPath = ({ target }) => {
+    const initialPath = target.value;
+    this.setState({ initialPath });
+  };
+
   getIframeScript = () =>
     `<iframe src="${this.getEmbedUrl()}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
 
@@ -251,20 +271,27 @@ class ShareView extends React.PureComponent {
     this.setState({ hideNavigation });
   };
 
+  setIsCurrentModuleView = (isCurrentModuleView: boolean) => {
+    this.setState({ isCurrentModuleView });
+  };
+
   setFontSize = (fontSize: number) => [this.setState({ fontSize })];
 
   render() {
     const { sandbox, modules, directories } = this.props;
+
     const {
       showEditor,
       showPreview,
       autoResize,
       hideNavigation,
+      isCurrentModuleView,
       fontSize,
+      initialPath,
     } = this.state;
 
     const defaultModule =
-      this.state.defaultModule || findMainModule(modules).id;
+      this.state.defaultModule || findMainModule(modules).shortid;
 
     return (
       <Container>
@@ -295,12 +322,27 @@ class ShareView extends React.PureComponent {
                       value={hideNavigation}
                       setValue={this.setHideNavigation}
                     />
+                    <PaddedPreference
+                      title="Show current module view"
+                      tooltip="Only show the module that's currently open"
+                      value={isCurrentModuleView}
+                      setValue={this.setIsCurrentModuleView}
+                    />
                     <PaddedPreference
                       title="Font size"
                       value={fontSize}
                       setValue={this.setFontSize}
                     />
                   </div>
+                  <Inputs>
+                    <LinkName>Project Initial Path</LinkName>
+                    <input
+                      onFocus={this.select}
+                      placeholder="e.g: /home"
+                      value={initialPath}
+                      onChange={this.setInitialPath}
+                    />
+                  </Inputs>
                   <div>
                     <h4>Default view</h4>
                     <div
@@ -321,13 +363,13 @@ class ShareView extends React.PureComponent {
                     </div>
                   </div>
                   <div>
-                    <h4>Default module to show and preview</h4>
+                    <h4>Default module to show</h4>
 
                     <FilesContainer>
                       <Files
                         modules={modules}
-                        directories={directories}
                         directoryId={null}
+                        directories={directories}
                         currentModule={defaultModule}
                         setCurrentModule={this.setDefaultModule}
                       />

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

@@ -19,6 +19,7 @@ import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import userActionCreators from 'app/store/user/actions';
 import {
   findMainModule,
+  findCurrentModule,
   getModulePath,
   modulesFromSandboxSelector,
 } from 'app/store/entities/sandboxes/modules/selectors';
@@ -133,10 +134,10 @@ class EditorPreview extends React.PureComponent {
 
     const mainModule = findMainModule(modules);
     if (!mainModule) throw new Error('Cannot find main module');
-
+    
     const { currentModule: currentModuleId } = sandbox;
-    const currentModule =
-      modules.find(m => m.id === currentModuleId) || mainModule;
+    
+    const currentModule = findCurrentModule(modules, currentModuleId, mainModule);
     const modulePath = getModulePath(modules, directories, currentModule.id);
 
     if (currentModule == null) return null;
@@ -163,6 +164,7 @@ class EditorPreview extends React.PureComponent {
       <FullSize inactive={this.state.resizing}>
         <Preview
           sandboxId={sandbox.id}
+          initialPath={sandbox.initialPath}
           bundle={sandbox.dependencyBundle}
           fetchBundle={sandboxActions.fetchDependenciesBundle}
           module={currentModule}

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

@@ -9,17 +9,19 @@ import type { Module, Directory, ModuleError } from 'common/types';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import { validateTitle } from 'app/store/entities//sandboxes/modules/validator';
 import contextMenuActionCreators from 'app/store/context-menu/actions';
+import { getModuleParents } from 'app/store/entities/sandboxes/modules/selectors';
 
 import Entry from './Entry';
 import DirectoryChildren from './DirectoryChildren';
 
-const EntryContainer = styled.div`
-  position: relative;
-`;
+const EntryContainer = styled.div`position: relative;`;
 
 const Overlay = styled.div`
   position: absolute;
-  top: 0; bottom: 0; left: 0; right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   background-color: rgba(0, 0, 0, 0.3);
   display: ${props => (props.isOver ? 'block' : 'none')};
 `;
@@ -61,9 +63,18 @@ class DirectoryEntry extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    const { id, modules, directories, currentModuleId } = this.props;
+    const currentModuleParents = getModuleParents(
+      modules,
+      directories,
+      currentModuleId,
+    );
+
+    const isParentOfModule = currentModuleParents.includes(id);
+
     this.state = {
       creating: '',
-      open: props.root,
+      open: props.root || isParentOfModule,
     };
   }
 

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

@@ -9,6 +9,7 @@ import { DragDropContext } from 'react-dnd';
 import {
   modulesFromSandboxSelector,
   findMainModule,
+  findCurrentModule,
 } from 'app/store/entities/sandboxes/modules/selectors';
 import { directoriesFromSandboxSelector } from 'app/store/entities/sandboxes/directories/selectors';
 
@@ -47,12 +48,15 @@ class Files extends React.PureComponent {
 
   render() {
     const { sandbox, modules, directories } = this.props;
+    if (sandbox == null) return null;
 
     const mainModule = findMainModule(modules);
-
-    const { currentModule } = sandbox;
-
-    if (sandbox == null) return null;
+    const { currentModule: currentModuleId } = sandbox;
+    const currentModule = findCurrentModule(
+      modules,
+      currentModuleId,
+      mainModule,
+    );
 
     return (
       <DirectoryEntry
@@ -62,8 +66,7 @@ class Files extends React.PureComponent {
         modules={sortBy(modules, 'title')}
         directories={sortBy(directories, 'title')}
         isInProjectView={sandbox.isInProjectView}
-        // $FlowIssue
-        currentModuleId={currentModule || mainModule.id}
+        currentModuleId={currentModule.id}
         errors={sandbox.errors}
         id={null}
         shortid={null}

src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js

@@ -11,7 +11,9 @@ const ChildContainer = styled.div`
   overflow: ${props => (props.open ? 'inherit' : 'hidden')};
   height: ${props => (props.open ? '100%' : 0)};
 
-  ${({ disabled }) => disabled && `
+  ${({ disabled }) =>
+    disabled &&
+    `
     pointer-events: none;
 
     &:after {
@@ -29,7 +31,7 @@ const ChildContainer = styled.div`
       right: 0;
       background-color: rgba(0, 0, 0, 0.4);
     }
-  `}
+  `};
 `;
 
 const ItemHeader = styled.div`
@@ -86,7 +88,9 @@ export default class WorkspaceItem extends React.PureComponent {
     return (
       <div>
         <ItemHeader onClick={this.toggleOpen}>
-          <Title>{title}</Title>
+          <Title>
+            {title}
+          </Title>
           <ExpandIconContainer open={open} />
         </ItemHeader>
         <ChildContainer disabled={disabled} open={open}>