Default to project view in embed if module is undefined

Author: Ives van Hoorne

src/embed/App.js

@@ -47,6 +47,7 @@ type State = {
   sandbox: Sandbox,
   showEditor: boolean,
   showPreview: boolean,
+  isInProjectView: boolean,
   currentModule: ?string,
   sidebarOpen: boolean,
 };
@@ -68,6 +69,7 @@ export default class App extends React.PureComponent {
       sandbox: null,
       showEditor: !isPreviewScreen,
       showPreview: !isEditorScreen,
+      isInProjectView: !currentModule,
       currentModule,
       sidebarOpen: false,
     };
@@ -126,6 +128,9 @@ export default class App extends React.PureComponent {
 
   toggleSidebar = () => this.setState({ sidebarOpen: !this.state.sidebarOpen });
 
+  setProjectView = (sandboxId: string, isOpen: boolean) =>
+    this.setState({ isInProjectView: isOpen });
+
   content = () => {
     if (this.state.notFound) {
       return (
@@ -146,7 +151,7 @@ export default class App extends React.PureComponent {
       );
     }
 
-    const { showEditor, showPreview } = this.state;
+    const { showEditor, showPreview, isInProjectView } = this.state;
 
     return (
       <Container>
@@ -162,6 +167,8 @@ export default class App extends React.PureComponent {
         <Content
           showEditor={showEditor}
           showPreview={showPreview}
+          isInProjectView={isInProjectView}
+          setProjectView={this.setProjectView}
           sandbox={this.state.sandbox}
           currentModule={this.state.currentModule}
         />

src/embed/components/Content.js

@@ -29,17 +29,16 @@ type Props = {
   currentModule: string,
   showEditor: boolean,
   showPreview: boolean,
+  isInProjectView: boolean,
 };
 
 type State = {
   bundle: Object,
-  isInProjectView: boolean,
 };
 
 export default class Content extends React.Component {
-  state = {
+  state: State = {
     bundle: { processing: true },
-    isInProjectView: false,
   };
 
   componentDidMount() {
@@ -65,7 +64,13 @@ export default class Content extends React.Component {
   props: Props;
   state: State;
   render() {
-    const { sandbox, showEditor, showPreview, currentModule } = this.props;
+    const {
+      sandbox,
+      showEditor,
+      showPreview,
+      isInProjectView,
+      currentModule,
+    } = this.props;
 
     const preferences = { livePreviewEnabled: true };
     const mainModule =
@@ -96,7 +101,7 @@ export default class Content extends React.Component {
           <Split show={showPreview} only={showPreview && !showEditor}>
             <Preview
               sandboxId={sandbox.id}
-              isInProjectView={this.state.isInProjectView}
+              isInProjectView={isInProjectView}
               modules={sandbox.modules}
               directories={sandbox.directories}
               bundle={this.state.bundle}
@@ -106,7 +111,7 @@ export default class Content extends React.Component {
               addError={() => {}}
               clearErrors={() => {}}
               preferences={preferences}
-              setProjectView={this.setProjectView}
+              setProjectView={this.props.setProjectView}
               noDelay
             />
           </Split>}