fixes

client/src/components/ChatBox/ChatBox.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { socket } from '../../App'
 import Header from './Header/Header'
+import ChatOnline from "./ChatOnline/ChatOnline";
+import ChatContent from './ChatContent/ChatContent'
+import ChatInput from "./ChatInput/ChatInput"
 import './ChatBox.scss'
 
 const ChatBox = ({ user }) => {
@@ -19,84 +22,40 @@ const ChatBox = ({ user }) => {
     socket.emit('chat:message', { message: message.value, username: user.username, date: `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}` })
   }
 
-  const ChatContent = () => {
+  const scrollChatToBottom = (chatContentElement) => chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
-    return (
-        <div ref={chatContentElement} className="chat-content">
-          {messages.map((client, i) => {
-            return (
-                <div key={i}>
-                  {client.date !== null ? <div className='message'>
-                    <div className="message-username">
-                      <p>
-                        {client.username}
-                        <span>{client.date}</span>
-                      </p>
-                    </div>
-                    <div className="message-text">
-                      {client.message}
-                    </div>
-                  </div> : <div className='info'>
-                    <span>{client.message}</span>
-                  </div>}
-              </div>
-            )
-          })}
-        </div>
-    )
-  }
-
-  const ChatOnline = () => {
-    return (
-        <div className='chat-online'>
-          <span>Online: {online}</span>
-        </div>
-    )
-  }
-
-  const ChatInput = () => {
-
-    const handleInputChange = e => {
-      setInputMessage(e.target.value)
-    }
-
-    return (
-      <div className="chat-input">
-        <form onSubmit={sendMessage}>
-          <input ref={inputMessageElement} onChange={(e) => handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/>
-          <button>
-            <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M23.5111 9.27032L3.34053 0.900689C2.49077 0.548052 1.53076 0.703179 0.835207 1.30533C0.139651 1.90757 -0.151267 2.8355 0.0760766 3.72696L1.87144 10.7676H10.6618C11.0663 10.7676 11.3942 11.0955 11.3942 11.5001C11.3942 11.9045 11.0663 12.2325 10.6618 12.2325H1.87144L0.0760766 19.2731C-0.151267 20.1646 0.139602 21.0925 0.835207 21.6947C1.53218 22.2981 2.49229 22.4513 3.34058 22.0994L23.5112 13.7298C24.4295 13.3487 25 12.4943 25 11.5001C25 10.5058 24.4295 9.65132 23.5111 9.27032Z" fill="#0070F3"/>
-            </svg>
-          </button>
-        </form>
-      </div>
-    )
-  }
 
   React.useEffect(() => {
     socket.on('chat:message', ({ message, username, date }) => {
       setMessages(messages => ([...messages, { message, username, date }]))
-      chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
+      scrollChatToBottom(chatContentElement)
-      // inputMessageElement.current.focus()
+      inputMessageElement.current.focus()
+      setInputMessage('')
     })
 
     socket.on('user:connected', ({ username, online }) => {
       setOnline(online)
       setMessages(messages => ([...messages, { message: `${username} joined!`, username, date: null }]))
+      scrollChatToBottom(chatContentElement)
     })
 
     socket.on('user:disConnected', ({ username, online }) => {
       setOnline(online)
       setMessages(messages => ([...messages, { message: `${username} left!`, username, date: null }]))
+      scrollChatToBottom(chatContentElement)
     })
   }, [setMessages, setOnline]);
 
   return (
     <div className="chat">
       <Header />
-      <ChatOnline />
+      <ChatOnline online={online} />
-      <ChatContent />
+      <ChatContent chatContentElement={chatContentElement} messages={messages} />
-      <ChatInput />
+      <ChatInput
+        inputMessageElement={inputMessageElement}
+        inputMessage={inputMessage}
+        setInputMessage={setInputMessage}
+        sendMessage={sendMessage}
+      />
     </div>
   )
 }

client/src/components/ChatBox/ChatContent/ChatContent.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const ChatContent = ({ chatContentElement, messages }) => {
+  return (
+    <div ref={chatContentElement} className="chat-content">
+      {messages.map((client, i) => {
+        return (
+          <div key={i}>
+            {client.date !== null ? <div className='message'>
+              <div className="message-username">
+                <p>
+                  {client.username}
+                  <span>{client.date}</span>
+                </p>
+              </div>
+              <div className="message-text">
+                {client.message}
+              </div>
+            </div> : <div className='info'>
+              <span>{client.message}</span>
+            </div>}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ChatContent

client/src/components/ChatBox/ChatInput/ChatInput.js

@@ -0,0 +1,23 @@
+import React from "react"
+
+const ChatInput = ({ setInputMessage, sendMessage, inputMessageElement, inputMessage }) => {
+
+  const handleInputChange = e => {
+    setInputMessage(e.target.value)
+  }
+
+  return (
+    <div className="chat-input">
+      <form onSubmit={sendMessage}>
+        <input ref={inputMessageElement} onChange={(e) => handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/>
+        <button>
+          <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M23.5111 9.27032L3.34053 0.900689C2.49077 0.548052 1.53076 0.703179 0.835207 1.30533C0.139651 1.90757 -0.151267 2.8355 0.0760766 3.72696L1.87144 10.7676H10.6618C11.0663 10.7676 11.3942 11.0955 11.3942 11.5001C11.3942 11.9045 11.0663 12.2325 10.6618 12.2325H1.87144L0.0760766 19.2731C-0.151267 20.1646 0.139602 21.0925 0.835207 21.6947C1.53218 22.2981 2.49229 22.4513 3.34058 22.0994L23.5112 13.7298C24.4295 13.3487 25 12.4943 25 11.5001C25 10.5058 24.4295 9.65132 23.5111 9.27032Z" fill="#0070F3"/>
+          </svg>
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default ChatInput

client/src/components/ChatBox/ChatOnline/ChatOnline.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+const ChatOnline = ({ online }) => {
+  return (
+    <div className='chat-online'>
+      <span>Online: {online}</span>
+    </div>
+  )
+}
+
+export default ChatOnline

server/consumer.js

@@ -0,0 +1,22 @@
+module.exports = {
+  start: (io) => {
+    io.on('connection', (socket) => {
+      socket.on('user:connected', ({ username }) => {
+        users.push({ username, socketId: socket.id })
+        io.emit('user:connected', { username, online: users.length })
+      })
+
+      socket.on('chat:message', ({ message, username, date }) => {
+        io.emit('chat:message', { message, username, date })
+      })
+
+      socket.on('disconnecting', () => {
+        const userIndex = users.findIndex((user) => socket.id === user.socketId)
+        if (userIndex !== -1) {
+          io.emit('user:disConnected', { username: users[userIndex].username, online: users.length - 1 })
+          users.splice(userIndex, 1)
+        }
+      })
+    })
+  }
+}

server/index.js

@@ -1,37 +1,13 @@
 const server = require('express')()
 const http = require('http').createServer(server)
 const io = require('socket.io')(http)
-
+const consumer = require('./consumer')
 const PORT = process.env.PORT || 3001
 
+global.users = []
 
-server.get('/', (req, res) => {
+consumer.start(io)
-  res.send('React Chat API')
-})
 
-const users = []
+server.get('/', (req, res) => res.json({ users }))
 
-io.on('connection', (socket) => {
+http.listen(PORT, () => console.log(`Server running on port: ${PORT}`))
-
-  socket.on('user:connected', ({ username }) => {
-    users.push({ username, socketId: socket.id })
-    io.emit('user:connected', { username, online: users.length })
-  })
-
-  socket.on('chat:message', ({ message, username, date }) => {
-    io.emit('chat:message', { message, username, date })
-  })
-
-  socket.on('disconnecting', () => {
-    const userIndex = users.findIndex((user) => socket.id === user.socketId)
-
-    if (userIndex !== -1) {
-      io.emit('user:disConnected', { username: users[userIndex].username, online: users.length - 1 })
-      users.splice(userIndex, 1)
-    }
-  })
-})
-
-http.listen(PORT, () => {
-  console.log(`Server running on port: ${PORT}`)
-})