Skip to content

Commit 02257ee

Browse files
author
Ives van Hoorne
committed
New packager and error handling
1 parent 1f256e5 commit 02257ee

File tree

24 files changed

+379
-122
lines changed

24 files changed

+379
-122
lines changed

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,13 @@
120120
"lint": "eslint src"
121121
},
122122
"jest": {
123+
"rootDir": "src",
123124
"moduleDirectories": [
124125
"node_modules",
125126
"src"
126-
]
127+
],
128+
"moduleNameMapper": {
129+
"\\.css$": "<rootDir>/__mocks__/styleMock.js"
130+
}
127131
}
128132
}

‎src/__mocks__/styleMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {};

‎src/app/components/buttons/Button.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33
import styled from 'styled-components';
44

5-
const getBackgroundColor = ({ theme, secondary, transparent, disabled }) => {
5+
import theme from 'common/theme';
6+
7+
const getBackgroundColor = ({ secondary, transparent, disabled }) => {
68
if (disabled) return theme.background2.darken(0.1)();
79
if (transparent) return 'rgba(0,0,0,0.0)';
810
if (secondary) return theme.primary.clearer(0.8)();
911
return theme.secondary.clearer(0.4)();
1012
};
1113

12-
const getBorder = ({ transparent, disabled, theme }) => {
14+
const getBorder = ({ transparent, disabled }) => {
1315
if (transparent) return `1px solid ${theme.secondary.clearer(0.5)()}`;
1416
if (disabled) return '1px solid transparent';
1517
return `1px solid ${theme.secondary()};`;
1618
};
1719

18-
const getColor = ({ transparent, disabled, theme }) => {
20+
const getColor = ({ transparent, disabled }) => {
1921
if (disabled) return theme.background2.lighten(1.5)();
2022
if (transparent) return 'rgba(255,255,255,0.8)';
2123
return 'white';
@@ -47,8 +49,8 @@ const styles = props =>
4749
${!props.disabled && `
4850
cursor: pointer;
4951
&:hover {
50-
background-color: ${props.theme.primary.clearer(0.5)()};
51-
border-color: ${props.theme.primary()};
52+
background-color: ${theme.primary.clearer(0.5)()};
53+
border-color: ${theme.primary()};
5254
}
5355
`}
5456
`;

‎src/app/components/sandbox/CodeEditor/index.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,14 @@ const CodeContainer = styled.div`
4141
height: calc(100% - 6rem);
4242
`;
4343

44-
const handleError = (cm, currentError, nextError, nextCode, nextId) => {
44+
const handleError = (cm, currentError, nextError, nextCode, prevId, nextId) => {
4545
if (currentError || nextError) {
46-
if (currentError && nextError && currentError.line === nextError.line) {
46+
if (
47+
currentError &&
48+
nextError &&
49+
currentError.line === nextError.line &&
50+
prevId === nextId
51+
) {
4752
return;
4853
}
4954

@@ -111,8 +116,14 @@ export default class CodeEditor extends React.PureComponent {
111116
} = nextProps;
112117

113118
if (cm) {
114-
this.swapDocuments({ currentId, nextId, nextCode, nextTitle });
115-
handleError(cm, currentError, nextError, nextCode, nextId);
119+
this.swapDocuments({
120+
currentId,
121+
nextId,
122+
nextCode,
123+
nextTitle,
124+
}).then(() => {
125+
handleError(cm, currentError, nextError, nextCode, currentId, nextId);
126+
});
116127
}
117128
}
118129

‎src/app/components/sandbox/Preview/Message.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import type { Module } from 'common/types';
88
import Button from 'app/components/buttons/Button';
99
import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
1010

11+
import theme from 'common/theme';
12+
1113
import Editor from './Editor';
1214

1315
const Container = styled.div`
@@ -16,13 +18,13 @@ const Container = styled.div`
1618
display: flex;
1719
justify-content: center;
1820
padding: 0.5rem;
19-
background-color: ${({ color, theme }) => {
21+
background-color: ${({ color }) => {
2022
if (color === 'error') {
2123
return theme.redBackground;
2224
}
2325
return theme.primary;
2426
}}
25-
color: ${props => props.theme.red};
27+
color: ${() => theme.red};
2628
height: 100%;
2729
width: 100%;
2830
padding: 1rem;
@@ -42,7 +44,12 @@ const Icon = styled.div`
4244

4345
type Props = {
4446
sandboxId: string,
45-
error: ?{ type: string, title: string, message: string },
47+
error: ?{
48+
severity: 'error' | 'warning',
49+
type: string,
50+
title: string,
51+
message: string,
52+
},
4653
message: ?string,
4754
sandboxActions: typeof sandboxActionCreators,
4855
modules: Array<Module>,
@@ -78,8 +85,14 @@ class Message extends React.PureComponent {
7885
if (error.type === 'dependency-not-found') {
7986
return (
8087
<div>
81-
Could not find the dependency
82-
<b> {"'"}{error.payload.dependency}{"'"}</b>.
88+
Could not find
89+
<b> {"'"}{error.payload.path}{"'"}</b>.
90+
<div>
91+
Did you add the dependency
92+
{' '}
93+
<b>{"'"}{error.payload.dependency}{"'"}</b>
94+
?
95+
</div>
8396
<div style={{ marginTop: '1rem' }}>
8497
<Button
8598
onClick={this.addDependency(error.payload.dependency)}

‎src/app/components/sandbox/Preview/Message.test.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import Message from './Message';
4+
5+
describe('Message', () => {
6+
test('it renders a dependency not found error', () => {
7+
const tree = renderer
8+
.create(
9+
<Message
10+
sandboxId="foeijf"
11+
error={{
12+
type: 'dependency-not-found',
13+
title: 'Dependency Not Found',
14+
message: 'Dependendnen',
15+
severity: 'error',
16+
moduleId: 'asfa',
17+
payload: {
18+
path: 'react-icons/fa/beer',
19+
dependency: 'react-icons',
20+
},
21+
}}
22+
modules={[
23+
{
24+
id: 'asfa',
25+
code: 'daowidj',
26+
},
27+
]}
28+
/>,
29+
)
30+
.toJSON();
31+
expect(tree).toMatchSnapshot();
32+
});
33+
34+
test('it renders a warning', () => {
35+
const tree = renderer
36+
.create(
37+
<Message
38+
sandboxId="foeijf"
39+
error={{
40+
severity: 'warning',
41+
title: 'Loading dependencies',
42+
}}
43+
modules={[
44+
{
45+
id: 'asfa',
46+
code: 'daowidj',
47+
},
48+
]}
49+
/>,
50+
)
51+
.toJSON();
52+
expect(tree).toMatchSnapshot();
53+
});
54+
});

‎src/app/components/sandbox/Preview/__snapshots__/Message.test.js.snap‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Message it renders a dependency not found error 1`] = `
4+
<div
5+
className="RUzQh"
6+
color="error"
7+
>
8+
<div
9+
className="bFGMEr"
10+
>
11+
<div
12+
className="QIZdv"
13+
>
14+
<svg
15+
fill="currentColor"
16+
height="1em"
17+
preserveAspectRatio="xMidYMid meet"
18+
style={
19+
Object {
20+
"color": undefined,
21+
"verticalAlign": "middle",
22+
}
23+
}
24+
viewBox="0 0 40 40"
25+
width="1em"
26+
>
27+
<g>
28+
<path
29+
d="m21.6 21.6v-10h-3.2v10h3.2z m0 6.8v-3.4h-3.2v3.4h3.2z m-1.6-25c9.2 0 16.6 7.4 16.6 16.6s-7.4 16.6-16.6 16.6-16.6-7.4-16.6-16.6 7.4-16.6 16.6-16.6z"
30+
/>
31+
</g>
32+
</svg>
33+
</div>
34+
<div>
35+
Could not find
36+
<b>
37+
38+
'
39+
react-icons/fa/beer
40+
'
41+
</b>
42+
.
43+
<div>
44+
Did you add the dependency
45+
46+
<b>
47+
'
48+
react-icons
49+
'
50+
</b>
51+
?
52+
</div>
53+
<div
54+
style={
55+
Object {
56+
"marginTop": "1rem",
57+
}
58+
}
59+
>
60+
<button
61+
className="eDPTas"
62+
onClick={[Function]}
63+
>
64+
ADD DEPENDENCY TO PROJECT
65+
</button>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
`;
71+
72+
exports[`Message it renders a warning 1`] = `
73+
<div
74+
className="bWsCpD"
75+
color={false}
76+
>
77+
<div
78+
className="bFGMEr"
79+
>
80+
<div
81+
className="QIZdv"
82+
>
83+
<svg
84+
fill="currentColor"
85+
height="1em"
86+
preserveAspectRatio="xMidYMid meet"
87+
style={
88+
Object {
89+
"color": undefined,
90+
"verticalAlign": "middle",
91+
}
92+
}
93+
viewBox="0 0 40 40"
94+
width="1em"
95+
>
96+
<g>
97+
<path
98+
d="m21.6 23.4v-6.8h-3.2v6.8h3.2z m0 6.6v-3.4h-3.2v3.4h3.2z m-20 5l18.4-31.6 18.4 31.6h-36.8z"
99+
/>
100+
</g>
101+
</svg>
102+
</div>
103+
<div>
104+
<div>
105+
Error in
106+
<b />
107+
:
108+
</div>
109+
<div
110+
style={
111+
Object {
112+
"marginTop": "1rem",
113+
}
114+
}
115+
>
116+
Loading dependencies
117+
:
118+
</div>
119+
<div
120+
style={
121+
Object {
122+
"marginTop": "1rem",
123+
}
124+
}
125+
>
126+
<button
127+
className="eDPTas"
128+
onClick={[Function]}
129+
>
130+
OPEN MODULE
131+
</button>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
`;

0 commit comments

Comments
 (0)