From f5c7fc1c6aa985151cf9f151d2f3423772d6fc09 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 3 Jul 2018 20:09:24 +0200 Subject: client/RoomFinder: Refactor --- .../react/components/container/RoomFinder.js | 96 +++------------------- .../react/components/container/RoomFinder.scss | 23 ------ .../react/components/presentational/RoomFinder.js | 74 +++++++++++++++++ .../components/presentational/RoomFinder.scss | 23 ++++++ src/client/react/store/actions.js | 23 ++++++ 5 files changed, 133 insertions(+), 106 deletions(-) delete mode 100644 src/client/react/components/container/RoomFinder.scss create mode 100644 src/client/react/components/presentational/RoomFinder.js create mode 100644 src/client/react/components/presentational/RoomFinder.scss (limited to 'src/client/react') 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
; - } - - return ( -
- - -
- -
- ); - } -} - -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/container/RoomFinder.scss b/src/client/react/components/container/RoomFinder.scss deleted file mode 100644 index d4b16d9..0000000 --- a/src/client/react/components/container/RoomFinder.scss +++ /dev/null @@ -1,23 +0,0 @@ -.RoomFinder { - display: flex; - margin: 8px; - padding: 8px; - border-radius: 2px; - background-color: #D32F2F; - - .mdc-button { - color: white; - - &::before, &::after { - background-color: white; - } - } - - .closeButton { - min-width: 48px; - - .mdc-button__icon { - margin-right: 0; - } - } -} 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 . + * + */ + +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
; + } + + return ( +
+ + +
+ +
+ ); + } +} + +export default RoomFinder; diff --git a/src/client/react/components/presentational/RoomFinder.scss b/src/client/react/components/presentational/RoomFinder.scss new file mode 100644 index 0000000..d4b16d9 --- /dev/null +++ b/src/client/react/components/presentational/RoomFinder.scss @@ -0,0 +1,23 @@ +.RoomFinder { + display: flex; + margin: 8px; + padding: 8px; + border-radius: 2px; + background-color: #D32F2F; + + .mdc-button { + color: white; + + &::before, &::after { + background-color: white; + } + } + + .closeButton { + min-width: 48px; + + .mdc-button__icon { + margin-right: 0; + } + } +} 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(); -- cgit v1.1