Skip to content

Commit 9a54e92

Browse files
author
Ives van Hoorne
committed
Store preview and editor in the url
1 parent 5718bf2 commit 9a54e92

File tree

10 files changed

+124
-95
lines changed

10 files changed

+124
-95
lines changed

‎src/app/pages/NotFound.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default () => (
3737
<Title>404</Title>
3838
<SubTitle>We could not find the page you{"'"}re looking for :(</SubTitle>
3939
<Buttons>
40-
<Button href="/">TO Homepage</Button>
40+
<Button href="/">To Homepage</Button>
4141
<Button to={newSandboxUrl()}>Create Sandbox</Button>
4242
</Buttons>
4343
</Container>

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

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import React from 'react';
33
import styled from 'styled-components';
4+
import { Link, Route } from 'react-router-dom';
45
import Save from 'react-icons/lib/md/save';
56
import Fork from 'react-icons/lib/go/repo-forked';
67
import Download from 'react-icons/lib/go/cloud-download';
@@ -17,7 +18,12 @@ import Tooltip from 'app/components/Tooltip';
1718
import Action from './Action';
1819
import UserView from './User';
1920
import FeedbackView from './FeedbackView';
20-
import { newSandboxUrl } from '../../../../../utils/url-generator';
21+
import {
22+
newSandboxUrl,
23+
sandboxUrl,
24+
editorSandbox,
25+
fullscreenSandbox,
26+
} from '../../../../../utils/url-generator';
2127

2228
const Container = styled.div`
2329
display: flex;
@@ -126,24 +132,10 @@ export default class Header extends React.PureComponent {
126132
}
127133
};
128134

129-
setEditorView = () => {
130-
const { sandbox, sandboxActions } = this.props;
131-
sandboxActions.setViewMode(sandbox.id, true, false);
132-
};
133-
134-
setMixedView = () => {
135-
const { sandbox, sandboxActions } = this.props;
136-
sandboxActions.setViewMode(sandbox.id, true, true);
137-
};
138-
139-
setPreviewView = () => {
140-
const { sandbox, sandboxActions } = this.props;
141-
sandboxActions.setViewMode(sandbox.id, false, true);
142-
};
143-
144135
render() {
145-
const { sandbox, userActions, user } = this.props;
136+
const { sandbox, userActions, user, match } = this.props;
146137
const canSave = sandbox.modules.some(m => m.isNotSynced);
138+
147139
return (
148140
<Container>
149141
<Left>
@@ -164,29 +156,42 @@ export default class Header extends React.PureComponent {
164156

165157
<Tooltips>
166158
<Tooltip message="Editor view">
167-
<ViewIcon
168-
onClick={this.setEditorView}
169-
active={sandbox.showEditor && !sandbox.showPreview}
170-
>
171-
<EditorIcon />
172-
</ViewIcon>
159+
<Route
160+
path={`${match.url}/editor`}
161+
children={active => (
162+
<Link to={editorSandbox(sandbox)}>
163+
<ViewIcon active={active.match}>
164+
<EditorIcon />
165+
</ViewIcon>
166+
</Link>
167+
)}
168+
/>
173169
</Tooltip>
174170
<Tooltip message="Split view">
175-
<ViewIcon
176-
onClick={this.setMixedView}
177-
active={sandbox.showEditor && sandbox.showPreview}
178-
>
179-
<EditorIcon half />
180-
<PreviewIcon half />
181-
</ViewIcon>
171+
<Route
172+
path={`${match.url}/`}
173+
exact
174+
children={active => (
175+
<Link to={sandboxUrl(sandbox)}>
176+
<ViewIcon active={active.match}>
177+
<EditorIcon half />
178+
<PreviewIcon half />
179+
</ViewIcon>
180+
</Link>
181+
)}
182+
/>
182183
</Tooltip>
183184
<Tooltip message="Preview view">
184-
<ViewIcon
185-
onClick={this.setPreviewView}
186-
active={!sandbox.showEditor && sandbox.showPreview}
187-
>
188-
<PreviewIcon />
189-
</ViewIcon>
185+
<Route
186+
path={`${match.url}/fullscreen`}
187+
children={active => (
188+
<Link to={fullscreenSandbox(sandbox)}>
189+
<ViewIcon active={active.match}>
190+
<PreviewIcon />
191+
</ViewIcon>
192+
</Link>
193+
)}
194+
/>
190195
</Tooltip>
191196
</Tooltips>
192197

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

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @flow
22
import React from 'react';
33
import styled from 'styled-components';
4-
import { Prompt } from 'react-router-dom';
4+
import { Prompt, Switch, Route, Redirect } from 'react-router-dom';
55
import { bindActionCreators } from 'redux';
66
import { connect } from 'react-redux';
77
import { preferencesSelector } from 'app/store/preferences/selectors';
@@ -31,6 +31,7 @@ type Props = {
3131
moduleActions: typeof moduleActionCreators,
3232
sandboxActions: typeof sandboxActionCreators,
3333
userActions: typeof userActionCreators,
34+
resizing: boolean,
3435
};
3536

3637
type State = {
@@ -40,7 +41,7 @@ type State = {
4041
const FullSize = styled.div`
4142
height: 100%;
4243
width: 100%;
43-
pointer-events: ${props => props.inactive ? 'none' : 'all'};
44+
${props => props.inactive && 'pointer-events: none'};
4445
`;
4546

4647
const mapStateToProps = state => ({
@@ -100,6 +101,7 @@ class EditorPreview extends React.PureComponent {
100101
preferences,
101102
userActions,
102103
user,
104+
match,
103105
} = this.props;
104106

105107
const { modules, directories } = sandbox;
@@ -129,7 +131,13 @@ class EditorPreview extends React.PureComponent {
129131
);
130132

131133
const PreviewPane = (
132-
<FullSize inactive={this.state.resizing}>
134+
<FullSize
135+
style={{
136+
pointerEvents: this.state.resizing || this.props.resizing
137+
? 'none'
138+
: 'all',
139+
}}
140+
>
133141
<Preview
134142
sandboxId={sandbox.id}
135143
bundle={sandbox.dependencyBundle}
@@ -146,20 +154,10 @@ class EditorPreview extends React.PureComponent {
146154
</FullSize>
147155
);
148156

149-
const Both = (
150-
<SplitPane
151-
onDragStarted={this.startResizing}
152-
onDragFinished={this.stopResizing}
153-
split="vertical"
154-
defaultSize="50%"
155-
minSize={360}
156-
primary="second"
157-
paneStyle={{ height: '100%' }}
158-
>
159-
{EditorPane}
160-
{PreviewPane}
161-
</SplitPane>
162-
);
157+
const editorEnabled = match.isExact ||
158+
location.pathname.endsWith('/editor');
159+
const previewEnabled = match.isExact ||
160+
location.pathname.endsWith('/fullscreen');
163161

164162
return (
165163
<FullSize>
@@ -173,10 +171,33 @@ class EditorPreview extends React.PureComponent {
173171
sandboxActions={sandboxActions}
174172
userActions={userActions}
175173
user={user}
174+
match={match}
176175
/>
177-
{sandbox.showEditor && !sandbox.showPreview && EditorPane}
178-
{!sandbox.showEditor && sandbox.showPreview && PreviewPane}
179-
{sandbox.showEditor && sandbox.showPreview && Both}
176+
<SplitPane
177+
onDragStarted={this.startResizing}
178+
onDragFinished={this.stopResizing}
179+
split="vertical"
180+
defaultSize="50%"
181+
minSize={360}
182+
primary="second"
183+
paneStyle={{ height: '100%' }}
184+
pane1Style={{ display: editorEnabled ? 'block' : 'none' }}
185+
pane2Style={{
186+
display: previewEnabled ? 'block' : 'none',
187+
minWidth: location.pathname.endsWith('/fullscreen')
188+
? '100%'
189+
: 'inherit',
190+
}}
191+
>
192+
{EditorPane}
193+
{PreviewPane}
194+
</SplitPane>
195+
<Switch>
196+
<Route path={match.url} exact />
197+
<Route path={`${match.url}/fullscreen`} />
198+
<Route path={`${match.url}/editor`} />
199+
<Redirect to={match.url} />
200+
</Switch>
180201
</FullSize>
181202
);
182203
}

‎src/app/pages/Sandbox/Editor/Content/subviews/Preview/index.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import Navigator from './Navigator';
2020
import Message from './Message';
2121

2222
const Container = styled.div`
23-
position: absolute;
2423
height: 100%;
2524
width: 100%;
2625
background-color: white;
@@ -130,9 +129,11 @@ export default class Preview extends React.PureComponent {
130129
}
131130

132131
sendMessage = (message: Object) => {
133-
document
134-
.getElementById('sandbox')
135-
.contentWindow.postMessage(message, frameUrl());
132+
const element = document.getElementById('sandbox');
133+
134+
if (element) {
135+
element.contentWindow.postMessage(message, frameUrl());
136+
}
136137
};
137138

138139
handleMessage = (e: Object) => {

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

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,31 @@ import Content from './Content';
99

1010
type Props = {
1111
sandbox: Sandbox,
12+
match: Object,
1213
};
1314

14-
export default ({ sandbox }: Props) => (
15-
<SplitPane
16-
split="vertical"
17-
minSize={100}
18-
defaultSize={16 * 16}
19-
style={{ top: 0 }}
20-
>
21-
<Workspace sandbox={sandbox} />
22-
<Content sandbox={sandbox} />
23-
</SplitPane>
24-
);
15+
export default class ContentSplit extends React.PureComponent {
16+
props: Props;
17+
state = { resizing: false };
18+
19+
startResizing = () => this.setState({ resizing: true });
20+
stopResizing = () => this.setState({ resizing: false });
21+
22+
render() {
23+
const { sandbox, match } = this.props;
24+
const { resizing } = this.state;
25+
return (
26+
<SplitPane
27+
split="vertical"
28+
minSize={100}
29+
defaultSize={16 * 16}
30+
style={{ top: 0 }}
31+
onDragStarted={this.startResizing}
32+
onDragFinished={this.stopResizing}
33+
>
34+
<Workspace sandbox={sandbox} />
35+
<Content sandbox={sandbox} resizing={resizing} match={match} />
36+
</SplitPane>
37+
);
38+
}
39+
}

‎src/app/pages/Sandbox/index.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33
import { bindActionCreators } from 'redux';
44
import { connect } from 'react-redux';
5+
import { Link } from 'react-router-dom';
56
import { createSelector } from 'reselect';
67
import { denormalize } from 'normalizr';
78
import sandboxEntity from 'app/store/entities/sandboxes/entity';
@@ -10,7 +11,7 @@ import { sandboxesSelector } from 'app/store/entities/sandboxes/selectors';
1011
import { entitiesSelector } from 'app/store/entities/selectors';
1112
import sandboxActions from 'app/store/entities/sandboxes/actions';
1213
import userActionCreators from 'app/store/user/actions';
13-
import { jwtSelector, userIdSelector } from 'app/store/user/selectors';
14+
import { jwtSelector } from 'app/store/user/selectors';
1415

1516
import type { Sandbox } from 'app/store/entities/sandboxes/entity';
1617
import Title from 'app/components/text/Title';
@@ -71,6 +72,7 @@ class SandboxPage extends React.PureComponent {
7172
const oldId = oldProps.match.params.id;
7273

7374
if (newId != null && oldId !== newId) {
75+
this.setState({ notFound: false });
7476
if (!this.props.sandboxes[newId]) {
7577
this.fetchSandbox();
7678
}
@@ -88,12 +90,15 @@ class SandboxPage extends React.PureComponent {
8890
state = { notFound: false };
8991

9092
render() {
91-
const { sandbox } = this.props;
93+
const { sandbox, match } = this.props;
9294
if (this.state.notFound) {
9395
return (
9496
<Centered horizontal vertical>
9597
<Title>
9698
We could not find the Sandbox you{"'"}re looking for...
99+
<br />
100+
<br />
101+
<Link to="/s/new">Create Sandbox</Link>
97102
</Title>
98103
</Centered>
99104
);
@@ -106,7 +111,7 @@ class SandboxPage extends React.PureComponent {
106111

107112
return (
108113
<Centered horizontal vertical>
109-
<Editor sandbox={sandbox} />
114+
<Editor match={match} sandbox={sandbox} />
110115
</Centered>
111116
);
112117
}

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ export const SET_EXTERNAL_RESOURCES = 'SET_EXTERNAL_RESOURCES';
8484
export const SET_CURRENT_MODULE = 'SET_CURRENT_MODULE';
8585
export const SET_BUNDLE = 'SET_BUNDLE';
8686
export const SET_PROJECT_VIEW = 'SET_PROJECT_VIEW';
87-
export const SET_VIEW_MODE = 'SET_VIEW_MODE';
8887
export const CREATE_ZIP = 'CREATE_ZIP';
8988

9089
const addModuleToSandbox = (id, moduleId) => ({
@@ -204,13 +203,6 @@ export default {
204203
}
205204
},
206205

207-
setViewMode: (id: string, showEditor: boolean, showPreview: boolean) => ({
208-
type: SET_VIEW_MODE,
209-
id,
210-
showEditor,
211-
showPreview,
212-
}),
213-
214206
setProjectView: (id: string, isInProjectView: boolean) => ({
215207
type: SET_PROJECT_VIEW,
216208
id,

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ export type Sandbox = {
2626
error?: string,
2727
processing?: boolean,
2828
},
29-
showEditor: ?boolean,
30-
showPreview: ?boolean,
3129
author: User,
3230
forkedFromSandbox: ?{ title: string, id: string },
3331
};
@@ -44,8 +42,6 @@ export default new schema.Entity(
4442
processStrategy: value => ({
4543
...value,
4644
isInProjectView: true,
47-
showEditor: true,
48-
showPreview: true,
4945
}),
5046
}
5147
);

0 commit comments

Comments
 (0)