diff options
Diffstat (limited to 'src/client')
| -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(); | 
