diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-02-02 15:52:33 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-02-02 15:52:33 +0100 |
commit | 30376908301dae90d40532210d382c8edc088ac6 (patch) | |
tree | 88c7d228d637f1f5381acf701b75d0fb47b4e7f4 /src/client/react/components/container/Results.js | |
parent | 614f1c499207a6bebe1457b5b42550c5221286ad (diff) |
Get user and week from context
Diffstat (limited to 'src/client/react/components/container/Results.js')
-rw-r--r-- | src/client/react/components/container/Results.js | 76 |
1 files changed, 43 insertions, 33 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index c329c3c..0f70aa6 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -1,52 +1,63 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; import classnames from 'classnames'; +import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; -import Result from '../presentational/Result'; + import { setUser } from '../../actions/search'; +import { userFromMatch } from '../../lib/url'; +import Result from '../presentational/Result'; const Results = ({ results, isExactMatch, - urlUser, selectedResult, + match, history, dispatch, -}) => ( - <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 === urlUser) { - // 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(urlUser)); - } else { - history.push(`/${userId}`); - } - }} - /> - ))} - </div> -); +}) => { + const user = userFromMatch(match); + + 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> + ); +}; Results.propTypes = { results: PropTypes.arrayOf(PropTypes.string).isRequired, isExactMatch: PropTypes.bool.isRequired, - urlUser: PropTypes.string, selectedResult: PropTypes.string, + match: PropTypes.shape({ + params: PropTypes.shape({ + type: PropTypes.string, + value: PropTypes.string, + }).isRequired, + }).isRequired, history: PropTypes.shape({ push: PropTypes.func.isRequired, }).isRequired, @@ -54,7 +65,6 @@ Results.propTypes = { }; Results.defaultProps = { - urlUser: null, selectedResult: null, }; |