diff --git a/src/components/RoomChatHeader.js b/src/components/RoomChatHeader.js
index 7e50dca..45362a7 100644
--- a/src/components/RoomChatHeader.js
+++ b/src/components/RoomChatHeader.js
@@ -1,39 +1,45 @@
import React, { PropTypes } from "react";
import ImmutablePropTypes from "react-immutable-proptypes";
-const ID = "room-chat-header";
+const make_header = (title, button) => (
+
+);
-const RoomChatHeader = ({ membership, room_name, roomActions }) => {
- switch (membership) {
+const RoomChatHeader = ({ room, roomActions }) => {
+ if (!room) {
+ return make_header("Select a room");
+ }
+
+ switch (room.membership) {
case "Member":
{
const onClick = (event) => {
- roomActions.leave(room_name);
roomActions.select(null);
- event.preventDefault();
+ roomActions.leave(room.name);
};
- return (
-
- {room_name}
-
-
- );
+ const button = ;
+ return make_header(room.name, button);
}
case "NonMember":
- return Not a member of {room_name}
;
+ return make_header(`Not a member of ${room.name}`);
case "Joining":
- return Joining {room_name}
;
+ return make_header(`Joining ${room.name}`);
case "Leaving":
- return Leaving {room_name}
;
+ return make_header(`Leaving ${room.name}`);
}
};
RoomChatHeader.propTypes = {
- membership: PropTypes.string.isRequired,
- room_name: PropTypes.string.isRequired,
+ room: PropTypes.shape({
+ membership: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+ }),
roomActions: PropTypes.shape({
leave: PropTypes.func.isRequired,
select: PropTypes.func.isRequired
diff --git a/src/containers/RoomChat.js b/src/containers/RoomChat.js
index 70c1633..bcd0140 100644
--- a/src/containers/RoomChat.js
+++ b/src/containers/RoomChat.js
@@ -30,17 +30,21 @@ class RoomChat extends React.Component {
render() {
const { login_user_name, name, room, roomActions } = this.props;
- // If no room is selected, just tell the user to select one.
if (!name || !room) {
- return Select a room
;
+ return (
+
+
+
+ );
}
if (room.membership != "Member") {
return (
@@ -51,8 +55,7 @@ class RoomChat extends React.Component {
return (
button {
+ padding: 0.5em 1em;
}
#room-chat-message-list {
display: block;
- height: 84%;
+ height: 83%;
width: 100%;
box-sizing: border-box;
margin: 0;