diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-06-28 14:53:09 +0200 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-06-28 14:53:09 +0200 |
commit | e741808bb640abdd7303be7ba0cf519f68b2977f (patch) | |
tree | e81790e7682fcde4766c4e9fc8e6ce6073b7dce9 /src | |
parent | 68037a4017483dc0ed1832426b7f97cea3e31d9b (diff) |
Split Results into concerns
Diffstat (limited to 'src')
-rw-r--r-- | src/client/react/components/container/Results.js | 90 | ||||
-rw-r--r-- | src/client/react/components/presentational/Results.js | 70 | ||||
-rw-r--r-- | src/client/react/components/presentational/Results.scss (renamed from src/client/react/components/container/Results.scss) | 0 |
3 files changed, 83 insertions, 77 deletions
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js index c20fdc4..0d761d1 100644 --- a/src/client/react/components/container/Results.js +++ b/src/client/react/components/container/Results.js @@ -18,92 +18,28 @@ * */ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; import users from '../../users'; -import { makeSetUser, userFromMatch } from '../../lib/url'; -import Result from '../presentational/Result'; +import { userFromMatch } from '../../lib/url'; +import { setUser } from '../../store/actions'; -import './Results.scss'; +import Results from '../presentational/Results'; -class Results extends React.Component { - static propTypes = { - results: PropTypes.arrayOf(PropTypes.string).isRequired, - searchText: PropTypes.string.isRequired, - selectedResult: PropTypes.string, +const mapStateToProps = (state, { match }) => { + const user = userFromMatch(match); + const searchText = state.search.text; - // react-router - user: PropTypes.string, - setUser: PropTypes.func.isRequired, - - // redux - dispatch: PropTypes.func.isRequired, - }; - - static defaultProps = { - selectedResult: null, - user: null, + return { + isExactMatch: user != null && searchText === users.byId[user].value, + results: state.search.results, + selectedResult: state.search.selected, }; +}; - render() { - const { - searchText, - results, - selectedResult, - user, - setUser, - dispatch, - } = this.props; - - const isExactMatch = ( - user != null && searchText === users.byId[user].value - ); - - return ( - <div - className={classnames('Results', { - hasResults: !isExactMatch && results.length > 0, - })} - style={{ - minHeight: isExactMatch ? 0 : results.length * 54, - }} - > - {!isExactMatch && results.map(resultUser => ( - <Result - key={resultUser} - userId={resultUser} - isSelected={resultUser === selectedResult} - onClick={() => { - if (resultUser === 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({ type: 'SEARCH/SET_USER', user }); - } else { - setUser(resultUser); - } - }} - /> - ))} - </div> - ); - } -} - -const mapStateToProps = (state, { match }) => ({ - user: userFromMatch(match), - results: state.search.results, - searchText: state.search.text, - selectedResult: state.search.result, -}); - -const mapDispatchToProps = (dispatch, { history }) => ({ - setUser: makeSetUser(history), - dispatch, +const mapDispatchToProps = dispatch => ({ + setUser: user => dispatch(setUser(user)), }); export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Results)); diff --git a/src/client/react/components/presentational/Results.js b/src/client/react/components/presentational/Results.js new file mode 100644 index 0000000..173c644 --- /dev/null +++ b/src/client/react/components/presentational/Results.js @@ -0,0 +1,70 @@ +/** + * Copyright (C) 2018 Noah Loomans + * + * This file is part of rooster.hetmml.nl. + * + * rooster.hetmml.nl is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * rooster.hetmml.nl is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with rooster.hetmml.nl. If not, see <http://www.gnu.org/licenses/>. + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Result from './Result'; + +import './Results.scss'; + +class Results extends React.Component { + static propTypes = { + results: PropTypes.arrayOf(PropTypes.string).isRequired, + selectedResult: PropTypes.string, + isExactMatch: PropTypes.bool.isRequired, + setUser: PropTypes.func.isRequired, + }; + + static defaultProps = { + selectedResult: null, + }; + + render() { + const { + results, + selectedResult, + isExactMatch, + setUser, + } = this.props; + + return ( + <div + className={classnames('Results', { + hasResults: !isExactMatch && results.length > 0, + })} + style={{ + minHeight: isExactMatch ? 0 : results.length * 54, + }} + > + {!isExactMatch && results.map(userId => ( + <Result + key={userId} + userId={userId} + isSelected={userId === selectedResult} + onClick={() => setUser(userId)} + /> + ))} + </div> + ); + } +} + +export default Results; diff --git a/src/client/react/components/container/Results.scss b/src/client/react/components/presentational/Results.scss index 60379cf..60379cf 100644 --- a/src/client/react/components/container/Results.scss +++ b/src/client/react/components/presentational/Results.scss |