restructure

src/components/Chat.js

@@ -1,10 +1,13 @@
 import React from 'react'
-import { Form, Row, Col, Button, Card, ListGroup, Image } from 'react-bootstrap'
-import SingleMessage from './SingleMessage'
+import { Card } from 'react-bootstrap'
+
+import Messages from './Messages'
+import MessageEntry from './MessageEntry'
+import ControlPanel from './ControlPanel'
+
 import userImage from '../assets/default-user-image.png'
 
 import uuid from 'uuid'
-
 import socket from '../socket'
 
 class Chat extends React.Component {
@@ -18,11 +21,10 @@ class Chat extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleKey = this.handleKey.bind(this)
+    this.toggleNick = this.toggleNick.bind(this)
   }
 
   componentDidMount() {
-    this.scrollToBottom()
-
     socket.on('typing', () => this.toggleTyping())
     socket.on('message', message => {
       this.addMessage(message)
@@ -33,34 +35,21 @@ class Chat extends React.Component {
 
     socket.on('connect', () => {
       console.log('Connected!')
-      this.setState({ user: { socketId: socket.id, userImage } })
+      this.setState({
+        user: { socketId: socket.id, userImage },
+        userNick: socket.id,
+      })
     })
   }
 
-  componentDidUpdate() {
-    this.scrollToBottom()
-  }
-  scrollToBottom = () => {
-    this.messagesEnd.scrollIntoView({ behavior: 'smooth' })
+  handleKey(e) {
+    socket.emit('typing')
   }
 
   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 })
-  }
   handleSubmit(e) {
     e.preventDefault()
     const message = { socketId: socket.id, id: uuid(), text: this.state.text }
@@ -69,68 +58,43 @@ class Chat extends React.Component {
     socket.emit('message', message)
   }
 
-  getStatus() {
-    console.log('this is the status')
+  toggleTyping() {
+    if (this.state.typing) return
+    this.setState({ typing: true })
+    setTimeout(() => this.setState({ typing: false }), 2000)
   }
+
+  addMessage(message) {
+    const messages = this.state.messages.concat(message)
+    this.setState({ messages })
+  }
+
+  toggleNick() {
+    this.setState({ editNick: !this.state.editNick })
+  }
+
   render() {
     return (
-      <Card className="mt-5">
-        <Card.Body style={{ height: '60vh' }}>
-          <ListGroup style={{ height: '100%', overflowY: 'hidden' }}>
-            {this.state.messages.map(msg => {
-              return (
-                <SingleMessage
-                  key={uuid()}
-                  user={this.state.user}
-                  socketId={msg.socketId}
-                  text={msg.text}
-                />
-              )
-            })}
-            <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>
-        </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 style={{ height: '90vh' }} className="mt-5">
+        <Messages
+          user={this.state.user}
+          messages={this.state.messages}
+          messagesEnd={this.messagesEnd}
+        />
+        <MessageEntry
+          handleSubmit={this.handleSubmit}
+          handleChange={this.handleChange}
+          handleKey={this.handleKey}
+          text={this.state.text}
+        />
+        <ControlPanel
+          typing={this.state.typing}
+          userNick={this.state.userNick}
+          userImage={userImage}
+          handleChange={this.handleChange}
+          editNick={this.editNick}
+          toggleNick={this.toggleNick}
+        />
       </Card>
     )
   }

src/components/ControlPanel.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Card, Image, Row, Col } from 'react-bootstrap'
+
+const ControlPanel = props => {
+  const {
+    typing,
+    userNick,
+    userImage,
+    handleChange,
+    editNick,
+    toggleNick,
+  } = props
+  return (
+    <Card.Body>
+      <Row>
+        <Col>{typing ? 'Someone is typing...' : ''}</Col>
+        <Col>
+          <div variant="secondary" onClick={toggleNick}>
+            <div className="float-right">
+              <Image style={{ height: '24px' }} src={userImage} />
+            </div>
+            <input
+              value={userNick}
+              name="userNick"
+              onChange={handleChange}
+              className={editNick ? '' : 'plaintext'}
+              onSubmit={toggleNick}
+            />
+          </div>
+        </Col>
+      </Row>
+    </Card.Body>
+  )
+}
+
+export default ControlPanel

src/components/MessageEntry.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Card, Form, Row, Col, Button } from 'react-bootstrap'
+
+const MessageEntry = props => {
+  const { handleSubmit, handleChange, handleKey, text } = props
+  return (
+    <Card.Body>
+      <Form onSubmit={handleSubmit}>
+        <Form.Group as={Row}>
+          <Col xs={9} sm={10} md={10} lg={10}>
+            <Form.Control
+              name="text"
+              autoComplete="off"
+              value={text}
+              onChange={handleChange}
+              onKeyDown={handleKey}
+            />
+          </Col>
+          <Col xs={1} sm={2} md={2} lg={2}>
+            <Button type="submit" variant="dark" onSubmit={handleSubmit}>
+              Send
+            </Button>
+          </Col>
+        </Form.Group>
+      </Form>
+    </Card.Body>
+  )
+}
+
+export default MessageEntry

src/components/Messages.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Card, ListGroup } from 'react-bootstrap'
+import SingleMessage from './SingleMessage'
+import uuid from 'uuid'
+
+class Messages extends React.Component {
+  constructor() {
+    super()
+    this.state = {}
+  }
+
+  componentDidMount() {
+    this.scrollToBottom()
+  }
+
+  componentDidUpdate() {
+    this.scrollToBottom()
+  }
+
+  scrollToBottom = () => {
+    this.messagesEnd.scrollIntoView({ behavior: 'smooth' })
+  }
+  render() {
+    const { user, messages } = this.props
+
+    return (
+      <Card.Body style={{ height: '60%' }}>
+        <ListGroup style={{ height: '100%', overflowY: 'hidden' }}>
+          {messages.map(msg => {
+            return (
+              <SingleMessage
+                key={uuid()}
+                user={user}
+                socketId={msg.socketId}
+                text={msg.text}
+              />
+            )
+          })}
+
+          <div
+            style={{ float: 'left', clear: 'both' }}
+            ref={el => {
+              this.messagesEnd = el
+            }}
+          />
+        </ListGroup>
+      </Card.Body>
+    )
+  }
+}
+
+export default Messages