Permalink
Browse files

Create new room form and room list on homepage

  • Loading branch information...
bnhansn committed Oct 21, 2016
1 parent 79c41ab commit b209f7656899eaf8f735d7f2fb0b28849bed72a3
Showing with 134 additions and 21 deletions.
  1. +51 −0 web/src/components/NewRoomForm/index.js
  2. +29 −0 web/src/components/RoomListItem/index.js
  3. +54 −21 web/src/containers/Home/index.js
@@ -0,0 +1,51 @@
// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

type Props = {
handleSubmit: () => void,
onSubmit: () => void,
submitting: boolean,
}

class NewRoomForm extends Component {
props: Props

handleSubmit = data => this.props.onSubmit(data);

render() {
const { handleSubmit, submitting } = this.props;

return (
<form onSubmit={handleSubmit(this.handleSubmit)}>
<div className="input-group">
<Field
name="name"
type="text"
placeholder="Name"
component="input"
className="form-control"
/>
<div className="input-group-btn">
<button type="submit" className="btn btn-primary" disabled={submitting}>
{submitting ? 'Saving...' : 'Submit'}
</button>
</div>
</div>
</form>
);
}
}

const validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
return errors;
};

export default reduxForm({
form: 'newRoom',
validate,
})(NewRoomForm);
@@ -0,0 +1,29 @@
import React from 'react';

type Props = {
room: {
id: number,
name: string,
},
currentUserRoomIds: Array,
onRoomJoin: () => void,
}

const RoomListItem = ({ room, currentUserRoomIds, onRoomJoin }: Props) => {
const isJoined = currentUserRoomIds.includes(room.id);

return (
<div key={room.id} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
<span style={{ marginRight: '8px' }}>{room.name}</span>
<button
onClick={() => onRoomJoin(room.id)}
className="btn btn-sm"
disabled={isJoined}
>
{isJoined ? 'Joined' : 'Join'}
</button>
</div>
);
};

export default RoomListItem;
@@ -1,50 +1,83 @@
// @flow
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { logout } from '../../actions/session';
import { css, StyleSheet } from 'aphrodite';
import { fetchRooms, createRoom, joinRoom } from '../../actions/rooms';
import NewRoomForm from '../../components/NewRoomForm';
import Navbar from '../../components/Navbar';
import RoomListItem from '../../components/RoomListItem';

const styles = StyleSheet.create({
card: {
maxWidth: '500px',
padding: '3rem 4rem',
margin: '2rem auto',
},
});

type Room = {
id: number,
name: string,
}

type Props = {
logout: () => void,
currentUser: Object,
isAuthenticated: boolean,
rooms: Array<Room>,
currentUserRooms: Array<Room>,
fetchRooms: () => void,
createRoom: () => void,
joinRoom: () => void,
}

class Home extends Component {
static contextTypes = {
router: PropTypes.object,
}

componentDidMount() {
this.props.fetchRooms();
}

props: Props

handleLogout = () => this.props.logout(this.context.router);
handleNewRoomSubmit = data => this.props.createRoom(data, this.context.router);

render() {
const { currentUser, isAuthenticated } = this.props;
handleRoomJoin = roomId => this.props.joinRoom(roomId, this.context.router);

renderRooms() {
const currentUserRoomIds = [];
this.props.currentUserRooms.map(room => currentUserRoomIds.push(room.id));

return this.props.rooms.map(room =>
<RoomListItem
key={room.id}
room={room}
onRoomJoin={this.handleRoomJoin}
currentUserRoomIds={currentUserRoomIds}
/>
);
}

render() {
return (
<div style={{ flex: '1' }}>
<Navbar />
<ul>
<li><Link to="/login">Login</Link></li>
<li><Link to="/signup">Signup</Link></li>
</ul>
{isAuthenticated &&
<div>
<span>{currentUser.username}</span>
<button type="button" onClick={this.handleLogout}>Logout</button>
</div>
}
<div className={`card ${css(styles.card)}`}>
<h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Create a new room</h3>
<NewRoomForm onSubmit={this.handleNewRoomSubmit} />
</div>
<div className={`card ${css(styles.card)}`}>
<h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Join a room</h3>
{this.renderRooms()}
</div>
</div>
);
}
}

export default connect(
state => ({
isAuthenticated: state.session.isAuthenticated,
currentUser: state.session.currentUser,
rooms: state.rooms.all,
currentUserRooms: state.rooms.currentUserRooms,
}),
{ logout }
{ fetchRooms, createRoom, joinRoom }
)(Home);

0 comments on commit b209f76

Please sign in to comment.