date synced

.gitignore

@@ -1 +1,2 @@
 node_modules
+.idea

client/src/components/ChatBox/ChatBox.js

@@ -12,24 +12,25 @@ const ChatBox = ({ user }) => {
   const sendMessage = e => {
     e.preventDefault()
     const message = e.target.elements.message
+    const date = new Date()
 
-    socket.emit('chat:message', message.value, user.username)
+    socket.emit('chat:message', message.value, user.username, `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}`)
     message.value = ''
   }
 
   const ChatContent = () => <div ref={chatContentElement} className="chat-content">
-    {messages.map((obj, i) => {
+    {messages.map((client, i) => {
-      const date = new Date()
+
       return (
         <div key={i} className='message'>
           <div className="message-username">
             <p>
-              {obj.username}
+              {client.username}
-              <span>{`${date.getHours()}:${date.getMinutes()}`}</span>
+              <span>{client.date}</span>
             </p>
           </div>
           <div className="message-text">
-            {obj.message}
+            {client.message}
           </div>
         </div>
       )
@@ -52,8 +53,8 @@ const ChatBox = ({ user }) => {
   }
 
   React.useEffect(() => {
-    socket.on('chat:message', (message, username) => {
+    socket.on('chat:message', (message, username, date) => {
-      setMessages(messages => ([...messages, { message, username }]))
+      setMessages(messages => ([...messages, { message, username, date }]))
       chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
       inputMessageElement.current.focus()
     })

client/src/components/EnterChat/EnterChat.js

@@ -15,12 +15,17 @@ const EnterChat = ({ setUser }) => {
       return
     }
 
+    if (username.match(/\d/)) {
+      setAuthError({ status: true, message: '*Numbers are not allowed!' })
+      return
+    }
+
     if (username.length >= maxUserameLength) {
       setAuthError({ status: true, message: `*Max username length: ${maxUserameLength}` })
       return
     }
 
-    setUser({ username: username, isLoggedIn: true })
+    setUser({ username: username[0].toUpperCase() + username.slice(1), isLoggedIn: true })
     setAuthError({ status: false, message: '' })
   }
 

package.json

@@ -10,6 +10,9 @@
     "type": "git",
     "url": "git+https://github.com/sergeyyarkov/react-chat-app.git"
   },
+  "dependencies": {
+    "concurrently": "^5.3.0"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

server/index.js

@@ -9,8 +9,8 @@ server.get('/', (req, res) => {
 })
 
 io.on('connection', (socket) => {
-  socket.on('chat:message', (message, username) => {
+  socket.on('chat:message', (message, username, date) => {
-    io.emit('chat:message', message, username)
+    io.emit('chat:message', message, username, date)
   })
 })