Skip to content

Commit 2aee7d5

Browse files
ArmourArmour
committed
Feature(lazy+suspense): use react lazy + suspense instead of react-loadable
1 parent 2c06c58 commit 2aee7d5

File tree

43 files changed

+293
-525
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+293
-525
lines changed

‎README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
* [x] [react-redux 6](https://github.com/reactjs/react-redux) - the official react bindings for [redux 4](https://github.com/reactjs/redux) (a predictable state container for js apps)
4040
* [x] [react-saga](https://github.com/redux-saga/redux-saga/) - make redux asynchronous flows easy to read, write and test, the replacement for [redux-thunk](https://github.com/reduxjs/redux-thunk)
4141
* [x] [connected-react-router 6](https://github.com/supasate/connected-react-router) - a redux binding for react-router 4, the replacement for [react-router-redux v5](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
42-
* [x] [react-loadable](https://github.com/jamiebuilds/react-loadable) - better user experience for dynamic loading components
4342
* [x] [react-i18next](https://github.com/i18next/react-i18next) - internationalization for react done right
4443
* [x] [immutable.js](https://github.com/facebook/immutable-js/) - persistent Immutable data structures for react redux state management
4544
* [x] [editorconfig](http://editorconfig.org/) - maintain consistent coding styles between different editors and IDEs

‎frontend/src/components/ContentLoader/__tests__/__snapshots__/contentLoader.spec.tsx.snap

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`BodyContentLoader should renders correctly 1`] = `
4+
<div
5+
className="bodyContentLoader"
6+
>
7+
<ContentLoader
8+
height={200}
9+
primaryColor="#f3f3f3"
10+
secondaryColor="#d7d6d8"
11+
speed={1}
12+
width={400}
13+
>
14+
<rect
15+
height="15.1"
16+
rx="4"
17+
ry="4"
18+
width="76.63"
19+
x="160.5"
20+
y="11"
21+
/>
22+
<rect
23+
height="151.36"
24+
rx="1"
25+
ry="1"
26+
width="275.4"
27+
x="60.5"
28+
y="35.05"
29+
/>
30+
</ContentLoader>
31+
</div>
32+
`;
33+
34+
exports[`FooterContentLoader should renders correctly 1`] = `
35+
<ContentLoader
36+
height={400}
37+
primaryColor="#f3f3f3"
38+
secondaryColor="#d7d6d8"
39+
speed={1}
40+
width={2500}
41+
>
42+
<rect
43+
height="400"
44+
width="2500"
45+
x="0"
46+
y="0"
47+
/>
48+
</ContentLoader>
49+
`;
50+
51+
exports[`HeaderContentLoader should renders correctly 1`] = `
52+
<ContentLoader
53+
height={95}
54+
primaryColor="#f3f3f3"
55+
secondaryColor="#d7d6d8"
56+
speed={1}
57+
width={2500}
58+
>
59+
<rect
60+
height="95"
61+
width="2500"
62+
x="0"
63+
y="0"
64+
/>
65+
</ContentLoader>
66+
`;

‎frontend/src/components/ContentLoader/__tests__/contentLoader.spec.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import ShallowRenderer from 'react-test-renderer/shallow';
3+
4+
import { BodyContentLoader, FooterContentLoader, HeaderContentLoader } from '../contentLoader';
5+
6+
describe('HeaderContentLoader', () => {
7+
it('should renders correctly', () => {
8+
const renderer = ShallowRenderer.createRenderer();
9+
const result = renderer.render(
10+
<HeaderContentLoader />,
11+
);
12+
expect(result).toMatchSnapshot();
13+
renderer.unmount();
14+
});
15+
});
16+
17+
describe('BodyContentLoader', () => {
18+
it('should renders correctly', () => {
19+
const renderer = ShallowRenderer.createRenderer();
20+
const result = renderer.render(
21+
<BodyContentLoader />,
22+
);
23+
expect(result).toMatchSnapshot();
24+
renderer.unmount();
25+
});
26+
});
27+
28+
describe('FooterContentLoader', () => {
29+
it('should renders correctly', () => {
30+
const renderer = ShallowRenderer.createRenderer();
31+
const result = renderer.render(
32+
<FooterContentLoader />,
33+
);
34+
expect(result).toMatchSnapshot();
35+
renderer.unmount();
36+
});
37+
});

‎frontend/src/components/ContentLoader/contentLoader.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.bodyContentLoader {
2+
margin: auto;
3+
}

‎frontend/src/components/ContentLoader/contentLoader.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import ContentLoader from 'react-content-loader';
3+
4+
const styles = require('./contentLoader.scss');
5+
6+
export const BodyContentLoader = () => (
7+
<div className={styles.bodyContentLoader}>
8+
<ContentLoader
9+
height={200}
10+
width={400}
11+
speed={1}
12+
primaryColor='#f3f3f3'
13+
secondaryColor='#d7d6d8'
14+
>
15+
<rect x='160.5' y='11' rx='4' ry='4' width='76.63' height='15.1' />
16+
<rect x='60.5' y='35.05' rx='1' ry='1' width='275.4' height='151.36' />
17+
</ContentLoader>
18+
</div>
19+
);
20+
21+
export const HeaderContentLoader = () => (
22+
<ContentLoader
23+
height={95}
24+
width={2500}
25+
speed={1}
26+
primaryColor='#f3f3f3'
27+
secondaryColor='#d7d6d8'
28+
>
29+
<rect x='0' y='0' width='2500' height='95' />
30+
</ContentLoader>
31+
);
32+
33+
export const FooterContentLoader = () => (
34+
<ContentLoader
35+
height={400}
36+
width={2500}
37+
speed={1}
38+
primaryColor='#f3f3f3'
39+
secondaryColor='#d7d6d8'
40+
>
41+
<rect x='0' y='0' width='2500' height='400' />
42+
</ContentLoader>
43+
);

‎frontend/src/components/ContentLoader/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { BodyContentLoader, HeaderContentLoader, FooterContentLoader } from './contentLoader';

‎frontend/src/components/Dropdown/__tests__/__snapshots__/dropdown.spec.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Dropdown should renders correctly 1`] = `
4-
<div>
4+
Array [
55
<ul
66
className="dropdown-content"
77
id="id"
@@ -14,7 +14,7 @@ exports[`Dropdown should renders correctly 1`] = `
1414
dropdown.dropdown
1515
</a>
1616
</li>
17-
</ul>
18-
,
19-
</div>
17+
</ul>,
18+
",",
19+
]
2020
`;

‎frontend/src/components/Dropdown/__tests__/dropdown.spec.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import 'materialize-css';
2-
import React from 'react';
3-
import { MemoryRouter } from 'react-router';
2+
import React, { Fragment } from 'react';
3+
import { BrowserRouter } from 'react-router-dom';
44
import TestRenderer from 'react-test-renderer';
55

66
import { Dropdown } from '../dropdown';
77

88
describe('Dropdown', () => {
99
it('should renders correctly', () => {
1010
const renderer = TestRenderer.create(
11-
<MemoryRouter>
12-
<div>
11+
<BrowserRouter>
12+
<Fragment>
1313
<Dropdown id='id' dropdownLists={['dropdown']} />,
14-
</div>
15-
</MemoryRouter>,
14+
</Fragment>
15+
</BrowserRouter>,
1616
);
1717
expect(renderer).toMatchSnapshot();
1818
renderer.unmount();

‎frontend/src/components/Header/__tests__/__snapshots__/header.spec.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Header should renders correctly 1`] = `
4-
<div>
4+
Array [
55
<div>
66
<nav>
77
<div
@@ -137,7 +137,7 @@ exports[`Header should renders correctly 1`] = `
137137
id="header-dropdown-mobile"
138138
/>
139139
</ul>
140-
</div>
141-
,
142-
</div>
140+
</div>,
141+
",",
142+
]
143143
`;

‎frontend/src/components/Header/__tests__/header.spec.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import 'materialize-css';
2-
import React from 'react';
3-
import { MemoryRouter } from 'react-router';
2+
import React, { Fragment } from 'react';
3+
import { BrowserRouter } from 'react-router-dom';
44
import TestRenderer from 'react-test-renderer';
55

66
import { Header } from '../header';
@@ -10,11 +10,11 @@ jest.mock('components/Dropdown', () => 'Dropdown');
1010
describe('Header', () => {
1111
it('should renders correctly', () => {
1212
const renderer = TestRenderer.create(
13-
<MemoryRouter>
14-
<div>
13+
<BrowserRouter>
14+
<Fragment>
1515
<Header pathname='/parallax' />,
16-
</div>
17-
</MemoryRouter>,
16+
</Fragment>
17+
</BrowserRouter>,
1818
);
1919
expect(renderer).toMatchSnapshot();
2020
renderer.unmount();

0 commit comments

Comments
 (0)