diff options
Diffstat (limited to 'src/client/react')
-rw-r--r-- | src/client/react/components/container/RoomFinder.js | 96 | ||||
-rw-r--r-- | src/client/react/components/presentational/RoomFinder.js | 74 | ||||
-rw-r--r-- | src/client/react/components/presentational/RoomFinder.scss (renamed from src/client/react/components/container/RoomFinder.scss) | 0 | ||||
-rw-r--r-- | src/client/react/store/actions.js | 23 |
4 files changed, 110 insertions, 83 deletions
diff --git a/src/client/react/components/container/RoomFinder.js b/src/client/react/components/container/RoomFinder.js index 8bcccc4..b4af8cb 100644 --- a/src/client/react/components/container/RoomFinder.js +++ b/src/client/react/components/container/RoomFinder.js @@ -18,95 +18,25 @@ * */ -import React from 'react'; -import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; -import { Button, ButtonIcon } from 'rmwc/Button'; -import users from '../../users'; -import { makeSetUser, userFromMatch } from '../../lib/url'; +import { shiftRoom } from '../../store/actions'; +import { userFromMatch } from '../../lib/url'; -import './RoomFinder.scss'; +import RoomFinder from '../presentational/RoomFinder'; -class RoomFinder extends React.Component { - static propTypes = { - // redux - isVisible: PropTypes.bool.isRequired, - onHide: PropTypes.func.isRequired, +const mapStateToProps = (state, { match }) => { + const user = userFromMatch(match); - // react-router - user: PropTypes.string.isRequired, - setUser: PropTypes.func.isRequired, - } + return { + key: user, + user, + isVisible: state.isRoomFinderVisible, + }; +}; - componentWillMount() { - const { isVisible, user, onHide } = this.props; - - if (isVisible && users.byId[user].type !== 'r') { - // We are not currently viewing a room, so just hide. - onHide(); - } - } - - componentWillReceiveProps(nextProps) { - const { isVisible, user, onHide } = nextProps; - - if (isVisible && users.byId[user].type !== 'r') { - // We are not currently viewing a room, so just hide. - onHide(); - } - } - - changeRoom(change) { - const { user, setUser } = this.props; - const { allRoomIds } = users; - - const currentRoom = user; - const currentRoomIndex = allRoomIds.indexOf(currentRoom); - let nextRoomIndex = currentRoomIndex + change; - if (nextRoomIndex < 0) { - nextRoomIndex = allRoomIds.length - 1; - } else if (nextRoomIndex > allRoomIds.length - 1) { - nextRoomIndex = 0; - } - - const nextRoom = allRoomIds[nextRoomIndex]; - setUser(nextRoom); - } - - render() { - const { isVisible, onHide } = this.props; - if (!isVisible) { - return <div />; - } - - return ( - <div className="RoomFinder"> - <Button onClick={() => this.changeRoom(-1)}> - Vorige - </Button> - <Button onClick={() => this.changeRoom(+1)}> - Volgende - </Button> - <div className="grow" /> - <Button - className="closeButton" - onClick={onHide} - > - <ButtonIcon use="close" /> - </Button> - </div> - ); - } -} - -const mapStateToProps = (state, { match }) => ({ - user: userFromMatch(match), - isVisible: state.isRoomFinderVisible, -}); - -const mapDispatchToProps = (dispatch, { history }) => ({ - setUser: makeSetUser(history), +const mapDispatchToProps = dispatch => ({ + shiftRoom: shift => dispatch(shiftRoom(shift)), onHide: () => dispatch({ type: 'ROOM_FINDER/HIDE' }), }); diff --git a/src/client/react/components/presentational/RoomFinder.js b/src/client/react/components/presentational/RoomFinder.js new file mode 100644 index 0000000..cbcf837 --- /dev/null +++ b/src/client/react/components/presentational/RoomFinder.js @@ -0,0 +1,74 @@ +/** + * 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 { Button, ButtonIcon } from 'rmwc/Button'; +import users from '../../users'; + +import './RoomFinder.scss'; + +class RoomFinder extends React.Component { + static propTypes = { + // redux + isVisible: PropTypes.bool.isRequired, + onHide: PropTypes.func.isRequired, + + // react-router + user: PropTypes.string.isRequired, + shiftRoom: PropTypes.func.isRequired, + } + + componentDidMount() { + const { isVisible, user, onHide } = this.props; + + if (isVisible && users.byId[user].type !== 'r') { + // We are not currently viewing a room, so just hide. + onHide(); + } + } + + render() { + const { isVisible, shiftRoom, onHide } = this.props; + if (!isVisible) { + return <div />; + } + + return ( + <div className="RoomFinder"> + <Button onClick={() => shiftRoom(-1)}> + Vorige + </Button> + <Button onClick={() => shiftRoom(+1)}> + Volgende + </Button> + <div className="grow" /> + <Button + className="closeButton" + onClick={onHide} + > + <ButtonIcon use="close" /> + </Button> + </div> + ); + } +} + +export default RoomFinder; diff --git a/src/client/react/components/container/RoomFinder.scss b/src/client/react/components/presentational/RoomFinder.scss index d4b16d9..d4b16d9 100644 --- a/src/client/react/components/container/RoomFinder.scss +++ b/src/client/react/components/presentational/RoomFinder.scss diff --git a/src/client/react/store/actions.js b/src/client/react/store/actions.js index b123a8b..96256e4 100644 --- a/src/client/react/store/actions.js +++ b/src/client/react/store/actions.js @@ -18,6 +18,29 @@ export function setUser(newUser) { }; } +export function shiftRoom(shift) { + return (dispatch, getState, { getHistory }) => { + const { user } = getHistory(); + const { allRoomIds } = users; + + if (users.byId[user].type !== 'r') throw new Error('User must be a room'); + + const currentRoom = user; + const currentRoomIndex = allRoomIds.indexOf(currentRoom); + + let nextRoomIndex = currentRoomIndex + shift; + + if (nextRoomIndex < 0) { + nextRoomIndex = allRoomIds.length - 1; + } else if (nextRoomIndex > allRoomIds.length - 1) { + nextRoomIndex = 0; + } + + const nextRoom = allRoomIds[nextRoomIndex]; + dispatch(setUser(nextRoom)); + }; +} + export function setWeek(newWeek) { return (dispatch, getState, { getHistory, moment }) => { const { updateQuery } = getHistory(); |