Remove URL based sizes now because of iframe history clash

Author: Ives van Hoorne

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

@@ -1,7 +1,6 @@
 // @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';
@@ -18,12 +17,7 @@ import Tooltip from 'app/components/Tooltip';
 import Action from './Action';
 import UserView from './User';
 import FeedbackView from './FeedbackView';
-import {
-  newSandboxUrl,
-  sandboxUrl,
-  editorSandbox,
-  fullscreenSandbox,
-} from '../../../../../utils/url-generator';
+import { newSandboxUrl } from '../../../../../utils/url-generator';
 
 const Container = styled.div`
   display: flex;
@@ -132,10 +126,24 @@ 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, match } = this.props;
+    const { sandbox, userActions, user } = this.props;
     const canSave = sandbox.modules.some(m => m.isNotSynced);
-
     return (
       <Container>
         <Left>
@@ -156,42 +164,29 @@ export default class Header extends React.PureComponent {
 
         <Tooltips>
           <Tooltip message="Editor view">
-            <Route
-              path={`${match.url}/editor`}
-              children={active => (
-                <Link to={editorSandbox(sandbox)}>
-                  <ViewIcon active={active.match}>
-                    <EditorIcon />
-                  </ViewIcon>
-                </Link>
-              )}
-            />
+            <ViewIcon
+              onClick={this.setEditorView}
+              active={sandbox.showEditor && !sandbox.showPreview}
+            >
+              <EditorIcon />
+            </ViewIcon>
           </Tooltip>
           <Tooltip message="Split view">
-            <Route
-              path={`${match.url}/`}
-              exact
-              children={active => (
-                <Link to={sandboxUrl(sandbox)}>
-                  <ViewIcon active={active.match}>
-                    <EditorIcon half />
-                    <PreviewIcon half />
-                  </ViewIcon>
-                </Link>
-              )}
-            />
+            <ViewIcon
+              onClick={this.setMixedView}
+              active={sandbox.showEditor && sandbox.showPreview}
+            >
+              <EditorIcon half />
+              <PreviewIcon half />
+            </ViewIcon>
           </Tooltip>
           <Tooltip message="Preview view">
-            <Route
-              path={`${match.url}/fullscreen`}
-              children={active => (
-                <Link to={fullscreenSandbox(sandbox)}>
-                  <ViewIcon active={active.match}>
-                    <PreviewIcon />
-                  </ViewIcon>
-                </Link>
-              )}
-            />
+            <ViewIcon
+              onClick={this.setPreviewView}
+              active={!sandbox.showEditor && sandbox.showPreview}
+            >
+              <PreviewIcon />
+            </ViewIcon>
           </Tooltip>
         </Tooltips>
 

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

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { Prompt, Switch, Route, Redirect } from 'react-router-dom';
+import { Prompt } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { preferencesSelector } from 'app/store/preferences/selectors';
@@ -31,7 +31,6 @@ type Props = {
   moduleActions: typeof moduleActionCreators,
   sandboxActions: typeof sandboxActionCreators,
   userActions: typeof userActionCreators,
-  resizing: boolean,
 };
 
 type State = {
@@ -41,7 +40,7 @@ type State = {
 const FullSize = styled.div`
   height: 100%;
   width: 100%;
-  ${props => props.inactive && 'pointer-events: none'};
+  pointer-events: ${props => props.inactive ? 'none' : 'all'};
 `;
 
 const mapStateToProps = state => ({
@@ -101,7 +100,6 @@ class EditorPreview extends React.PureComponent {
       preferences,
       userActions,
       user,
-      match,
     } = this.props;
 
     const { modules, directories } = sandbox;
@@ -131,13 +129,7 @@ class EditorPreview extends React.PureComponent {
     );
 
     const PreviewPane = (
-      <FullSize
-        style={{
-          pointerEvents: this.state.resizing || this.props.resizing
-            ? 'none'
-            : 'all',
-        }}
-      >
+      <FullSize inactive={this.state.resizing}>
         <Preview
           sandboxId={sandbox.id}
           bundle={sandbox.dependencyBundle}
@@ -154,19 +146,18 @@ class EditorPreview extends React.PureComponent {
       </FullSize>
     );
 
-    const editorEnabled = match.isExact ||
-      location.pathname.endsWith('/editor');
-    const previewEnabled = match.isExact ||
-      location.pathname.endsWith('/fullscreen');
-
     return (
       <FullSize>
+        <Prompt
+          when={notSynced}
+          message={() =>
+            'You have not saved this sandbox, are you sure you want to navigate away?'}
+        />
         <Header
           sandbox={sandbox}
           sandboxActions={sandboxActions}
           userActions={userActions}
           user={user}
-          match={match}
         />
         <SplitPane
           onDragStarted={this.startResizing}
@@ -176,23 +167,17 @@ class EditorPreview extends React.PureComponent {
           minSize={360}
           primary="second"
           paneStyle={{ height: '100%' }}
-          pane1Style={{ display: editorEnabled ? 'block' : 'none' }}
+          pane1Style={{ display: sandbox.showEditor ? 'block' : 'none' }}
           pane2Style={{
-            display: previewEnabled ? 'block' : 'none',
-            minWidth: location.pathname.endsWith('/fullscreen')
+            display: sandbox.showPreview ? 'block' : 'none',
+            minWidth: sandbox.showPreview && !sandbox.showEditor
               ? '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>
     );
   }

src/app/store/entities/sandboxes/actions.js

@@ -84,6 +84,7 @@ 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) => ({
@@ -203,6 +204,13 @@ 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,

src/app/store/entities/sandboxes/entity.js

@@ -26,6 +26,8 @@ export type Sandbox = {
     error?: string,
     processing?: boolean,
   },
+  showEditor: ?boolean,
+  showPreview: ?boolean,
   author: User,
   forkedFromSandbox: ?{ title: string, id: string },
 };
@@ -42,6 +44,8 @@ export default new schema.Entity(
     processStrategy: value => ({
       ...value,
       isInProjectView: true,
+      showEditor: true,
+      showPreview: true,
     }),
   }
 );

src/app/store/entities/sandboxes/reducer.js

@@ -12,6 +12,7 @@ import {
   FETCH_BUNDLE_API_ACTIONS,
   SET_SANDBOX_INFO,
   SET_PROJECT_VIEW,
+  SET_VIEW_MODE,
 } from './actions';
 
 import { SET_CURRENT_USER, SIGN_OUT } from '../../user/actions';
@@ -25,6 +26,12 @@ type Action = {
 
 function singleSandboxReducer(sandbox, action: Action) {
   switch (action.type) {
+    case SET_VIEW_MODE:
+      return {
+        ...sandbox,
+        showEditor: action.showEditor,
+        showPreview: action.showPreview,
+      };
     case SET_PROJECT_VIEW:
       return { ...sandbox, isInProjectView: action.isInProjectView };
     case SET_CURRENT_MODULE:
@@ -98,6 +105,7 @@ export default function reducer(state = initialState, action: Action) {
     case SET_BUNDLE:
     case SET_SANDBOX_INFO:
     case SET_PROJECT_VIEW:
+    case SET_VIEW_MODE:
       if (state[action.id]) {
         return {
           ...state,

src/app/utils/url-generator.js

@@ -6,8 +6,6 @@ export const protocolAndHost = () => `${location.protocol}//${host()}`;
 
 export const sandboxUrl = (sandbox: { id: string }) => `/s/${sandbox.id}`;
 export const newSandboxUrl = () => `/s/new`;
-export const fullscreenSandbox = sandbox => `${sandboxUrl(sandbox)}/fullscreen`;
-export const editorSandbox = sandbox => `${sandboxUrl(sandbox)}/editor`;
 
 export const frameUrl = (append: string = '') =>
   `${location.protocol}//sandbox.${host()}/${append}`;