added users

client/src/App.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import io from 'socket.io-client'
 import { Grid, Row, Col } from "react-flexbox-grid"
+import EnterChat from './components/EnterChat/EnterChat'
 import ChatBox from './components/ChatBox/ChatBox'
 
 const socket = io('http://localhost:3001')
 
 const App = () => {
+  const [user, setUser] = React.useState({ username: '', isLoggedIn: false })
+
   return (
     <Grid fluid>
       <Row>
         <Col xs={12}>
-          <ChatBox />
+          {user.username.trim() !== '' && user.isLoggedIn ? <ChatBox user={user} /> : <EnterChat setUser={setUser} />}
         </Col>
       </Row>
     </Grid>

client/src/components/ChatBox/ChatBox.js

@@ -3,7 +3,7 @@ import { socket } from '../../App'
 import Header from './Header/Header'
 import './ChatBox.scss'
 
-const ChatBox = () => {
+const ChatBox = ({ user }) => {
 
   const [messages, setMessages] = React.useState([])
   const chatContentElement = React.useRef(null)
@@ -13,11 +13,28 @@ const ChatBox = () => {
     e.preventDefault()
     const message = e.target.elements.message
 
-    socket.emit('chat:message', message.value)
+    socket.emit('chat:message', message.value, user.username)
     message.value = ''
   }
 
-  const ChatContent = () => <div ref={chatContentElement} className="chat-content">{messages.map((message, i) => <div key={i} className='message'>{message}</div>)}</div>
+  const ChatContent = () => <div ref={chatContentElement} className="chat-content">
+    {messages.map((obj, i) => {
+      const date = new Date()
+      return (
+        <div key={i} className='message'>
+          <div className="message-username">
+            <p>
+              {obj.username}
+              <span>{`${date.getHours()}:${date.getMinutes()}`}</span>
+            </p>
+          </div>
+          <div className="message-text">
+            {obj.message}
+          </div>
+        </div>
+      )
+    })}
+  </div>
 
   const ChatInput = () => {
     return (
@@ -35,8 +52,8 @@ const ChatBox = () => {
   }
 
   React.useEffect(() => {
-    socket.on('chat:message', message => {
-      setMessages(messages => ([...messages,  message]))
+    socket.on('chat:message', (message, username) => {
+      setMessages(messages => ([...messages, { message, username }]))
       chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
       inputMessageElement.current.focus()
     })

client/src/components/ChatBox/ChatBox.scss

@@ -8,7 +8,28 @@
     height: 370px;
     overflow-y: scroll;
     & .message {
-      word-wrap: break-word;
+      margin-bottom: 15px;
+      & .message-username {
+        & p {
+          color: #222222;
+          font-size: 15px;
+          margin-bottom: 5px;
+        }
+        & span {
+          margin-left: 7px;
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+      & .message-text {
+        background: #0070F3;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
+        border-radius: 0px 7px 7px 7px;
+        color: #fff;
+        display: inline-block;
+        overflow-wrap: anywhere;
+        padding: 7px 10px;
+      }
     }
   }
   & .chat-content, & .chat-input {

client/src/components/EnterChat/EnterChat.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import './EnterChat.scss'
+
+const EnterChat = ({ setUser }) => {
+
+  const [authError, setAuthError] = React.useState({ status: false, message: '' })
+
+  const loginHandler = e => {
+    e.preventDefault()
+    const username = e.target.elements.username.value.trim()
+    const maxUserameLength = 20
+
+    if (username === '') {
+      setAuthError({ status: true, message: '*Invalid username!' })
+      return
+    }
+
+    if (username.length >= maxUserameLength) {
+      setAuthError({ status: true, message: `*Max username length: ${maxUserameLength}` })
+      return
+    }
+
+    setUser({ username: username, isLoggedIn: true })
+    setAuthError({ status: false, message: '' })
+  }
+
+  return (
+    <div className="enter">
+      <div className="enter-heading">
+        <h1>React Chat</h1>
+        <p>A simple react chat application</p>
+      </div>
+      {authError.status ? <div className='enter-error'><span>{authError.message}</span></div> : null}
+      <div className="enter-form">
+        <form onSubmit={loginHandler}>
+          <input required placeholder='Your name' name='username' type="text"/>
+          <button type='submit' className='btn-primary'>Join</button>
+        </form>
+      </div>
+      <div className="enter-footer">
+        <a href="https://github.com/sergeyyarkov/react-chat-app" target='_blank' rel='noopener noreferrer'>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default EnterChat

client/src/components/EnterChat/EnterChat.scss

@@ -0,0 +1,40 @@
+.enter {
+  margin-top: 4rem; 
+  text-align: center;
+  & .enter-heading {
+    & h1 {
+      font-size: 36px;
+      margin-bottom: 5px;
+      font-weight: 600;
+    }
+    & p {
+      font-size: 16px;
+    }
+    margin-bottom: 20px;
+  }
+  & .enter-error {
+    color: #f83434;
+    margin-bottom: 10px;
+  }
+  & .enter-form {
+    & form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      & input {
+        height: 40px;
+        width: 460px;
+        border-radius: 5px;
+        padding: 0 7px;
+        border: 1px solid #B8B8B8; 
+        display: block;
+      }
+      & button {
+        margin-top: 15px;
+      }
+    }
+  }
+  & .enter-footer {
+    margin-top: 25px;
+  }
+}

client/src/styles/global.scss

@@ -41,3 +41,18 @@ h1,h2,h3,h4,h5,h6,p {
   margin-left: auto;
   margin-right: auto;
 }
+
+.btn-primary {
+  height: 35px;
+  background: #0070F3;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
+  border-radius: 7px;
+  border: none;
+  color: #fff;
+  padding: 0 30px;
+  cursor: pointer;
+  transition: all .1s;
+  &:hover {
+    background: #2484f3;
+  }
+}

server/index.js

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