Add roomfinder functionality

2 files changed, 74 insertions, 4 deletions

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 (
       <SimpleMenu
@@ -32,11 +38,11 @@ class Menu extends React.Component {
         <MenuItem><Icon use="bookmark_border" />Voeg label toe</MenuItem>
         <MenuItem><Icon use="star_border" />Maak favoriet</MenuItem>
         <div className="mdc-list-divider" role="separator" />
-        <MenuItem><Icon use="location_searching" />Lokaal zoeken</MenuItem>
+        <MenuItem onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/SHOW' })}><Icon use="location_searching" />Lokaal zoeken</MenuItem>
         <MenuItem><Icon use="launch" />Oud rooster gebruiken</MenuItem>
       </SimpleMenu>
     );
   }
 }
 
-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 (
       <div className="room-finder">
-        This is the room finder!
+        <Button onClick={() => this.changeRoom(-1)}>Vorige</Button>
+        <Button onClick={() => this.changeRoom(+1)}>Volgende</Button>
+        <Button onClick={() => this.props.dispatch({ type: 'ROOM_FINDER/HIDE' })}><ButtonIcon use="close" /></Button>
       </div>
     );
   }
@@ -45,4 +109,4 @@ const mapStateToProps = state => ({
   isVisible: state.isRoomFinderVisible,
 });
 
-export default connect(mapStateToProps)(HelpBox);
+export default withRouter(connect(mapStateToProps)(HelpBox));