From 9148952ef11996201ed25f137550ef71e7274de9 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 20 Mar 2018 13:18:11 +0100 Subject: Add roomfinder functionality --- src/client/react/components/container/Menu.js | 10 +++- .../react/components/container/RoomFinder.js | 68 +++++++++++++++++++++- 2 files changed, 74 insertions(+), 4 deletions(-) (limited to 'src/client/react/components') diff --git a/src/client/react/components/container/Menu.js b/src/client/react/components/container/Menu.js index 6476d84..36367ed 100644 --- a/src/client/react/components/container/Menu.js +++ b/src/client/react/components/container/Menu.js @@ -19,11 +19,17 @@ */ import React from 'react'; +import { connect } from 'react-redux'; +import { PropTypes } from 'prop-types'; import { Button, ButtonIcon } from 'rmwc/Button'; import { SimpleMenu, MenuItem } from 'rmwc/Menu'; import { Icon } from 'rmwc/Icon'; class Menu extends React.Component { + static propTypes = { + dispatch: PropTypes.func.isRequired, + } + render() { return ( Voeg label toe Maak favoriet
- Lokaal zoeken + this.props.dispatch({ type: 'ROOM_FINDER/SHOW' })}>Lokaal zoeken Oud rooster gebruiken ); } } -export default Menu; +export default connect()(Menu); diff --git a/src/client/react/components/container/RoomFinder.js b/src/client/react/components/container/RoomFinder.js index 3b28990..ddc793c 100644 --- a/src/client/react/components/container/RoomFinder.js +++ b/src/client/react/components/container/RoomFinder.js @@ -21,11 +21,73 @@ 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 { userFromMatch } from '../../lib/url'; class HelpBox extends React.Component { static propTypes = { // redux isVisible: PropTypes.bool.isRequired, + dispatch: PropTypes.func.isRequired, + + // react-router + match: PropTypes.object.isRequired, + } + + constructor(props) { + super(props); + + this.setRoom = this.setRoom.bind(this); + this.changeRoom = this.changeRoom.bind(this); + } + + componentWillMount() { + const user = userFromMatch(this.props.match); + // Have we just been mounted and are we viewing something else then a room? + if (this.props.isVisible && users.byId[user].type !== 'r') { + // Set the room to the first room. + this.setRoom(this.getAllRooms()[0]); + } + } + + componentWillReceiveProps(nextProps) { + const user = userFromMatch(nextProps.match); + // We are not currently viewing a room, correct the situation. + if (nextProps.isVisible && users.byId[user].type !== 'r') { + // Did we just become visible? Set the user to a room. If not, hide. + if (!this.props.isVisible) { + // Set the room to the first room. + this.setRoom(this.getAllRooms()[0], nextProps); + } else { + this.props.dispatch({ type: 'ROOM_FINDER/HIDE' }); + } + } + } + + getAllRooms() { + return users.allUsers.filter(user => user.type === 'r').map(room => room.id); + } + + setRoom(roomId, props = this.props) { + const query = props.location.search; + props.history.push(`/${roomId}${query}`); + } + + changeRoom(change) { + const currentRoom = userFromMatch(this.props.match); + const allRooms = this.getAllRooms(); + const currentRoomIndex = allRooms.indexOf(currentRoom); + let nextRoomIndex = currentRoomIndex + change; + if (nextRoomIndex < 0) { + nextRoomIndex = allRooms.length - 1; + } else if (nextRoomIndex > allRooms.length - 1) { + nextRoomIndex = 0; + } + + const nextRoom = allRooms[nextRoomIndex]; + this.setRoom(nextRoom); } render() { @@ -35,7 +97,9 @@ class HelpBox extends React.Component { return (
- This is the room finder! + + +
); } @@ -45,4 +109,4 @@ const mapStateToProps = state => ({ isVisible: state.isRoomFinderVisible, }); -export default connect(mapStateToProps)(HelpBox); +export default withRouter(connect(mapStateToProps)(HelpBox)); -- cgit v1.1