diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-02-09 17:04:12 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-02-09 17:04:12 +0100 |
commit | 6926de1108b1a084e133d5f8363f080d7c20a99f (patch) | |
tree | ce27ac5a024e6a0e342037d3ea03ddf7ca6c3c82 /src/client/react/components/container/Results.js | |
parent | 8d5bccc8984618c9282e9592882835819306fa07 (diff) |
Use classes instead of stateless functions for Components
Diffstat (limited to 'src/client/react/components/container/Results.js')
-rw-r--r-- | src/client/react/components/container/Results.js | 103 |
1 files changed, 49 insertions, 54 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index f65c0c8..41030e7 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -9,66 +9,61 @@ import { setUser } from '../../actions/search'; import { userFromMatch } from '../../lib/url'; import Result from '../presentational/Result'; -const Results = ({ - results, - searchText, - selectedResult, - match, - history, - dispatch, -}) => { - const user = userFromMatch(match); +class Results extends React.Component { + static propTypes = { + results: PropTypes.arrayOf(PropTypes.string).isRequired, + searchText: PropTypes.string.isRequired, + selectedResult: PropTypes.string, - const isExactMatch = - user != null && - searchText === users.byId[user].value; + // react-router + match: PropTypes.object.isRequired, + history: PropTypes.object.isRequired, - return ( - <div - className={classnames('search__results', { - 'search__results--has-results': !isExactMatch && results.length > 0, - })} - style={{ - minHeight: isExactMatch ? 0 : results.length * 54, - }} - > - {!isExactMatch && results.map(userId => ( - <Result - key={userId} - userId={userId} - isSelected={userId === selectedResult} - onClick={() => { - if (userId === user) { - // EDGE CASE: The user is set if the user changes, but it doesn't - // change if the result is already the one we are viewing. - // Therefor, we need to dispatch the SET_USER command manually. - dispatch(setUser(user)); - } else { - history.push(`/${userId}`); - } - }} - /> - ))} - </div> - ); -}; + // redux + dispatch: PropTypes.func.isRequired, + }; -Results.propTypes = { - results: PropTypes.arrayOf(PropTypes.string).isRequired, - searchText: PropTypes.string.isRequired, - selectedResult: PropTypes.string, + static defaultProps = { + selectedResult: null, + }; - // react-router - match: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, + render() { + const user = userFromMatch(this.props.match); - // redux - dispatch: PropTypes.func.isRequired, -}; + const isExactMatch = + user != null && + this.props.searchText === users.byId[user].value; -Results.defaultProps = { - selectedResult: null, -}; + return ( + <div + className={classnames('search__results', { + 'search__results--has-results': !isExactMatch && this.props.results.length > 0, + })} + style={{ + minHeight: isExactMatch ? 0 : this.props.results.length * 54, + }} + > + {!isExactMatch && this.props.results.map(userId => ( + <Result + key={userId} + userId={userId} + isSelected={userId === this.props.selectedResult} + onClick={() => { + if (userId === user) { + // EDGE CASE: The user is set if the user changes, but it doesn't + // change if the result is already the one we are viewing. + // Therefor, we need to dispatch the SET_USER command manually. + this.props.dispatch(setUser(user)); + } else { + this.props.history.push(`/${userId}`); + } + }} + /> + ))} + </div> + ); + } +} const mapStateToProps = state => ({ results: state.search.results, |