From 1b9a4ebb224f641ff5085a37dc7d6d27d3406f76 Mon Sep 17 00:00:00 2001
From: sergeyyarkov <serzh.yarkov@gmail.com>
Date: Tue, 25 Aug 2020 04:24:33 +0300
Subject: [PATCH] date synced

---
 .gitignore                                   |  1 +
 client/src/components/ChatBox/ChatBox.js     | 17 +++++++++--------
 client/src/components/EnterChat/EnterChat.js |  7 ++++++-
 package.json                                 |  3 +++
 server/index.js                              |  4 ++--
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3c3629e..eb79dd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 node_modules
+.idea
diff --git a/client/src/components/ChatBox/ChatBox.js b/client/src/components/ChatBox/ChatBox.js
index fac42f8..dccb6d7 100644
--- a/client/src/components/ChatBox/ChatBox.js
+++ b/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) => {
-      const date = new Date()
+    {messages.map((client, i) => {
+
       return (
         <div key={i} className='message'>
           <div className="message-username">
             <p>
-              {obj.username}
-              <span>{`${date.getHours()}:${date.getMinutes()}`}</span>
+              {client.username}
+              <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) => {
-      setMessages(messages => ([...messages, { message, username }]))
+    socket.on('chat:message', (message, username, date) => {
+      setMessages(messages => ([...messages, { message, username, date }]))
       chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
       inputMessageElement.current.focus()
     })
diff --git a/client/src/components/EnterChat/EnterChat.js b/client/src/components/EnterChat/EnterChat.js
index 7650043..e8e83dc 100644
--- a/client/src/components/EnterChat/EnterChat.js
+++ b/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: '' })
   }
 
diff --git a/package.json b/package.json
index 2fec09c..13fa5ea 100644
--- a/package.json
+++ b/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",
diff --git a/server/index.js b/server/index.js
index bb5a006..b016825 100644
--- a/server/index.js
+++ b/server/index.js
@@ -9,8 +9,8 @@ server.get('/', (req, res) => {
 })
 
 io.on('connection', (socket) => {
-  socket.on('chat:message', (message, username) => {
-    io.emit('chat:message', message, username)
+  socket.on('chat:message', (message, username, date) => {
+    io.emit('chat:message', message, username, date)
   })
 })