Skip to content

Commit 36c65dc

Browse files
author
Ives van Hoorne
committed
Fix CLI page
1 parent aa26ac5 commit 36c65dc

File tree

7 files changed

+90
-43
lines changed

7 files changed

+90
-43
lines changed

‎packages/app/src/app/pages/CLI/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import { Container } from './elements';
88

99
class CLI extends React.Component {
1010
componentDidMount() {
11-
if (this.props.store.user.jwt) {
11+
this.props.signals.cliMounted();
12+
}
13+
14+
componentDidUpdate(prevProps) {
15+
if (prevProps.store.user == null && this.props.store.user != null) {
1216
this.props.signals.requestAuthorisation();
1317
}
1418
}

‎packages/app/src/app/pages/CliInstructions/index.js‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import { inject } from 'mobx-react';
4+
35
import Navigation from 'app/pages/common/Navigation';
46
import Title from 'app/components/Title';
57
import SubTitle from 'app/components/SubTitle';
@@ -8,29 +10,36 @@ import Margin from 'common/components/spacing/Margin';
810

911
import { Container, Content, Code } from './elements';
1012

11-
function CliInstructions() {
12-
return (
13-
<MaxWidth>
14-
<Margin vertical={1.5} horizontal={1.5}>
15-
<Container>
16-
<Navigation title="CLI Import" />
17-
<Content vertical>
18-
<Title>Import from CLI</Title>
19-
<SubTitle>
20-
1. Install the CLI <Code>npm i -g codesandbox</Code>
21-
</SubTitle>
22-
<SubTitle>
23-
2. Go to your `create-react-app` project{' '}
24-
<Code>cd path-of-your-project</Code>
25-
</SubTitle>
26-
<SubTitle>
27-
3. Deploy your project to CodeSandbox <Code>codesandbox ./</Code>
28-
</SubTitle>
29-
</Content>
30-
</Container>
31-
</Margin>
32-
</MaxWidth>
33-
);
13+
class CliInstructions extends React.PureComponent {
14+
componentDidMount() {
15+
this.props.signals.cliInstructionsMounted();
16+
}
17+
18+
render() {
19+
return (
20+
<MaxWidth>
21+
<Margin vertical={1.5} horizontal={1.5}>
22+
<Container>
23+
<Navigation title="CLI Import" />
24+
<Content vertical>
25+
<Title>Import from CLI</Title>
26+
<SubTitle>
27+
1. Install the CLI <Code>npm i -g codesandbox</Code>
28+
</SubTitle>
29+
<SubTitle>
30+
2. Go to your `create-react-app` project{' '}
31+
<Code>cd path-of-your-project</Code>
32+
</SubTitle>
33+
<SubTitle>
34+
3. Deploy your project to CodeSandbox{' '}
35+
<Code>codesandbox ./</Code>
36+
</SubTitle>
37+
</Content>
38+
</Container>
39+
</Margin>
40+
</MaxWidth>
41+
);
42+
}
3443
}
3544

36-
export default CliInstructions;
45+
export default inject(['signals'])(CliInstructions);

‎packages/app/src/app/pages/GitHub/index.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react';
22

3+
import { inject } from 'mobx-react';
4+
35
import Navigation from 'app/pages/common/Navigation';
46
import Title from 'app/components/Title';
57
import SubTitle from 'app/components/SubTitle';
@@ -24,13 +26,17 @@ import {
2426
const getFullGitHubUrl = url =>
2527
`${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
2628

27-
export default class GitHub extends React.PureComponent {
29+
class GitHub extends React.PureComponent {
2830
state = {
2931
url: '',
3032
transformedUrl: '',
3133
error: null,
3234
};
3335

36+
componentDidMount() {
37+
this.props.signals.githubPageMounted();
38+
}
39+
3440
updateUrl = e => {
3541
const url = e.target.value;
3642

@@ -102,3 +108,5 @@ export default class GitHub extends React.PureComponent {
102108
);
103109
}
104110
}
111+
112+
export default inject(['signals'])(GitHub);

‎packages/app/src/app/pages/NewSandbox/index.js‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { inject } from 'mobx-react';
23

34
import Navigation from 'app/pages/common/Navigation';
45

@@ -8,23 +9,29 @@ import Margin from 'common/components/spacing/Margin';
89
import Title from 'app/components/Title';
910
import NewSandbox from 'app/components/NewSandbox';
1011

11-
function NewSandboxComponent() {
12-
return (
13-
<MaxWidth>
14-
<Margin style={{ height: '100%' }} vertical={1.5} horizontal={1.5}>
15-
<Navigation title="New Sandbox" />
12+
class NewSandboxComponent extends React.PureComponent {
13+
componentDidMount() {
14+
this.props.signals.sandboxPageMounted();
15+
}
1616

17-
<Margin top={9}>
18-
<Centered horizontal vertical>
19-
<Title>New Sandbox</Title>
20-
<Margin top={2}>
21-
<NewSandbox />
22-
</Margin>
23-
</Centered>
17+
render() {
18+
return (
19+
<MaxWidth>
20+
<Margin style={{ height: '100%' }} vertical={1.5} horizontal={1.5}>
21+
<Navigation title="New Sandbox" />
22+
23+
<Margin top={9}>
24+
<Centered horizontal vertical>
25+
<Title>New Sandbox</Title>
26+
<Margin top={2}>
27+
<NewSandbox />
28+
</Margin>
29+
</Centered>
30+
</Margin>
2431
</Margin>
25-
</Margin>
26-
</MaxWidth>
27-
);
32+
</MaxWidth>
33+
);
34+
}
2835
}
2936

30-
export default NewSandboxComponent;
37+
export default inject('signals')(NewSandboxComponent);

‎packages/app/src/app/store/actions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export function signOut({ api }) {
197197
export function getAuthToken({ api, path }) {
198198
return api
199199
.get('/auth/auth-token')
200-
.then(token => path.success({ token }))
200+
.then(({ token }) => path.success({ token }))
201201
.catch(error => path.error({ error }));
202202
}
203203

‎packages/app/src/app/store/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export default Module({
5757
appUnmounted: sequences.unloadApp,
5858
searchMounted: sequences.loadSearch,
5959
termsMounted: sequences.loadTerms,
60+
sandboxPageMounted: sequences.loadSandboxPage,
61+
cliMounted: sequences.loadCLI,
62+
cliInstructionsMounted: sequences.loadCLIInstructions,
63+
githubPageMounted: sequences.loadGitHubPage,
6064
connectionChanged: sequences.setConnection,
6165
modalOpened: sequences.openModal,
6266
modalClosed: sequences.closeModal,

‎packages/app/src/app/store/sequences.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,21 @@ export const loadSearch = factories.withLoadApp([]);
228228

229229
export const loadTerms = factories.withLoadApp([]);
230230

231+
export const loadCLI = [
232+
factories.withLoadApp([]),
233+
when(state`user`),
234+
{
235+
true: [authorize],
236+
false: [],
237+
},
238+
];
239+
240+
export const loadCLIInstructions = factories.withLoadApp([]);
241+
242+
export const loadSandboxPage = factories.withLoadApp([]);
243+
244+
export const loadGitHubPage = factories.withLoadApp([]);
245+
231246
export const loadSandbox = factories.withLoadApp([
232247
set(state`editor.error`, null),
233248
when(state`editor.sandboxes.${props`id`}`),

0 commit comments

Comments
 (0)