aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/react/components/container/Menu.js10
-rw-r--r--src/client/react/components/container/RoomFinder.js68
-rw-r--r--src/client/react/reducers.js12
3 files changed, 86 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));
diff --git a/src/client/react/reducers.js b/src/client/react/reducers.js
index 733e003..e2b8448 100644
--- a/src/client/react/reducers.js
+++ b/src/client/react/reducers.js
@@ -110,6 +110,18 @@ function reducer(state = DEFAULT_STATE, action) {
};
}
+ case 'ROOM_FINDER/SHOW':
+ return {
+ ...state,
+ isRoomFinderVisible: true,
+ };
+
+ case 'ROOM_FINDER/HIDE':
+ return {
+ ...state,
+ isRoomFinderVisible: false,
+ };
+
case 'VIEW/FETCH_SCHEDULE_REQUEST':
case 'VIEW/FETCH_SCHEDULE_SUCCESS':
return {