Store preview and editor in the url

Ives van Hoorne · Ives van Hoorne · commit 9a54e92f1cae · 2017-04-04T20:38:52.000+02:00
diff --git a/src/app/pages/NotFound.js b/src/app/pages/NotFound.js
@@ -37,7 +37,7 @@ export default () => (
     <Title>404</Title>
     <SubTitle>We could not find the page you{"'"}re looking for :(</SubTitle>
     <Buttons>
-      <Button href="/">TO Homepage</Button>
+      <Button href="/">To Homepage</Button>
       <Button to={newSandboxUrl()}>Create Sandbox</Button>
     </Buttons>
   </Container>
diff --git a/src/app/pages/Sandbox/Editor/Content/Header/index.js b/src/app/pages/Sandbox/Editor/Content/Header/index.js
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import { Link, Route } from 'react-router-dom';
 import Save from 'react-icons/lib/md/save';
 import Fork from 'react-icons/lib/go/repo-forked';
 import Download from 'react-icons/lib/go/cloud-download';
@@ -17,7 +18,12 @@ import Tooltip from 'app/components/Tooltip';
 import Action from './Action';
 import UserView from './User';
 import FeedbackView from './FeedbackView';
-import { newSandboxUrl } from '../../../../../utils/url-generator';
+import {
+  newSandboxUrl,
+  sandboxUrl,
+  editorSandbox,
+  fullscreenSandbox,
+} from '../../../../../utils/url-generator';
 
 const Container = styled.div`
   display: flex;
@@ -126,24 +132,10 @@ export default class Header extends React.PureComponent {
     }
   };
 
-  setEditorView = () => {
-    const { sandbox, sandboxActions } = this.props;
-    sandboxActions.setViewMode(sandbox.id, true, false);
-  };
-
-  setMixedView = () => {
-    const { sandbox, sandboxActions } = this.props;
-    sandboxActions.setViewMode(sandbox.id, true, true);
-  };
-
-  setPreviewView = () => {
-    const { sandbox, sandboxActions } = this.props;
-    sandboxActions.setViewMode(sandbox.id, false, true);
-  };
-
   render() {
-    const { sandbox, userActions, user } = this.props;
+    const { sandbox, userActions, user, match } = this.props;
     const canSave = sandbox.modules.some(m => m.isNotSynced);
+
     return (
       <Container>
         <Left>
@@ -164,29 +156,42 @@ export default class Header extends React.PureComponent {
 
         <Tooltips>
           <Tooltip message="Editor view">
-            <ViewIcon
-              onClick={this.setEditorView}
-              active={sandbox.showEditor && !sandbox.showPreview}
-            >
-              <EditorIcon />
-            </ViewIcon>
+            <Route
+              path={`${match.url}/editor`}
+              children={active => (
+                <Link to={editorSandbox(sandbox)}>
+                  <ViewIcon active={active.match}>
+                    <EditorIcon />
+                  </ViewIcon>
+                </Link>
+              )}
+            />
           </Tooltip>
           <Tooltip message="Split view">
-            <ViewIcon
-              onClick={this.setMixedView}
-              active={sandbox.showEditor && sandbox.showPreview}
-            >
-              <EditorIcon half />
-              <PreviewIcon half />
-            </ViewIcon>
+            <Route
+              path={`${match.url}/`}
+              exact
+              children={active => (
+                <Link to={sandboxUrl(sandbox)}>
+                  <ViewIcon active={active.match}>
+                    <EditorIcon half />
+                    <PreviewIcon half />
+                  </ViewIcon>
+                </Link>
+              )}
+            />
           </Tooltip>
           <Tooltip message="Preview view">
-            <ViewIcon
-              onClick={this.setPreviewView}
-              active={!sandbox.showEditor && sandbox.showPreview}
-            >
-              <PreviewIcon />
-            </ViewIcon>
+            <Route
+              path={`${match.url}/fullscreen`}
+              children={active => (
+                <Link to={fullscreenSandbox(sandbox)}>
+                  <ViewIcon active={active.match}>
+                    <PreviewIcon />
+                  </ViewIcon>
+                </Link>
+              )}
+            />
           </Tooltip>
         </Tooltips>
 
diff --git a/src/app/pages/Sandbox/Editor/Content/index.js b/src/app/pages/Sandbox/Editor/Content/index.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { Prompt } from 'react-router-dom';
+import { Prompt, Switch, Route, Redirect } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { preferencesSelector } from 'app/store/preferences/selectors';
@@ -31,6 +31,7 @@ type Props = {
   moduleActions: typeof moduleActionCreators,
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
+  resizing: boolean,
 };
 
 type State = {
@@ -40,7 +41,7 @@ type State = {
 const FullSize = styled.div`
   height: 100%;
   width: 100%;
-  pointer-events: ${props => props.inactive ? 'none' : 'all'};
+  ${props => props.inactive && 'pointer-events: none'};
 `;
 
 const mapStateToProps = state => ({
@@ -100,6 +101,7 @@ class EditorPreview extends React.PureComponent {
       preferences,
       userActions,
       user,
+      match,
     } = this.props;
 
     const { modules, directories } = sandbox;
@@ -129,7 +131,13 @@ class EditorPreview extends React.PureComponent {
     );
 
     const PreviewPane = (
-      <FullSize inactive={this.state.resizing}>
+      <FullSize
+        style={{
+          pointerEvents: this.state.resizing || this.props.resizing
+            ? 'none'
+            : 'all',
+        }}
+      >
         <Preview
           sandboxId={sandbox.id}
           bundle={sandbox.dependencyBundle}
@@ -146,20 +154,10 @@ class EditorPreview extends React.PureComponent {
       </FullSize>
     );
 
-    const Both = (
-      <SplitPane
-        onDragStarted={this.startResizing}
-        onDragFinished={this.stopResizing}
-        split="vertical"
-        defaultSize="50%"
-        minSize={360}
-        primary="second"
-        paneStyle={{ height: '100%' }}
-      >
-        {EditorPane}
-        {PreviewPane}
-      </SplitPane>
-    );
+    const editorEnabled = match.isExact ||
+      location.pathname.endsWith('/editor');
+    const previewEnabled = match.isExact ||
+      location.pathname.endsWith('/fullscreen');
 
     return (
       <FullSize>
@@ -173,10 +171,33 @@ class EditorPreview extends React.PureComponent {
           sandboxActions={sandboxActions}
           userActions={userActions}
           user={user}
+          match={match}
         />
-        {sandbox.showEditor && !sandbox.showPreview && EditorPane}
-        {!sandbox.showEditor && sandbox.showPreview && PreviewPane}
-        {sandbox.showEditor && sandbox.showPreview && Both}
+        <SplitPane
+          onDragStarted={this.startResizing}
+          onDragFinished={this.stopResizing}
+          split="vertical"
+          defaultSize="50%"
+          minSize={360}
+          primary="second"
+          paneStyle={{ height: '100%' }}
+          pane1Style={{ display: editorEnabled ? 'block' : 'none' }}
+          pane2Style={{
+            display: previewEnabled ? 'block' : 'none',
+            minWidth: location.pathname.endsWith('/fullscreen')
+              ? '100%'
+              : 'inherit',
+          }}
+        >
+          {EditorPane}
+          {PreviewPane}
+        </SplitPane>
+        <Switch>
+          <Route path={match.url} exact />
+          <Route path={`${match.url}/fullscreen`} />
+          <Route path={`${match.url}/editor`} />
+          <Redirect to={match.url} />
+        </Switch>
       </FullSize>
     );
   }
diff --git a/src/app/pages/Sandbox/Editor/Content/subviews/Preview/index.js b/src/app/pages/Sandbox/Editor/Content/subviews/Preview/index.js
@@ -20,7 +20,6 @@ import Navigator from './Navigator';
 import Message from './Message';
 
 const Container = styled.div`
-  position: absolute;
   height: 100%;
   width: 100%;
   background-color: white;
@@ -130,9 +129,11 @@ export default class Preview extends React.PureComponent {
   }
 
   sendMessage = (message: Object) => {
-    document
-      .getElementById('sandbox')
-      .contentWindow.postMessage(message, frameUrl());
+    const element = document.getElementById('sandbox');
+
+    if (element) {
+      element.contentWindow.postMessage(message, frameUrl());
+    }
   };
 
   handleMessage = (e: Object) => {
diff --git a/src/app/pages/Sandbox/Editor/index.js b/src/app/pages/Sandbox/Editor/index.js
@@ -9,16 +9,31 @@ import Content from './Content';
 
 type Props = {
   sandbox: Sandbox,
+  match: Object,
 };
 
-export default ({ sandbox }: Props) => (
-  <SplitPane
-    split="vertical"
-    minSize={100}
-    defaultSize={16 * 16}
-    style={{ top: 0 }}
-  >
-    <Workspace sandbox={sandbox} />
-    <Content sandbox={sandbox} />
-  </SplitPane>
-);
+export default class ContentSplit extends React.PureComponent {
+  props: Props;
+  state = { resizing: false };
+
+  startResizing = () => this.setState({ resizing: true });
+  stopResizing = () => this.setState({ resizing: false });
+
+  render() {
+    const { sandbox, match } = this.props;
+    const { resizing } = this.state;
+    return (
+      <SplitPane
+        split="vertical"
+        minSize={100}
+        defaultSize={16 * 16}
+        style={{ top: 0 }}
+        onDragStarted={this.startResizing}
+        onDragFinished={this.stopResizing}
+      >
+        <Workspace sandbox={sandbox} />
+        <Content sandbox={sandbox} resizing={resizing} match={match} />
+      </SplitPane>
+    );
+  }
+}
diff --git a/src/app/pages/Sandbox/index.js b/src/app/pages/Sandbox/index.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
 import { denormalize } from 'normalizr';
 import sandboxEntity from 'app/store/entities/sandboxes/entity';
@@ -10,7 +11,7 @@ import { sandboxesSelector } from 'app/store/entities/sandboxes/selectors';
 import { entitiesSelector } from 'app/store/entities/selectors';
 import sandboxActions from 'app/store/entities/sandboxes/actions';
 import userActionCreators from 'app/store/user/actions';
-import { jwtSelector, userIdSelector } from 'app/store/user/selectors';
+import { jwtSelector } from 'app/store/user/selectors';
 
 import type { Sandbox } from 'app/store/entities/sandboxes/entity';
 import Title from 'app/components/text/Title';
@@ -71,6 +72,7 @@ class SandboxPage extends React.PureComponent {
     const oldId = oldProps.match.params.id;
 
     if (newId != null && oldId !== newId) {
+      this.setState({ notFound: false });
       if (!this.props.sandboxes[newId]) {
         this.fetchSandbox();
       }
@@ -88,12 +90,15 @@ class SandboxPage extends React.PureComponent {
   state = { notFound: false };
 
   render() {
-    const { sandbox } = this.props;
+    const { sandbox, match } = this.props;
     if (this.state.notFound) {
       return (
         <Centered horizontal vertical>
           <Title>
             We could not find the Sandbox you{"'"}re looking for...
+            <br />
+            <br />
+            <Link to="/s/new">Create Sandbox</Link>
           </Title>
         </Centered>
       );
@@ -106,7 +111,7 @@ class SandboxPage extends React.PureComponent {
 
     return (
       <Centered horizontal vertical>
-        <Editor sandbox={sandbox} />
+        <Editor match={match} sandbox={sandbox} />
       </Centered>
     );
   }
diff --git a/src/app/store/entities/sandboxes/actions.js b/src/app/store/entities/sandboxes/actions.js
@@ -84,7 +84,6 @@ export const SET_EXTERNAL_RESOURCES = 'SET_EXTERNAL_RESOURCES';
 export const SET_CURRENT_MODULE = 'SET_CURRENT_MODULE';
 export const SET_BUNDLE = 'SET_BUNDLE';
 export const SET_PROJECT_VIEW = 'SET_PROJECT_VIEW';
-export const SET_VIEW_MODE = 'SET_VIEW_MODE';
 export const CREATE_ZIP = 'CREATE_ZIP';
 
 const addModuleToSandbox = (id, moduleId) => ({
@@ -204,13 +203,6 @@ export default {
     }
   },
 
-  setViewMode: (id: string, showEditor: boolean, showPreview: boolean) => ({
-    type: SET_VIEW_MODE,
-    id,
-    showEditor,
-    showPreview,
-  }),
-
   setProjectView: (id: string, isInProjectView: boolean) => ({
     type: SET_PROJECT_VIEW,
     id,
diff --git a/src/app/store/entities/sandboxes/entity.js b/src/app/store/entities/sandboxes/entity.js
@@ -26,8 +26,6 @@ export type Sandbox = {
     error?: string,
     processing?: boolean,
   },
-  showEditor: ?boolean,
-  showPreview: ?boolean,
   author: User,
   forkedFromSandbox: ?{ title: string, id: string },
 };
@@ -44,8 +42,6 @@ export default new schema.Entity(
     processStrategy: value => ({
       ...value,
       isInProjectView: true,
-      showEditor: true,
-      showPreview: true,
     }),
   }
 );
diff --git a/src/app/store/entities/sandboxes/reducer.js b/src/app/store/entities/sandboxes/reducer.js
diff --git a/src/app/utils/url-generator.js b/src/app/utils/url-generator.js
