From 85ad7c2e40167995ca9f5629c9fa9ad0e716e327 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Wed, 13 Apr 2016 15:33:51 +0200
Subject: [PATCH] Tweak RoomChatHeader code and appearance.

---
 src/components/RoomChatHeader.js | 38 ++++++++++++++++++--------------
 src/containers/RoomChat.js       | 15 ++++++++-----
 src/styles/styles.scss           | 19 +++++++++++++---
 3 files changed, 47 insertions(+), 25 deletions(-)

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) => (
+    <div id="room-chat-header">
+        <div id="room-chat-header-title">{title}</div>
+        {button}
+    </div>
+);
 
-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 (
-                <div id={ID}>
-                    {room_name}
-                    <button onClick={onClick}>Leave</button>
-                </div>
-            );
+            const button = <button onClick={onClick}>Leave</button>;
+            return make_header(room.name, button);
         }
 
         case "NonMember":
-            return <div id={ID}>Not a member of {room_name}</div>;
+            return make_header(`Not a member of ${room.name}`);
 
         case "Joining":
-            return <div id={ID}>Joining {room_name}</div>;
+            return make_header(`Joining ${room.name}`);
 
         case "Leaving":
-            return <div id={ID}>Leaving {room_name}</div>;
+            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 <div id={ID}>Select a room</div>;
+            return (
+                <div id={ID}>
+                    <RoomChatHeader
+                        roomActions={roomActions}
+                    />
+                </div>
+            );
         }
 
         if (room.membership != "Member") {
             return (
                 <div id={ID}>
                     <RoomChatHeader
-                        room_name={name}
-                        membership={room.membership}
+                        room={{ membership: room.membership, name}}
                         roomActions={roomActions}
                     />
                 </div>
@@ -51,8 +55,7 @@ class RoomChat extends React.Component {
         return (
             <div id={ID}>
                 <RoomChatHeader
-                    room_name={name}
-                    membership={room.membership}
+                    room={{ membership: room.membership, name}}
                     roomActions={roomActions}
                 />
                 <RoomChatMessageList
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index b5b818e..c216cdb 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -81,15 +81,28 @@ main {
 
 #room-chat-header {
     flex: 1;
-    text-align: center;
-    font-size: 1.3em;
     padding: 0.8em;
     border: solid grey 0.1em;
+
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#room-chat-header-title {
+    font-size: 1.3em;
+    text-align: center;
+    flex: 1;
+}
+
+#room-chat-header > button {
+    padding: 0.5em 1em;
 }
 
 #room-chat-message-list {
     display: block;
-    height: 84%;
+    height: 83%;
     width: 100%;
     box-sizing: border-box;
     margin: 0;