More client styling and functionality

Author: stefaluc

app/src/App.css

@@ -4,6 +4,13 @@
   width: 75%;
   flex-direction: column;
   border-radius: 10px;
+  background-color: #FFF;
+}
+
+#init {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #top {
@@ -13,14 +20,19 @@
   flex-direction: row;
   border-radius-top: 10px;
 }
-#users-main {
+#participants-main {
   width: 20%;
   height: 100%;
+  height: calc(100% - 20px);
+  overflow: auto;
+  padding: 10px;
   background-color: #DDD;
 }
 #conversation-main {
   width: 80%;
-  height: 100%;
+  height: calc(100% - 20px);
+  overflow: auto;
+  padding: 10px;
   background-color: #FFF;
 }
 
@@ -38,9 +50,18 @@
   width: 100%;
   background-color: #CCC;
 }
-#text-entry-form {
+#text-entry {
   width: 80%;
   height: 100%;
+  padding: 10px;
+}
+#text-entry-form {
+  width: calc(100% - 7px);
+  height: calc(100% - 28px);
+}
+#text-entry-input {
+  width: 100%;
+  height: 100%;
 }
 #text-entry-submit {
   display: flex;

app/src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 
+import Message from './components/Message';
 import './App.css';
 
 const socket = new WebSocket("ws://127.0.0.1:8081/ws");
@@ -17,25 +18,61 @@ class App extends Component {
     super(props);
 
     this.state = {
+      init: true,
+      participants: [],
       messages: [],
     };
 
-    this.buttonClick = this.buttonClick.bind(this);
+    this.participantSubmit = this.participantSubmit.bind(this);
+    this.textSubmit = this.textSubmit.bind(this);
   }
 
-  buttonClick() {
+  participantSubmit(e) {
+    e.preventDefault();
+    const input = document.getElementById("participant-form").value;
+    console.log(input);
+    if (input === "") {
+      return;
+    }
+
+    this.setState({
+      init: false,
+      participants: [
+        ...this.state.participants,
+        input,
+      ]
+    });
+  }
+
+  textSubmit(e) {
+    e.preventDefault();
+    const input = document.getElementById("text-entry-input").value;
+    if (input === "") {
+      return;
+    }
+
     socket.send(JSON.stringify({
-      text: "test",
+      text: input,
       client: "testClient",
+      timestamp: new Date().toLocaleTimeString(),
     }));
+
+    document.getElementById("text-entry-input").value = "";
   }
 
   componentDidMount() {
     socket.onmessage = (event) => {
-      const { text, client } = JSON.parse(event.data);
+      const { text, client, timestamp } = JSON.parse(event.data);
 
       this.setState({
-        messages: [...this.state.messages, text],
+        messages: [
+          ...this.state.messages,
+          {
+            text,
+            client,
+            timestamp,
+          }
+        ],
       });
     }
   }
@@ -44,23 +81,44 @@ class App extends Component {
     console.log(this.state);
     return (
       <div id="box-main">
-        <div id="top">
-          <div id="users-main"></div>
-          <div id="conversation-main">
-            {this.state.messages.map(message =>
-              <div>{message}</div>
-            )}
+        {this.state.init &&
+          <div id="init">
+            <form onSubmit={this.participantSubmit}>
+              <input type="text"
+                     placeholder="Enter name here..."
+                     id="participant-form" />
+            </form>
           </div>
-        </div>
-        <div id="bottom">
-          <div id="text-entry-main">
-            <div id="text-entry-form">
+        }
+        {!this.state.init &&
+          <div style={{width: "100%", height: "100%"}}>
+            <div id="top">
+              <div id="participants-main">
+                <b>{`Participants (${this.state.participants.length}):`}</b>
+                {this.state.participants.map(participant =>
+                  <div>{participant}</div>
+                )}
+              </div>
+              <div id="conversation-main">
+                {this.state.messages.map(message =>
+                  <Message message={message} />
+                )}
+              </div>
             </div>
-            <div onClick={this.buttonClick} id="text-entry-submit">
-              Send Message
+            <div id="bottom">
+              <div id="text-entry-main">
+                <div id="text-entry">
+                  <form onSubmit={this.textSubmit} id="text-entry-form">
+                    <input type="text" id="text-entry-input" />
+                  </form>
+                </div>
+                <div onClick={this.textSubmit} id="text-entry-submit">
+                  Send Message
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        }
       </div>
     );
   }

app/src/components/Message.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import '../styles/Message.css';
+
+const Message = (props) => {
+  console.log(props);
+  const { text, client, timestamp } = props.message;
+
+  return (
+    <div className="message">
+      <div className="message-top">
+        <span className="client-name">{client}</span>
+        <span className="timestamp">{timestamp}</span>
+      </div>
+      <div className="message-text">
+        {text}
+      </div>
+    </div>
+  );
+}
+
+export default Message;

app/src/styles/Message.css

@@ -0,0 +1,22 @@
+.message {
+  animation: fadein 0.5s;
+  margin-bottom: 5px;
+}
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.message-top {
+  display: flex;
+  flex-direction: row;
+}
+
+.client-name {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.timestamp {
+  color: #AAA;
+}

server/websocket.go

@@ -9,6 +9,7 @@ import (
 type JsonData struct {
 	Text string `json:"text"`
 	Client string `json:"client"`
+	Timestamp string `json:"timestamp"`
 }
 
 var upgrader = websocket.Upgrader{