Skip to content

Commit c068d80

Browse files
rwieruchrwieruch
authored
Merge pull request #12 from the-road-to-learn-react/walkthrough
Walkthrough
2 parents aced8c0 + 05b1335 commit c068d80

File tree

10 files changed

+4289
-2597
lines changed

10 files changed

+4289
-2597
lines changed

‎README.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44

55
The application you will build when you read the book to [learn React](https://www.robinwieruch.de/the-road-to-learn-react/).
66

7-
* [Chapter 1 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.1)
8-
* [Chapter 2 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.2)
9-
* [Chapter 3 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.3.1)
10-
* [Chapter 4 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.4)
11-
* [Chapter 5 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.5)
12-
* [Chapter 6 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5.6)
13-
14-
You can find the different chapter commits [in the releases](https://github.com/rwieruch/hackernews-client/releases) too.
15-
16-
After reading the book, you can continue to [learn about Redux and MobX in React](https://roadtoreact.com) for state management.
7+
Find all chapter outcomes over [here](https://github.com/the-road-to-learn-react/hackernews-client).
8+
* [Chapter 1 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/dc46f5efde0059d88a12a52886dd77b85997f78d)
9+
* [Chapter 2 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/387b16504cad20ecf196662959087806c59de13f)
10+
* [Chapter 3 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/ffbcb39b125a6cde080bffb74bdb8b4bd105cf75)
11+
* [Chapter 4 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/1ee4c812f685c752a7e333a6b886875317800883)
12+
* [Chapter 5 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/5e7cb9b8db98d1237badb462f40b4048462b21f1)
13+
* [Chapter 6 Outcome](https://github.com/the-road-to-learn-react/hackernews-client/tree/62c8ed57ca2b00b8e35016379d013f9ce7bc5a7c)
14+
15+
After reading the book, you can continue to [learn more about JavaScript](https://roadtoreact.com).

‎package-lock.json

Lines changed: 4189 additions & 2509 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,29 @@
66
"axios": "^0.18.0",
77
"classnames": "^2.2.6",
88
"lodash": "^4.17.11",
9-
"react": "^16.5.2",
10-
"react-dom": "^16.5.2",
11-
"react-scripts": "2.1.0"
9+
"react": "^16.8.4",
10+
"react-dom": "^16.8.4",
11+
"react-scripts": "2.1.8"
1212
},
1313
"scripts": {
1414
"start": "react-scripts start",
1515
"build": "react-scripts build",
16-
"test": "react-scripts test --env=jsdom",
16+
"test": "react-scripts test",
1717
"eject": "react-scripts eject"
1818
},
19-
"devDependencies": {
20-
"enzyme": "^3.6.0",
21-
"enzyme-adapter-react-16": "^1.5.0",
22-
"react-addons-test-utils": "^15.6.2",
23-
"react-test-renderer": "^16.5.2"
19+
"eslintConfig": {
20+
"extends": "react-app"
2421
},
2522
"browserslist": [
2623
">0.2%",
2724
"not dead",
2825
"not ie <= 11",
2926
"not op_mini all"
30-
]
27+
],
28+
"devDependencies": {
29+
"enzyme": "^3.9.0",
30+
"enzyme-adapter-react-16": "^1.10.0",
31+
"react-addons-test-utils": "^15.6.2",
32+
"react-test-renderer": "^16.8.4"
33+
}
3134
}

‎public/index.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
<meta name="theme-color" content="#000000" />
711
<!--
8-
manifest.json provides metadata used when your web app is added to the
9-
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
12+
manifest.json provides metadata used when your web app is installed on a
13+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1014
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1316
<!--
1417
Notice the use of %PUBLIC_URL% in the tags above.
1518
It will be replaced with the URL of the `public` folder during the build.
@@ -22,9 +25,7 @@
2225
<title>React App</title>
2326
</head>
2427
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
28+
<noscript>You need to enable JavaScript to run this app.</noscript>
2829
<div id="root"></div>
2930
<!--
3031
This HTML file is a template.

‎public/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"type": "image/x-icon"
99
}
1010
],
11-
"start_url": "./index.html",
11+
"start_url": ".",
1212
"display": "standalone",
1313
"theme_color": "#000000",
1414
"background_color": "#ffffff"

‎src/App.js

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,18 @@ const PARAM_SEARCH = 'query=';
1313
const PARAM_PAGE = 'page=';
1414
const PARAM_HPP = 'hitsPerPage=';
1515

16+
const largeColumn = {
17+
width: '40%',
18+
};
19+
20+
const midColumn = {
21+
width: '30%',
22+
};
23+
24+
const smallColumn = {
25+
width: '10%',
26+
};
27+
1628
const SORTS = {
1729
NONE: list => list,
1830
TITLE: list => sortBy(list, 'title'),
@@ -43,8 +55,6 @@ const updateSearchTopStoriesState = (hits, page) => (prevState) => {
4355
};
4456

4557
class App extends Component {
46-
_isMounted = false;
47-
4858
constructor(props) {
4959
super(props);
5060

@@ -54,8 +64,6 @@ class App extends Component {
5464
searchTerm: DEFAULT_QUERY,
5565
error: null,
5666
isLoading: false,
57-
sortKey: 'NONE',
58-
isSortReverse: false,
5967
};
6068

6169
this.needsToSearchTopStories = this.needsToSearchTopStories.bind(this);
@@ -80,21 +88,15 @@ class App extends Component {
8088

8189
axios(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}&${PARAM_PAGE}${page}&${PARAM_HPP}${DEFAULT_HPP}`)
8290
.then(result => this.setSearchTopStories(result.data))
83-
.catch(error => this._isMounted && this.setState({ error }));
91+
.catch(error => this.setState({ error }));
8492
}
8593

8694
componentDidMount() {
87-
this._isMounted = true;
88-
8995
const { searchTerm } = this.state;
9096
this.setState({ searchKey: searchTerm });
9197
this.fetchSearchTopStories(searchTerm);
9298
}
9399

94-
componentWillUnmount() {
95-
this._isMounted = false;
96-
}
97-
98100
onSearchChange(event) {
99101
this.setState({ searchTerm: event.target.value });
100102
}
@@ -169,7 +171,8 @@ class App extends Component {
169171
<div className="interactions">
170172
<ButtonWithLoading
171173
isLoading={isLoading}
172-
onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
174+
onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}
175+
>
173176
More
174177
</ButtonWithLoading>
175178
</div>
@@ -208,7 +211,9 @@ class Table extends Component {
208211
}
209212

210213
onSort(sortKey) {
211-
const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
214+
const isSortReverse = this.state.sortKey === sortKey &&
215+
!this.state.isSortReverse;
216+
212217
this.setState({ sortKey, isSortReverse });
213218
}
214219

@@ -273,19 +278,19 @@ class Table extends Component {
273278
</div>
274279
{reverseSortedList.map(item =>
275280
<div key={item.objectID} className="table-row">
276-
<span style={{ width: '40%' }}>
281+
<span style={largeColumn}>
277282
<a href={item.url}>{item.title}</a>
278283
</span>
279-
<span style={{ width: '30%' }}>
284+
<span style={midColumn}>
280285
{item.author}
281286
</span>
282-
<span style={{ width: '10%' }}>
287+
<span style={smallColumn}>
283288
{item.num_comments}
284289
</span>
285-
<span style={{ width: '10%' }}>
290+
<span style={smallColumn}>
286291
{item.points}
287292
</span>
288-
<span style={{ width: '10%' }}>
293+
<span style={smallColumn}>
289294
<Button
290295
onClick={() => onDismiss(item.objectID)}
291296
className="button-inline"
@@ -344,10 +349,10 @@ const withLoading = (Component) => ({ isLoading, ...rest }) =>
344349

345350
const ButtonWithLoading = withLoading(Button);
346351

352+
export default App;
353+
347354
export {
348355
Button,
349356
Search,
350357
Table,
351-
};
352-
353-
export default App;
358+
};

‎src/App.test.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import App, { Search, Button, Table } from './App';
88
Enzyme.configure({ adapter: new Adapter() });
99

1010
describe('App', () => {
11+
1112
it('renders without crashing', () => {
1213
const div = document.createElement('div');
1314
ReactDOM.render(<App />, div);
@@ -18,9 +19,10 @@ describe('App', () => {
1819
const component = renderer.create(
1920
<App />
2021
);
21-
let tree = component.toJSON();
22+
const tree = component.toJSON();
2223
expect(tree).toMatchSnapshot();
2324
});
25+
2426
});
2527

2628
describe('Search', () => {
@@ -35,7 +37,7 @@ describe('Search', () => {
3537
const component = renderer.create(
3638
<Search>Search</Search>
3739
);
38-
let tree = component.toJSON();
40+
const tree = component.toJSON();
3941
expect(tree).toMatchSnapshot();
4042
});
4143

@@ -53,7 +55,7 @@ describe('Button', () => {
5355
const component = renderer.create(
5456
<Button>Give Me More</Button>
5557
);
56-
let tree = component.toJSON();
58+
const tree = component.toJSON();
5759
expect(tree).toMatchSnapshot();
5860
});
5961

@@ -73,23 +75,22 @@ describe('Table', () => {
7375
it('renders without crashing', () => {
7476
const div = document.createElement('div');
7577
ReactDOM.render(<Table { ...props } />, div);
76-
ReactDOM.unmountComponentAtNode(div);
7778
});
7879

79-
it('shows two items in list', () => {
80-
const element = shallow(
80+
test('has a valid snapshot', () => {
81+
const component = renderer.create(
8182
<Table { ...props } />
8283
);
83-
84-
expect(element.find('.table-row').length).toBe(2);
84+
const tree = component.toJSON();
85+
expect(tree).toMatchSnapshot();
8586
});
8687

87-
test('has a valid snapshot', () => {
88-
const component = renderer.create(
88+
it('shows two items in list', () => {
89+
const element = shallow(
8990
<Table { ...props } />
9091
);
91-
let tree = component.toJSON();
92-
expect(tree).toMatchSnapshot();
92+
93+
expect(element.find('.table-row').length).toBe(2);
9394
});
9495

9596
});

‎src/index.css

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
color: #222;
33
background: #f4f4f4;
4-
font: 400 14px CoreSans, Arial,sans-serif;
4+
font: 400 14px CoreSans, Arial, sans-serif;
55
}
66

77
a {
@@ -21,7 +21,6 @@ ul, li {
2121
input {
2222
padding: 10px;
2323
border-radius: 5px;
24-
outline: none;
2524
margin-right: 10px;
2625
border: 1px solid #dddddd;
2726
}
@@ -37,8 +36,4 @@ button {
3736

3837
button:hover {
3938
color: #222;
40-
}
41-
42-
*:focus {
43-
outline: none;
4439
}

‎src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ if (module.hot) {
1212

1313
// If you want your app to work offline and load faster, you can change
1414
// unregister() to register() below. Note this comes with some pitfalls.
15-
// Learn more about service workers: http://bit.ly/CRA-PWA
16-
serviceWorker.unregister();
15+
// Learn more about service workers: https://bit.ly/CRA-PWA
16+
serviceWorker.unregister();

0 commit comments

Comments
 (0)