Add UI for Chat

client/debug.log

@@ -0,0 +1 @@
+[1108/110409.313:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

client/src/components/Chat/Chat.js

@@ -6,6 +6,7 @@ import './Chat.css';
 
 import InfoBar from '../InfoBar/InfoBar';
 import Input from '../Input/Input';
+import Messages from '../Messages/Messages'
 
 let socket;
 
@@ -53,6 +54,7 @@ const Chat = ({location}) => {
         <div className="outerContainer">
             <div className="container">
                 <InfoBar room={room}/>
+                <Messages messages={messages} name={name}/>
                 <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
             </div>
         </div>

client/src/components/Message/Message.css

@@ -0,0 +1,55 @@
+.messageBox {
+    background: #f3f3f3;
+    border-radius: 20px;
+    padding: 5px 20px;
+    color: #fff;
+    display: inline-block;
+    max-width: 80%;
+}
+.messageText {
+    width: 100%;
+    letter-spacing: 0;
+    float: left;
+    font-size: 1.1em;
+    word-wrap: break-word;
+}
+.messageText img {
+    vertical-align: middle;
+}
+.messageContainer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 5%;
+    margin-top: 3px;
+}
+.sentText {
+    display: flex;
+    align-items: center;
+    font-family: Helvetica;
+    color: #828282;
+    letter-spacing: 0.3px;
+}
+.pl-10 {
+    padding-left: 10px;
+}
+.pr-10 {
+    padding-right: 10px;
+}
+.justifyStart {
+    justify-content: flex-start;
+}
+.justifyEnd {
+    justify-content: flex-end;
+}
+.colorWhite {
+    color: #fff;
+}
+.colorDark {
+    color: #353535;
+}
+.backgroundBlue {
+    background: #2979ff;
+}
+.backgroundLight {
+    background: #f3f3f3;
+}

client/src/components/Message/Message.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Message.css';
+
+const Message = ({ message: { user, text }, name }) => {
+    let isSentByCurrentUser = false;
+
+    const trimmedName = name.trim().toLowerCase();
+
+    if(user === trimmedName){
+        isSentByCurrentUser = true;
+    }
+    return (
+        isSentByCurrentUser
+        ? (
+            <div className="messageContainer justifyEnd">
+                <p className="sentText pr-10">{trimmedName}</p>
+                <div className="messageBox backgroundBlue">
+                    <p className="messageText colorWhite">{text}</p>
+                </div>
+            </div>
+        )
+        : (
+            <div className="messageContainer justifyStart">
+                <div className="messageBox backgroundLight">
+                    <p className="messageText colorDark">{text}</p>
+                </div>
+                <p className="sentText pl-10">{user}</p>
+            </div>
+        )
+    );
+}
+
+export default Message;

client/src/components/Messages/Messages.css

@@ -0,0 +1,6 @@
+.messages {
+    padding: 5% 0;
+    overflow: auto;
+    flex: auto;
+}
+

client/src/components/Messages/Messages.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ScrollToBottom from 'react-scroll-to-bottom';
+import Message from '../Message/Message';
+import './Messages.css';
+
+const Messages = ({ messages, name }) => (
+    <ScrollToBottom>
+        {messages.map((message, i) => <div key={i}><Message message={message} name={name} /></div>)}
+    </ScrollToBottom>
+)
+
+export default Messages;