Skip to content

Commit

Permalink
chapter 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@rwieruch
rwieruch committed Jun 27, 2017
1 parent 82497f2 commit 1f4e554
Showing 1 changed file with 116 additions and 102 deletions.
218 changes: 116 additions & 102 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,27 @@ const SORTS = {
POINTS: list => sortBy(list, 'points').reverse(),
};

const updateSearchTopstoriesState = (hits, page) => (prevState) => {
const { searchKey, results } = prevState;

const oldHits = results && results[searchKey]
? results[searchKey].hits
: [];

const updatedHits = [
...oldHits,
...hits
];

return {
results: {
...results,
[searchKey]: { hits: updatedHits, page }
},
isLoading: false
};
};

class App extends Component {
constructor(props) {
super(props);
Expand All @@ -30,22 +51,14 @@ class App extends Component {
searchKey: '',
searchTerm: DEFAULT_QUERY,
isLoading: false,
sortKey: 'NONE',
isSortReverse: false,
};

this.needsToSearchTopstories = this.needsToSearchTopstories.bind(this);
this.setSearchTopstories = this.setSearchTopstories.bind(this);
this.fetchSearchTopstories = this.fetchSearchTopstories.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.onSearchSubmit = this.onSearchSubmit.bind(this);
this.onDismiss = this.onDismiss.bind(this);
this.onSort = this.onSort.bind(this);
}

onSort(sortKey) {
const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
this.setState({ sortKey, isSortReverse });
this.needsToSearchTopstories = this.needsToSearchTopstories.bind(this);
}

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

setSearchTopstories(result) {
const { hits, page } = result;
const { searchKey, results } = this.state;

const oldHits = results && results[searchKey]
? results[searchKey].hits
: [];

const updatedHits = [
...oldHits,
...hits
];

this.setState({
results: {
...results,
[searchKey]: { hits: updatedHits, page }
},
isLoading: false
});
this.setState(updateSearchTopstoriesState(hits, page));
}

fetchSearchTopstories(searchTerm, page) {
Expand Down Expand Up @@ -123,9 +119,7 @@ class App extends Component {
searchTerm,
results,
searchKey,
isLoading,
sortKey,
isSortReverse
isLoading
} = this.state;

const page = (
Expand Down Expand Up @@ -153,9 +147,6 @@ class App extends Component {
</div>
<Table
list={list}
sortKey={sortKey}
isSortReverse={isSortReverse}
onSort={this.onSort}
onDismiss={this.onDismiss}
/>
<div className="interactions">
Expand Down Expand Up @@ -187,87 +178,110 @@ const Search = ({
</button>
</form>

const Table = ({
list,
sortKey,
isSortReverse,
onSort,
onDismiss
}) => {
const sortedList = SORTS[sortKey](list);
const reverseSortedList = isSortReverse
? sortedList.reverse()
: sortedList;
class Table extends Component {

return (
<div className="table">
<div className="table-header">
<span style={{ width: '40%' }}>
<Sort
sortKey={'TITLE'}
onSort={onSort}
activeSortKey={sortKey}
>
Title
</Sort>
</span>
<span style={{ width: '30%' }}>
<Sort
sortKey={'AUTHOR'}
onSort={onSort}
activeSortKey={sortKey}
>
Author
</Sort>
</span>
<span style={{ width: '10%' }}>
<Sort
sortKey={'COMMENTS'}
onSort={onSort}
activeSortKey={sortKey}
>
Comments
</Sort>
</span>
<span style={{ width: '10%' }}>
<Sort
sortKey={'POINTS'}
onSort={onSort}
activeSortKey={sortKey}
>
Points
</Sort>
</span>
<span style={{ width: '10%' }}>
Archive
</span>
</div>
{ reverseSortedList.map(item =>
<div key={item.objectID} className="table-row">
constructor(props) {
super(props);

this.state = {
sortKey: 'NONE',
isSortReverse: false,
};

this.onSort = this.onSort.bind(this);
}

onSort(sortKey) {
const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
this.setState({ sortKey, isSortReverse });
}

render() {
const {
list,
onDismiss
} = this.props;

const {
sortKey,
isSortReverse,
} = this.state;

const sortedList = SORTS[sortKey](list);
const reverseSortedList = isSortReverse
? sortedList.reverse()
: sortedList;

return(
<div className="table">
<div className="table-header">
<span style={{ width: '40%' }}>
<a href={item.url}>{item.title}</a>
<Sort
sortKey={'TITLE'}
onSort={this.onSort}
activeSortKey={sortKey}
>
Title
</Sort>
</span>
<span style={{ width: '30%' }}>
{item.author}
<Sort
sortKey={'AUTHOR'}
onSort={this.onSort}
activeSortKey={sortKey}
>
Author
</Sort>
</span>
<span style={{ width: '10%' }}>
{item.num_comments}
<Sort
sortKey={'COMMENTS'}
onSort={this.onSort}
activeSortKey={sortKey}
>
Comments
</Sort>
</span>
<span style={{ width: '10%' }}>
{item.points}
<Sort
sortKey={'POINTS'}
onSort={this.onSort}
activeSortKey={sortKey}
>
Points
</Sort>
</span>
<span style={{ width: '10%' }}>
<Button
onClick={() => onDismiss(item.objectID)}
className="button-inline"
>
Dismiss
</Button>
Archive
</span>
</div>
)}
</div>
);
{ reverseSortedList.map(item =>
<div key={item.objectID} className="table-row">
<span style={{ width: '40%' }}>
<a href={item.url}>{item.title}</a>
</span>
<span style={{ width: '30%' }}>
{item.author}
</span>
<span style={{ width: '10%' }}>
{item.num_comments}
</span>
<span style={{ width: '10%' }}>
{item.points}
</span>
<span style={{ width: '10%' }}>
<Button
onClick={() => onDismiss(item.objectID)}
className="button-inline"
>
Dismiss
</Button>
</span>
</div>
)}
</div>
);
}
}

const Sort = ({
Expand Down

0 comments on commit 1f4e554

Please sign in to comment.