From 6a4e8d3a0dde0b44b0a38bd9477033bd3fa8c9aa Mon Sep 17 00:00:00 2001
From: stanleyowen <69080584+stanleyowen@users.noreply.github.com>
Date: Sun, 8 Nov 2020 16:01:07 +0700
Subject: [PATCH] Add UI for Chat

---
 client/debug.log                            |  1 +
 client/src/components/Chat/Chat.js          |  2 +
 client/src/components/Message/Message.css   | 55 +++++++++++++++++++++
 client/src/components/Message/Message.js    | 33 +++++++++++++
 client/src/components/Messages/Messages.css |  6 +++
 client/src/components/Messages/Messages.js  | 12 +++++
 6 files changed, 109 insertions(+)
 create mode 100644 client/debug.log
 create mode 100644 client/src/components/Message/Message.css
 create mode 100644 client/src/components/Message/Message.js
 create mode 100644 client/src/components/Messages/Messages.css
 create mode 100644 client/src/components/Messages/Messages.js

diff --git a/client/debug.log b/client/debug.log
new file mode 100644
index 0000000..ec1bd2e
--- /dev/null
+++ b/client/debug.log
@@ -0,0 +1 @@
+[1108/110409.313:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
diff --git a/client/src/components/Chat/Chat.js b/client/src/components/Chat/Chat.js
index cbe4d2f..0bbd1f5 100644
--- a/client/src/components/Chat/Chat.js
+++ b/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>
diff --git a/client/src/components/Message/Message.css b/client/src/components/Message/Message.css
new file mode 100644
index 0000000..aac3cbc
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/components/Message/Message.js b/client/src/components/Message/Message.js
new file mode 100644
index 0000000..1a0a231
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/client/src/components/Messages/Messages.css b/client/src/components/Messages/Messages.css
new file mode 100644
index 0000000..60c5330
--- /dev/null
+++ b/client/src/components/Messages/Messages.css
@@ -0,0 +1,6 @@
+.messages {
+    padding: 5% 0;
+    overflow: auto;
+    flex: auto;
+}
+  
\ No newline at end of file
diff --git a/client/src/components/Messages/Messages.js b/client/src/components/Messages/Messages.js
new file mode 100644
index 0000000..8698139
--- /dev/null
+++ b/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;
\ No newline at end of file