added SingleMessage, fixed user.socketId

src/components/Chat.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Form, Row, Col, Button, Card, ListGroup, Image } from 'react-bootstrap'
-//import ScrollToBottom from 'react-scroll-to-bottom'
+import SingleMessage from './SingleMessage'
 import userImage from '../assets/default-user-image.png'
 
 import uuid from 'uuid'
@@ -33,7 +33,7 @@ class Chat extends React.Component {
 
     socket.on('connect', () => {
       console.log('Connected!')
-      this.setState({ user: { socketId: socket.id } })
+      this.setState({ user: { socketId: socket.id, userImage } })
     })
   }
 
@@ -63,29 +63,30 @@ class Chat extends React.Component {
   }
   handleSubmit(e) {
     e.preventDefault()
-    const message = { userId: socket.id, id: uuid(), text: this.state.text }
+    const message = { socketId: socket.id, id: uuid(), text: this.state.text }
     const messages = this.state.messages.concat(message)
     this.setState({ messages, text: '' })
     socket.emit('message', message)
   }
 
+  getStatus() {
+    console.log('this is the status')
+  }
   render() {
     return (
       <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}
+            {this.state.messages.map(msg => {
+              return (
+                <SingleMessage
+                  key={uuid()}
+                  user={this.state.user}
+                  socketId={msg.socketId}
+                  text={msg.text}
                 />
-                {msg.userId}: {msg.text}
-              </ListGroup.Item>
-            ))}
+              )
+            })}
             <div
               style={{ float: 'left', clear: 'both' }}
               ref={el => {
@@ -117,11 +118,18 @@ class Chat extends React.Component {
               </Col>
             </Form.Group>
           </Form>
-          {this.state.typing ? (
-            <div style={{ height: '2em' }}>Someone is typing...</div>
-          ) : (
-            <div style={{ height: '2em' }} />
-          )}
+        </Card.Body>
+        <Card.Body>
+          <Row>
+            <Col>{this.state.typing ? 'Someone is typing...' : ''}</Col>
+            <Col>
+              <Image
+                style={{ height: '24px' }}
+                src={this.state.user.userImage}
+              />
+              {this.state.user.socketId}
+            </Col>
+          </Row>
         </Card.Body>
       </Card>
     )

src/components/SingleMessage.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ListGroup, Image } from 'react-bootstrap'
+const SingleMessage = props => {
+  const { user, socketId, text } = props
+
+  if (user.socketId === socketId)
+    return (
+      <ListGroup.Item className="my-2 bg-dark text-white">
+        <div className="float-right">{text}</div>
+      </ListGroup.Item>
+    )
+  return (
+    <ListGroup.Item className="my-2">
+      <Image
+        className={`mx-2`}
+        style={{ height: '24px' }}
+        src={user.userImage}
+      />
+      {user.socketId}: {text}
+    </ListGroup.Item>
+  )
+}
+
+export default SingleMessage