From e4aae7e15814be0cc6c238caa818b7487a68ea89 Mon Sep 17 00:00:00 2001
From: notnull <notnull@anarchyplanet.org>
Date: Sun, 14 Jul 2019 09:34:43 -0400
Subject: [PATCH] Typing notification, user socketId saved to state

---
 server/socket/index.js            |   5 ++
 src/assets/default-user-image.png | Bin 0 -> 1494 bytes
 src/components/Chat.js            | 118 +++++++++++++++++++++++-------
 src/socket.js                     |   4 -
 4 files changed, 95 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/default-user-image.png

diff --git a/server/socket/index.js b/server/socket/index.js
index 90fd864..ed152a9 100644
--- a/server/socket/index.js
+++ b/server/socket/index.js
@@ -1,6 +1,7 @@
 module.exports = io => {
   io.on('connection', socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
+    socket.broadcast.emit('user connection', socket.id)
 
     socket.on('disconnect', () => {
       console.log(`${socket.id} has disconnected.`)
@@ -9,5 +10,9 @@ module.exports = io => {
     socket.on('message', message => {
       socket.broadcast.emit('message', message)
     })
+
+    socket.on('typing', () => {
+      socket.broadcast.emit('typing')
+    })
   })
 }
diff --git a/src/assets/default-user-image.png b/src/assets/default-user-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa57ecbf4a92453a98341e424d0f1f6ffbc1cdc3
GIT binary patch
literal 1494
zcmV;{1u6Q8P)<h;3K|Lk000e1NJLTq007|t007|#0{{R332h=s0000pP)t-s#l^+{
z|Np|m!pFzQ^Yioh`T5Gq%I4<g+uPgs_xID&)8XOa@bK{L?Ckvf{K?75*4EYpxRLb$
z00mx2L_t(|ob8<lwyQb}MTw{(wE2(rg>d;Hl_JSH&et9RXW3S>ERw`=9LI4S$8j9T
zaU92S9LI4S$8j9TaU92S91CcH^|wefYD(*>Y_pNJybMM1J2ELL>fwBPB`@nDO`?}c
zMOD6&H_^41I%<tXb(4RT_a`!|V%@Hk7Q>3VnYQjD6iG$9wtNek%KCfvLR9V0cU#9a
zu4Np$efn-1i)b`b-R{?S<$Q@m;_eN4r;Ng^_Qw|RZy5)CiABQ@cm>_4Qjzflo=(_@
zkt(jfE3LJPZ%7Ed+8bE6A+mxaO=>OWJz@f3H)<g!@M><X#k_-WMHh4x-cd}Me()JM
z*H5Laz*F8^OL~O1CcE2dtTjDS9}c!ZgJo@`_vlDoTdP_izeh(J9AiTYdvpZGo(cvt
zk7OwJv`|_?oJ>l?%uM8kwYD3@=c+v$h~Q1Z+26?^6sn!Vk-=JCBAYb50^k#gQ#@P;
zz}BRaY2h2pZH=0@pJ}aYHgr)|m|1VrUU`$APSzPlao`$lAEoU<RCV_gXJduBzT$?l
zLe+p~!q%9QzChzVIE2F1RACxGp=o}h9?^`P4F&2)G&hBorbfJ$|5l-8J&M$0Hdp8h
zT_J`-%M39@;BD+Je%~JkiD^ue3*BPrgl*kBL~il>3T-Q<|AQR=_v<wJ?xHg;>+2g+
z>)R*I3*ZU!h79c-*!+4;{UA2x9Vgn`)V{log!@XL$ZP9km?X8TLWE`v-M|f@D@rwk
z$^iswwzXj_VUnbJv1w<0#XUi_+D&(9t!+jtt~p~YVWMYF&AWyELn(B_Fr*W`MqtyK
zXB7)nd?MBZHU)_=ZR~%@2jBo9_aoAg4MsGxgk+yS!T9<ml1I@#vww$R+d^mEHv0iF
z$8UNk`ju2>6*D+9x<F(VA<y6pRqRa4ymfsIZn9WHuiyyPtODu<eFc+o2-fkcMgu$Z
z;}NQkEn^qYye}$_xQ!g)o!Vxo*t=EFLljf6W+<u3oi??pA{r4%X?djIEi2<VhSU$o
z+xfBqenjMTd-9Tf^vy~&znIbB#@*NbDO0RzK=&$fr|m5@0>(C!l#+Ftyo5WB;v;yV
zrqdjZ($)YPy+^6eEpQGJ0Z^~kG;~2Qs-$x7G}G8iWTy11oUQ%8K;>x#<N1O?UL#ma
z4D$TYa^`?yBh4dLCDh%83Wh|Jiwx;;o?o$;yQ@8U=ZP%1#9(J|CiGbpx<}hX8B}5*
zH}NDfpwkHQu=15~?HNHLnRkSWZWQ}TSLgzT;rgSYK1&SZ`GdUQ{zQmbH6~{Cj=n*q
zBYy!BM8D~@H`O<y-N_I#+<uSptack$|A^{qwm!hq?Nv1YDG=gq`UdoR_|2lVXVjuM
z%_m&DP<tC}>+6>&^+@YJ7Tt%+)tmBz-+iczAwXI}l|_UxGZXU02F6p&h<gnE`4>Bp
z?&pVFLh(fmF)e8?q6&@5hu;w`F7{}ra71#RqW)d>5hU-wgI~jJL-4W&E1bC_7T7@A
znGrc#W3A*PLizx`{fv~YK}wq*5vnX|{Jl{KnI=?NJ2N6;YgBs=xrn^^HoFhqg2WIa
z=uIlJO$jmRz9aCToe;B-Ij~cG@J%YPO`)o!?_gI>!HS5laLbBzy)#?k_SnE5L-s)g
z&F+^lGkv&1@GH#HFuFG!VJQSoe($i-VACG9t+0CCz=P5WR%nWNUGWObU08qoCOAtN
zgP~!Wng}AA5k^!K<cC#!I8)6dQFvV7?<<TTDji`&roh$iCC4k@)?MpcIo{nKi92LC
w#7NvB$06c0lz!)MyJ-X^jETdAjNefB58g>(T5@S>5dZ)H07*qoM6N<$f>VdyqyPW_

literal 0
HcmV?d00001

diff --git a/src/components/Chat.js b/src/components/Chat.js
index ebf2dcf..b59deeb 100644
--- a/src/components/Chat.js
+++ b/src/components/Chat.js
@@ -1,5 +1,7 @@
 import React from 'react'
-import { Form, Row, Col, Button } from 'react-bootstrap'
+import { Form, Row, Col, Button, Card, ListGroup, Image } from 'react-bootstrap'
+//import ScrollToBottom from 'react-scroll-to-bottom'
+import userImage from '../assets/default-user-image.png'
 
 import uuid from 'uuid'
 
@@ -8,20 +10,53 @@ import socket from '../socket'
 class Chat extends React.Component {
   constructor() {
     super()
-    this.state = { text: '', messages: [] }
+    this.state = {
+      text: '',
+      messages: [],
+      user: {},
+    }
     this.handleSubmit = this.handleSubmit.bind(this)
     this.handleChange = this.handleChange.bind(this)
+    this.handleKey = this.handleKey.bind(this)
   }
 
   componentDidMount() {
+    this.scrollToBottom()
+
+    socket.on('typing', () => this.toggleTyping())
     socket.on('message', message => {
       this.addMessage(message)
     })
+    socket.on('user connection', payload =>
+      console.log('a user has logged in:', payload)
+    )
+
+    socket.on('connect', () => {
+      console.log('Connected!')
+      this.setState({ user: { socketId: socket.id } })
+    })
+  }
+
+  componentDidUpdate() {
+    this.scrollToBottom()
+  }
+  scrollToBottom = () => {
+    this.messagesEnd.scrollIntoView({ behavior: 'smooth' })
   }
 
   handleChange(e) {
     this.setState({ [e.target.name]: e.target.value })
   }
+
+  toggleTyping() {
+    if (this.state.typing) return
+    this.setState({ typing: true })
+    setTimeout(() => this.setState({ typing: false }), 2000)
+  }
+
+  handleKey(e) {
+    socket.emit('typing')
+  }
   addMessage(message) {
     const messages = this.state.messages.concat(message)
     this.setState({ messages })
@@ -36,32 +71,59 @@ class Chat extends React.Component {
 
   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>
+      <Card className="mt-5">
+        <Card.Body style={{ height: '60vh' }}>
+          <ListGroup style={{ height: '100%', overflowY: 'hidden' }}>
+            {this.state.messages.map(msg => (
+              <ListGroup.Item key={uuid()} className="my-2">
+                <Image
+                  className={`mx-2 ${
+                    socket.id === this.state.user.socketId ? 'float-right' : ''
+                  }`}
+                  style={{ height: '24px' }}
+                  src={userImage}
+                />
+                {msg.userId}: {msg.text}
+              </ListGroup.Item>
+            ))}
+            <div
+              style={{ float: 'left', clear: 'both' }}
+              ref={el => {
+                this.messagesEnd = el
+              }}
+            />
+          </ListGroup>
+        </Card.Body>
+        <Card.Body>
+          <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}
+                  onKeyDown={this.handleKey}
+                />
+              </Col>
+              <Col xs={1} sm={2}>
+                <Button
+                  type="submit"
+                  variant="dark"
+                  onSubmit={this.handleSubmit}
+                >
+                  Send
+                </Button>
+              </Col>
+            </Form.Group>
+          </Form>
+          {this.state.typing ? (
+            <div style={{ height: '2em' }}>Someone is typing...</div>
+          ) : (
+            <div style={{ height: '2em' }} />
+          )}
+        </Card.Body>
+      </Card>
     )
   }
 }
diff --git a/src/socket.js b/src/socket.js
index a24a88f..2804018 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -2,8 +2,4 @@ import io from 'socket.io-client'
 
 const socket = io(window.location.origin)
 
-socket.on('connect', () => {
-  console.log('Connected!')
-})
-
 export default socket