diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-06-28 14:04:27 +0200 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-06-28 14:04:27 +0200 |
commit | ecc6e06e92f23b16817985e87b2e997b754f527d (patch) | |
tree | 38eed15bfb8fe63113a8db7e71daf1229cb2425d /src/client/react/components/container | |
parent | 9efc432e160b429a0643c38e28140bcf42af30a7 (diff) |
Move setWeek to an action
Diffstat (limited to 'src/client/react/components/container')
-rw-r--r-- | src/client/react/components/container/WeekSelector.js | 66 |
1 files changed, 5 insertions, 61 deletions
diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js index bc428cc..96c5663 100644 --- a/src/client/react/components/container/WeekSelector.js +++ b/src/client/react/components/container/WeekSelector.js @@ -18,75 +18,19 @@ * */ -import React from 'react'; -import PropTypes from 'prop-types'; -import moment from 'moment'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; +import { setWeek } from '../../store/actions'; +import { weekFromLocation } from '../../lib/url'; -import ArrowBackIcon from 'react-icons/lib/md/arrow-back'; -import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward'; - -import purifyWeek from '../../lib/purifyWeek'; -import { makeSetWeek, weekFromLocation } from '../../lib/url'; - -import './WeekSelector.scss'; - -class WeekSelector extends React.Component { - static propTypes = { - // react-router - week: PropTypes.number.isRequired, - setWeek: PropTypes.func.isRequired, - }; - - getWeekText() { - const { week } = this.props; - - const currentWeek = moment().week(); - - switch (week) { - case currentWeek: - return `Huidige week • ${week}`; - case currentWeek + 1: - return `Volgende week • ${week}`; - case currentWeek - 1: - return `Vorige week • ${week}`; - default: - return `Week ${week}`; - } - } - - updateWeek(change) { - const { week, setWeek } = this.props; - const newWeek = purifyWeek(week + change); - - const isCurrentWeek = moment().week() === newWeek; - setWeek(isCurrentWeek ? undefined : newWeek); - } - - render() { - return ( - <div className="WeekSelector"> - <button type="button" onClick={() => this.updateWeek(-1)}> - <ArrowBackIcon /> - </button> - <div className="text"> - {this.getWeekText()} - </div> - <button type="button" onClick={() => this.updateWeek(+1)}> - <ArrowForwardIcon /> - </button> - </div> - ); - } -} +import WeekSelector from '../presentational/WeekSelector'; const mapStateToProps = (state, { location }) => ({ week: weekFromLocation(location), }); -const mapDispatchToProps = (dispatch, { history }) => ({ - setWeek: makeSetWeek(history), +const mapDispatchToProps = dispatch => ({ + setWeek: newWeek => dispatch(setWeek(newWeek)), }); export default withRouter(connect(mapStateToProps, mapDispatchToProps)(WeekSelector)); |