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

.all-contributorsrc

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

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-3-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-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)
 
 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/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://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") |
+| :---: | :---: | :---: | :---: |
 <!-- 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 = {
@@ -158,7 +166,8 @@ export default class Preview extends React.PureComponent {
     const element = document.getElementById('sandbox');
 
     if (element) {
-      element.contentWindow.postMessage(message, frameUrl());
+      const { urlInAddressBar: url } = this.state
+      element.contentWindow.postMessage(message, frameUrl(url));
     }
   };
 
@@ -252,6 +261,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 +360,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

@@ -29,6 +29,14 @@ const Container = styled.div`
   height: 100%;
 `;
 
+const CancelDefaultModule = styled.div`
+  text-decoration: underline;
+  color: rgb(82, 174, 217);
+  position: relative;
+  top: -10px;
+  cursor: pointer;
+`
+
 const FilesContainer = styled.div`
   max-height: 300px;
   overflow: auto;
@@ -144,15 +152,31 @@ const mapStateToProps = createSelector(
 );
 class ShareView extends React.PureComponent {
   props: Props;
-  state = {
-    showEditor: true,
-    showPreview: true,
-    defaultModule: null,
-    autoResize: false,
-    hideNavigation: false,
-    fontSize: 14,
-  };
 
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      showEditor: true,
+      showPreview: true,
+      defaultModule: null,
+      autoResize: false,
+      hideNavigation: false,
+      isFileEval: !props.sandbox.isInProjectView, // thats why i moved this to the constructor :)
+      fontSize: 14,
+      initialPath: ''
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { sandbox: { isInProjectView } } = nextProps
+
+    if (isInProjectView !== this.props.sandbox.isInProjectView) {
+      this.setState({ isFileEval: !isInProjectView })
+    }
+  }
+
+
   handleChange = e => this.setState({ message: e.target.value });
 
   handleSend = () => {
@@ -169,6 +193,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,7 +202,9 @@ class ShareView extends React.PureComponent {
       showPreview,
       autoResize,
       hideNavigation,
+      isFileEval,
       fontSize,
+      initialPath
     } = this.state;
 
     const options = {};
@@ -201,10 +228,18 @@ class ShareView extends React.PureComponent {
       options.hidenavigation = 1;
     }
 
+    if (isFileEval) {
+      options.isFileEval = 1;
+    }
+
     if (fontSize !== 14) {
       options.fontsize = fontSize;
     }
 
+    if (initialPath) {
+      options.initialPath = initialPath;
+    }
+
     return optionsToParameterizedUrl(options);
   };
 
@@ -219,6 +254,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,16 +291,23 @@ class ShareView extends React.PureComponent {
     this.setState({ hideNavigation });
   };
 
+  setIsFileEval = (isFileEval: boolean) => {
+    this.setState({ isFileEval });
+  };
+
   setFontSize = (fontSize: number) => [this.setState({ fontSize })];
 
   render() {
     const { sandbox, modules, directories } = this.props;
+
     const {
       showEditor,
       showPreview,
       autoResize,
       hideNavigation,
+      isFileEval,
       fontSize,
+      initialPath
     } = this.state;
 
     const defaultModule =
@@ -295,12 +342,26 @@ class ShareView extends React.PureComponent {
                       value={hideNavigation}
                       setValue={this.setHideNavigation}
                     />
+                    <PaddedPreference
+                      title="File eval"
+                      value={isFileEval}
+                      setValue={this.setIsFileEval}
+                    />
                     <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,7 +382,12 @@ class ShareView extends React.PureComponent {
                     </div>
                   </div>
                   <div>
-                    <h4>Default module to show and preview</h4>
+                    <h4>Default module to show</h4>
+                    {this.state.defaultModule  &&
+                      <CancelDefaultModule onClick={this.clearDefaultModule}>
+                        cancel
+                      </CancelDefaultModule>
+                    }
 
                     <FilesContainer>
                       <Files

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/DirectoryChildren.js

@@ -72,7 +72,7 @@ export default class DirectoryChildren extends React.PureComponent {
         {modules.filter(x => x.directoryShortid === parentShortid).map(m => {
           const isActive = m.id === currentModuleId;
           const mainModule = isMainModule(m);
-
+          console.log('is ACTIVE', isActive, isActive && m)
           const hasError = !!errors.find(
             e => e.severity === 'error' && e.moduleId === m.id,
           );

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

@@ -36,6 +36,7 @@ const mapDispatchToProps = dispatch => ({
 type Props = {
   id: string,
   shortid: string,
+  currentDirectoryShortid: string,
   sandboxId: string,
   root: ?boolean,
   title: string,

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,11 @@ 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 +62,8 @@ class Files extends React.PureComponent {
         modules={sortBy(modules, 'title')}
         directories={sortBy(directories, 'title')}
         isInProjectView={sandbox.isInProjectView}
-        // $FlowIssue
-        currentModuleId={currentModule || mainModule.id}
+        currentModuleId={currentModule.id}
+        currentDirectoryShortid={currentModule.directoryShortid}
         errors={sandbox.errors}
         id={null}
         shortid={null}

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

@@ -65,6 +65,7 @@ type Props = {
   children: React.Element,
   defaultOpen: ?boolean,
   disabled: ?string,
+  custom: ?React.Element
 };
 
 export default class WorkspaceItem extends React.PureComponent {
@@ -80,13 +81,14 @@ export default class WorkspaceItem extends React.PureComponent {
   toggleOpen = () => this.setState({ open: !this.state.open });
 
   render() {
-    const { children, title, disabled } = this.props;
+    const { children, title, disabled, custom } = this.props;
     const { open } = this.state;
 
     return (
       <div>
         <ItemHeader onClick={this.toggleOpen}>
           <Title>{title}</Title>
+          {open && custom}
           <ExpandIconContainer open={open} />
         </ItemHeader>
         <ChildContainer disabled={disabled} open={open}>