Added chat window

package.json

@@ -5,13 +5,17 @@
   "dependencies": {
     "bootstrap": "^4.3.1",
     "concurrently": "^4.1.1",
+    "nodemon": "^1.19.1",
     "react": "^16.8.6",
+    "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "socket.io-client": "^2.2.0"
+    "react-scroll-to-bottom": "^1.3.2",
+    "socket.io-client": "^2.2.0",
+    "uuid": "^3.3.2"
   },
   "scripts": {
-    "start": "concurrently --kill-others-on-fail \"react-scripts start\" \"node server\" ",
+    "start": "concurrently --kill-others-on-fail \"react-scripts start\" \"nodemon server\" ",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

server/socket/index.js

@@ -1,10 +1,13 @@
 module.exports = io => {
-  console.log('socket initialized', io)
   io.on('connection', socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
 
     socket.on('disconnect', () => {
-      console.log(`Connection ${socket.id} has left the building`)
+      console.log(`${socket.id} has disconnected.`)
+    })
+
+    socket.on('message', message => {
+      socket.broadcast.emit('message', message)
     })
   })
 }

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react'
-
-const initialState = { loading: true }
+import { Chat } from './components'
+import { Container } from 'react-bootstrap'
+const initialState = { loading: true, messages: [] }
 const initialData = { message: 'Hello, world!' }
 
 class App extends React.Component {
@@ -29,8 +30,11 @@ class App extends React.Component {
     return <div>something went wrong.</div>
   }
 
+  renderMain() {
+    return <Chat {...this.state} />
+  }
   renderApp() {
-    return <div>{this.state.message}</div>
+    return <Container>{this.renderMain()}</Container>
   }
 
   render() {

src/components/Chat.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Form, Row, Col, Button } from 'react-bootstrap'
+
+import uuid from 'uuid'
+
+import socket from '../socket'
+
+class Chat extends React.Component {
+  constructor() {
+    super()
+    this.state = { text: '', messages: [] }
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  componentDidMount() {
+    socket.on('message', message => {
+      this.addMessage(message)
+    })
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.name]: e.target.value })
+  }
+  addMessage(message) {
+    const messages = this.state.messages.concat(message)
+    this.setState({ messages })
+  }
+  handleSubmit(e) {
+    e.preventDefault()
+    const message = { userId: socket.id, id: uuid(), text: this.state.text }
+    const messages = this.state.messages.concat(message)
+    this.setState({ messages, text: '' })
+    socket.emit('message', message)
+  }
+
+  render() {
+    return (
+      <div className="mt-5">
+        <div style={{ height: '30rem' }}>
+          {this.state.messages.map(msg => (
+            <div>
+              {msg.userId}: {msg.text}
+            </div>
+          ))}
+        </div>
+        <Form onSubmit={this.handleSubmit}>
+          <Form.Group as={Row}>
+            <Col xs={9} sm={10}>
+              <Form.Control
+                name="text"
+                autocomplete="off"
+                value={this.state.text}
+                onChange={this.handleChange}
+              />
+            </Col>
+            <Col xs={1} sm={2}>
+              <Button type="submit" variant="dark" onSubmit={this.handleSubmit}>
+                Send
+              </Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </div>
+    )
+  }
+}
+
+export default Chat

src/components/index.js

@@ -0,0 +1 @@
+export { default as Chat } from './Chat'