Skip to content

Commit 1f4e554

Browse files
rwieruchrwieruch
committed
chapter 6
1 parent 82497f2 commit 1f4e554

File tree

1 file changed

+116
-102
lines changed

1 file changed

+116
-102
lines changed

‎src/App.js‎

Lines changed: 116 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,27 @@ const SORTS = {
2121
POINTS: list => sortBy(list, 'points').reverse(),
2222
};
2323

24+
const updateSearchTopstoriesState = (hits, page) => (prevState) => {
25+
const { searchKey, results } = prevState;
26+
27+
const oldHits = results && results[searchKey]
28+
? results[searchKey].hits
29+
: [];
30+
31+
const updatedHits = [
32+
...oldHits,
33+
...hits
34+
];
35+
36+
return {
37+
results: {
38+
...results,
39+
[searchKey]: { hits: updatedHits, page }
40+
},
41+
isLoading: false
42+
};
43+
};
44+
2445
class App extends Component {
2546
constructor(props) {
2647
super(props);
@@ -30,22 +51,14 @@ class App extends Component {
3051
searchKey: '',
3152
searchTerm: DEFAULT_QUERY,
3253
isLoading: false,
33-
sortKey: 'NONE',
34-
isSortReverse: false,
3554
};
3655

37-
this.needsToSearchTopstories = this.needsToSearchTopstories.bind(this);
3856
this.setSearchTopstories = this.setSearchTopstories.bind(this);
3957
this.fetchSearchTopstories = this.fetchSearchTopstories.bind(this);
4058
this.onSearchChange = this.onSearchChange.bind(this);
4159
this.onSearchSubmit = this.onSearchSubmit.bind(this);
4260
this.onDismiss = this.onDismiss.bind(this);
43-
this.onSort = this.onSort.bind(this);
44-
}
45-
46-
onSort(sortKey) {
47-
const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
48-
this.setState({ sortKey, isSortReverse });
61+
this.needsToSearchTopstories = this.needsToSearchTopstories.bind(this);
4962
}
5063

5164
needsToSearchTopstories(searchTerm) {
@@ -54,24 +67,7 @@ class App extends Component {
5467

5568
setSearchTopstories(result) {
5669
const { hits, page } = result;
57-
const { searchKey, results } = this.state;
58-
59-
const oldHits = results && results[searchKey]
60-
? results[searchKey].hits
61-
: [];
62-
63-
const updatedHits = [
64-
...oldHits,
65-
...hits
66-
];
67-
68-
this.setState({
69-
results: {
70-
...results,
71-
[searchKey]: { hits: updatedHits, page }
72-
},
73-
isLoading: false
74-
});
70+
this.setState(updateSearchTopstoriesState(hits, page));
7571
}
7672

7773
fetchSearchTopstories(searchTerm, page) {
@@ -123,9 +119,7 @@ class App extends Component {
123119
searchTerm,
124120
results,
125121
searchKey,
126-
isLoading,
127-
sortKey,
128-
isSortReverse
122+
isLoading
129123
} = this.state;
130124

131125
const page = (
@@ -153,9 +147,6 @@ class App extends Component {
153147
</div>
154148
<Table
155149
list={list}
156-
sortKey={sortKey}
157-
isSortReverse={isSortReverse}
158-
onSort={this.onSort}
159150
onDismiss={this.onDismiss}
160151
/>
161152
<div className="interactions">
@@ -187,87 +178,110 @@ const Search = ({
187178
</button>
188179
</form>
189180

190-
const Table = ({
191-
list,
192-
sortKey,
193-
isSortReverse,
194-
onSort,
195-
onDismiss
196-
}) => {
197-
const sortedList = SORTS[sortKey](list);
198-
const reverseSortedList = isSortReverse
199-
? sortedList.reverse()
200-
: sortedList;
181+
class Table extends Component {
201182

202-
return (
203-
<div className="table">
204-
<div className="table-header">
205-
<span style={{ width: '40%' }}>
206-
<Sort
207-
sortKey={'TITLE'}
208-
onSort={onSort}
209-
activeSortKey={sortKey}
210-
>
211-
Title
212-
</Sort>
213-
</span>
214-
<span style={{ width: '30%' }}>
215-
<Sort
216-
sortKey={'AUTHOR'}
217-
onSort={onSort}
218-
activeSortKey={sortKey}
219-
>
220-
Author
221-
</Sort>
222-
</span>
223-
<span style={{ width: '10%' }}>
224-
<Sort
225-
sortKey={'COMMENTS'}
226-
onSort={onSort}
227-
activeSortKey={sortKey}
228-
>
229-
Comments
230-
</Sort>
231-
</span>
232-
<span style={{ width: '10%' }}>
233-
<Sort
234-
sortKey={'POINTS'}
235-
onSort={onSort}
236-
activeSortKey={sortKey}
237-
>
238-
Points
239-
</Sort>
240-
</span>
241-
<span style={{ width: '10%' }}>
242-
Archive
243-
</span>
244-
</div>
245-
{ reverseSortedList.map(item =>
246-
<div key={item.objectID} className="table-row">
183+
constructor(props) {
184+
super(props);
185+
186+
this.state = {
187+
sortKey: 'NONE',
188+
isSortReverse: false,
189+
};
190+
191+
this.onSort = this.onSort.bind(this);
192+
}
193+
194+
onSort(sortKey) {
195+
const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
196+
this.setState({ sortKey, isSortReverse });
197+
}
198+
199+
render() {
200+
const {
201+
list,
202+
onDismiss
203+
} = this.props;
204+
205+
const {
206+
sortKey,
207+
isSortReverse,
208+
} = this.state;
209+
210+
const sortedList = SORTS[sortKey](list);
211+
const reverseSortedList = isSortReverse
212+
? sortedList.reverse()
213+
: sortedList;
214+
215+
return(
216+
<div className="table">
217+
<div className="table-header">
247218
<span style={{ width: '40%' }}>
248-
<a href={item.url}>{item.title}</a>
219+
<Sort
220+
sortKey={'TITLE'}
221+
onSort={this.onSort}
222+
activeSortKey={sortKey}
223+
>
224+
Title
225+
</Sort>
249226
</span>
250227
<span style={{ width: '30%' }}>
251-
{item.author}
228+
<Sort
229+
sortKey={'AUTHOR'}
230+
onSort={this.onSort}
231+
activeSortKey={sortKey}
232+
>
233+
Author
234+
</Sort>
252235
</span>
253236
<span style={{ width: '10%' }}>
254-
{item.num_comments}
237+
<Sort
238+
sortKey={'COMMENTS'}
239+
onSort={this.onSort}
240+
activeSortKey={sortKey}
241+
>
242+
Comments
243+
</Sort>
255244
</span>
256245
<span style={{ width: '10%' }}>
257-
{item.points}
246+
<Sort
247+
sortKey={'POINTS'}
248+
onSort={this.onSort}
249+
activeSortKey={sortKey}
250+
>
251+
Points
252+
</Sort>
258253
</span>
259254
<span style={{ width: '10%' }}>
260-
<Button
261-
onClick={() => onDismiss(item.objectID)}
262-
className="button-inline"
263-
>
264-
Dismiss
265-
</Button>
255+
Archive
266256
</span>
267257
</div>
268-
)}
269-
</div>
270-
);
258+
{ reverseSortedList.map(item =>
259+
<div key={item.objectID} className="table-row">
260+
<span style={{ width: '40%' }}>
261+
<a href={item.url}>{item.title}</a>
262+
</span>
263+
<span style={{ width: '30%' }}>
264+
{item.author}
265+
</span>
266+
<span style={{ width: '10%' }}>
267+
{item.num_comments}
268+
</span>
269+
<span style={{ width: '10%' }}>
270+
{item.points}
271+
</span>
272+
<span style={{ width: '10%' }}>
273+
<Button
274+
onClick={() => onDismiss(item.objectID)}
275+
className="button-inline"
276+
>
277+
Dismiss
278+
</Button>
279+
</span>
280+
</div>
281+
)}
282+
</div>
283+
);
284+
}
271285
}
272286

273287
const Sort = ({

0 commit comments

Comments
 (0)