refactor

client/src/components/ChatBox/ChatBox.js

@@ -5,7 +5,9 @@ import './ChatBox.scss'
 
 const ChatBox = ({ user }) => {
   const [online, setOnline] = React.useState(0)
+  const [inputMessage, setInputMessage] = React.useState('')
   const [messages, setMessages] = React.useState([])
+
   const chatContentElement = React.useRef(null)
   const inputMessageElement = React.useRef(null)
 
@@ -14,8 +16,7 @@ const ChatBox = ({ user }) => {
     const message = e.target.elements.message
     const date = new Date()
 
-    socket.emit('chat:message', message.value, user.username, `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}`)
+    socket.emit('chat:message', { message: message.value, username: user.username, date: `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}` })
-    message.value = ''
   }
 
   const ChatContent = () => {
@@ -53,10 +54,15 @@ const ChatBox = ({ user }) => {
   }
 
   const ChatInput = () => {
+
+    const handleInputChange = e => {
+      setInputMessage(e.target.value)
+    }
+
     return (
       <div className="chat-input">
         <form onSubmit={sendMessage}>
-          <input ref={inputMessageElement} required type="text" name='message' placeholder='Type your message...'/>
+          <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"/>
@@ -68,15 +74,20 @@ const ChatBox = ({ user }) => {
   }
 
   React.useEffect(() => {
-    socket.on('chat:message', (message, username, date) => {
+    socket.on('chat:message', ({ message, username, date }) => {
       setMessages(messages => ([...messages, { message, username, date }]))
       chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
-      inputMessageElement.current.focus()
+      // inputMessageElement.current.focus()
     })
 
-    socket.on('user:connected', (username, online) => {
+    socket.on('user:connected', ({ username, online }) => {
       setOnline(online)
-      setMessages(messages => ([...messages, { message: `${username} Joined!`, username, date: null }]))
+      setMessages(messages => ([...messages, { message: `${username} joined!`, username, date: null }]))
+    })
+
+    socket.on('user:disConnected', ({ username, online }) => {
+      setOnline(online)
+      setMessages(messages => ([...messages, { message: `${username} left!`, username, date: null }]))
     })
   }, [setMessages, setOnline]);
 

client/src/components/EnterChat/EnterChat.js

@@ -8,7 +8,7 @@ const EnterChat = ({ setUser }) => {
 
   const loginHandler = e => {
     e.preventDefault()
-    const username = e.target.elements.username.value.trim()[0].toUpperCase() + e.target.elements.username.value.trim().slice(1)
+    const username = e.target.elements.username.value.trim()[0].toUpperCase() + e.target.elements.username.value.trim().slice(1).toLowerCase()
     const maxUsernameLength = 20
 
     if (username === '') {
@@ -28,7 +28,7 @@ const EnterChat = ({ setUser }) => {
 
     setUser({ username, isLoggedIn: true })
     setAuthError({ status: false, message: '' })
-    socket.emit('user:connected', username)
+    socket.emit('user:connected', { username })
   }
 
   return (

client/src/components/EnterChat/EnterChat.scss

@@ -37,4 +37,16 @@
   & .enter-footer {
     margin-top: 25px;
   }
+}
+
+@media (max-width: 574px){
+ .enter {
+   & .enter-form {
+     & form {
+       & input {
+         width: 100%;
+       }
+     }
+   }
+ }
 }

server/index.js

@@ -9,26 +9,24 @@ server.get('/', (req, res) => {
   res.send('React Chat API')
 })
 
+const users = []
 
 io.on('connection', (socket) => {
-  const users = []
-  let onlineCounter = 0
 
-  socket.on('user:connected', (username) => {
+  socket.on('user:connected', ({ username }) => {
-    onlineCounter += 1
+    users.push({ username, socketId: socket.id })
-    io.emit('user:connected', username, onlineCounter)
+    io.emit('user:connected', { username, online: users.length })
-    users.push(socket.id)
-    console.log(users)
   })
 
-  socket.on('chat:message', (message, username, date) => {
+  socket.on('chat:message', ({ message, username, date }) => {
-    io.emit('chat:message', message, username, date)
+    io.emit('chat:message', { message, username, date })
   })
 
   socket.on('disconnecting', () => {
-    const userIndex = users.findIndex((id) => socket.id === id)
+    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)
     }
   })