From e741808bb640abdd7303be7ba0cf519f68b2977f Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Thu, 28 Jun 2018 14:53:09 +0200 Subject: Split Results into concerns --- src/client/react/components/container/Results.js | 90 ++++------------------ src/client/react/components/container/Results.scss | 5 -- .../react/components/presentational/Results.js | 70 +++++++++++++++++ .../react/components/presentational/Results.scss | 5 ++ 4 files changed, 88 insertions(+), 82 deletions(-) delete mode 100644 src/client/react/components/container/Results.scss create mode 100644 src/client/react/components/presentational/Results.js create mode 100644 src/client/react/components/presentational/Results.scss (limited to 'src') 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 ( -
0, - })} - style={{ - minHeight: isExactMatch ? 0 : results.length * 54, - }} - > - {!isExactMatch && results.map(resultUser => ( - { - 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); - } - }} - /> - ))} -
- ); - } -} - -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/container/Results.scss b/src/client/react/components/container/Results.scss deleted file mode 100644 index 60379cf..0000000 --- a/src/client/react/components/container/Results.scss +++ /dev/null @@ -1,5 +0,0 @@ -.Results { - &.hasResults { - border-top: 1px #BDBDBD solid; - } -} 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 . + * + */ + +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 ( +
0, + })} + style={{ + minHeight: isExactMatch ? 0 : results.length * 54, + }} + > + {!isExactMatch && results.map(userId => ( + setUser(userId)} + /> + ))} +
+ ); + } +} + +export default Results; diff --git a/src/client/react/components/presentational/Results.scss b/src/client/react/components/presentational/Results.scss new file mode 100644 index 0000000..60379cf --- /dev/null +++ b/src/client/react/components/presentational/Results.scss @@ -0,0 +1,5 @@ +.Results { + &.hasResults { + border-top: 1px #BDBDBD solid; + } +} -- cgit v1.1