Tweak RoomChat code to include room name in room prop.

src/components/RoomChat.js

@@ -21,16 +21,16 @@ class RoomChat extends React.Component {
     }
 
     join_if_non_member(props) {
-        const { name, room, roomActions } = props;
+        const { room, roomActions } = props;
         if (room && room.membership == "NonMember") {
-            roomActions.join(name);
+            roomActions.join(room.name);
         }
     }
 
     render() {
-        const { login_user_name, name, room, roomActions } = this.props;
+        const { login_user_name, room, roomActions } = this.props;
 
-        if (!name || !room) {
+        if (!room) {
             return (
                 <div id={ID}>
                     <RoomChatHeader
@@ -40,11 +40,16 @@ class RoomChat extends React.Component {
             );
         }
 
-        if (room.membership != "Member") {
+        const { name, membership, messages } = room;
+
+        if (membership != "Member") {
             return (
                 <div id={ID}>
                     <RoomChatHeader
-                        room={{ membership: room.membership, name}}
+                        room={{
+                            membership,
+                            name
+                        }}
                         roomActions={roomActions}
                     />
                 </div>
@@ -55,12 +60,15 @@ class RoomChat extends React.Component {
         return (
             <div id={ID}>
                 <RoomChatHeader
-                    room={{ membership: room.membership, name}}
+                    room={{
+                        membership,
+                        name
+                    }}
                     roomActions={roomActions}
                 />
                 <RoomChatMessageList
                     login_user_name={login_user_name}
-                    messages={room.messages}
+                    messages={messages}
                 />
                 <RoomChatForm
                     name={name}
@@ -72,9 +80,9 @@ class RoomChat extends React.Component {
 }
 
 RoomChat.propTypes = {
-    login_user_name: PropTypes.string.isRequired,
-    name: PropTypes.string,
+    login_user_name: PropTypes.string,
     room: PropTypes.shape({
+        name:       PropTypes.string.isRequired,
         membership: PropTypes.string.isRequired,
         messages:   ImmutablePropTypes.list.isRequired
     }),

src/containers/RoomsPane.js

@@ -13,6 +13,15 @@ class RoomsPane extends React.Component {
 
     render() {
         const { login_user_name, rooms, roomActions, selected } = this.props;
+
+        let room;
+        if (selected) {
+            room = {
+                ...rooms.get(selected),
+                name: selected
+            };
+        }
+
         return (
             <div id="rooms-pane">
                 <RoomList
@@ -22,8 +31,7 @@ class RoomsPane extends React.Component {
                 />
                 <RoomChat
                     login_user_name={login_user_name}
-                    name={selected}
-                    room={rooms.get(selected)}
+                    room={room}
                     roomActions={roomActions}
                 />
             </div>
@@ -32,7 +40,7 @@ class RoomsPane extends React.Component {
 }
 
 RoomsPane.propTypes = {
-    login_user_name: PropTypes.string.isRequired,
+    login_user_name: PropTypes.string,
     rooms: ImmutablePropTypes.orderedMap.isRequired,
     roomActions: PropTypes.object.isRequired,
     selected: PropTypes.string