Styling and server restructuring

Author: stefaluc

app/src/App.css

@@ -3,8 +3,9 @@
   height: 75%;
   width: 75%;
   flex-direction: column;
-  border-radius: 10px;
-  background-color: #FFF;
+  background-color: #F5F7F9;
+  border-left: 3px solid #69c;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 #init {
@@ -26,14 +27,25 @@
   height: calc(100% - 20px);
   overflow: auto;
   padding: 10px;
-  background-color: #DDD;
+  background-color: #EEE;
+  border-right: 1px solid #DDD;
+  border-top: 1px solid #DDD;
 }
 #conversation-main {
   width: 80%;
   height: calc(100% - 20px);
   overflow: auto;
   padding: 10px;
-  background-color: #FFF;
+  border-right: 1px solid #DDD;
+  border-top: 1px solid #DDD;
+  position: relative;
+}
+
+#source {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  opacity: 0.7;
 }
 
 #bottom {
@@ -48,27 +60,17 @@
   flex-direction: row;
   height: 100%;
   width: 100%;
-  background-color: #CCC;
-}
-#text-entry {
-  width: 80%;
-  height: 100%;
-  padding: 10px;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+  background-color: #EEE;
 }
 #text-entry-form {
-  width: calc(100% - 7px);
-  height: calc(100% - 28px);
-}
-#text-entry-input {
   width: 100%;
   height: 100%;
 }
-#text-entry-submit {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20%;
-  height: 100%;
-  background-color: #FB4F4F;
-  cursor: pointer;
+#text-entry-input {
+  margin: 10px;
+  width: calc(100% - 25px);
+  height: calc(100% - 28px);
 }

app/src/App.js

@@ -12,7 +12,6 @@ socket.onerror = (event) => {
   console.log(event);
 }
 
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -60,6 +59,13 @@ class App extends Component {
     document.getElementById("text-entry-input").value = "";
   }
 
+  componentDidUpdate() {
+    // keep message box scrolled appropriately with new messages
+    if (!this.state.init) {
+      document.getElementById("conversation-main").scrollTop = document.getElementById("conversation-main").scrollHeight;
+    }
+  }
+
   componentDidMount() {
     socket.onmessage = (event) => {
       const { text, client, timestamp } = JSON.parse(event.data);
@@ -100,21 +106,20 @@ class App extends Component {
                 )}
               </div>
               <div id="conversation-main">
+                <a href="https://github.com/stefaluc/go-react-chat"
+                  id="source"
+                  target="_blank"
+                  rel="noopener noreferrer">View source code</a>
                 {this.state.messages.map(message =>
                   <Message message={message} />
                 )}
               </div>
             </div>
             <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>
+                <form onSubmit={this.textSubmit} id="text-entry-form">
+                  <input type="text" id="text-entry-input" />
+                </form>
               </div>
             </div>
           </div>

app/src/index.css

@@ -5,6 +5,13 @@ body {
   height: 100vh;
   width: 100vw;
   background-color: #6CC0E5;
+  color: #555;
+}
+
+a {
+  color: #E81C4F;
+  cursor: pointer;
+  text-decoration: underline;
 }
 
 #root {

server/conn_hub.go

@@ -0,0 +1 @@
+package main

server/main.go

@@ -0,0 +1,22 @@
+package main
+
+import (
+	"net/http"
+	"fmt"
+)
+
+func main() {
+	fmt.Println("Launching server...")
+
+	// start conn_hub
+	// connHub := newConnHub
+	// go connHub.run()
+
+	http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
+		wsHandler(/* hub ,*/ w, r)
+	})
+	err := http.ListenAndServe(":8081", nil)
+	if err != nil {
+		fmt.Println("ListenAndServeError:", err)
+	}
+}

server/websocket.go

@@ -20,7 +20,7 @@ var upgrader = websocket.Upgrader{
 }
 
 // handle /ws route, upgrade HTTP request and forward ws conn to worker
-func websocketHandler(w http.ResponseWriter, r *http.Request) {
+func wsHandler(w http.ResponseWriter, r *http.Request) {
 	conn, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
 		http.Error(w, "Could not open websocket connection", http.StatusBadRequest)
@@ -48,10 +48,3 @@ func handleConnection(conn *websocket.Conn) {
 		}
 	}
 }
-
-func main() {
-	fmt.Println("Launching server...")
-
-	http.HandleFunc("/ws", websocketHandler)
-	http.ListenAndServe(":8081", nil)
-}