diff --git a/client/src/App.js b/client/src/App.js index d9c4a04..0b816c4 100644 --- a/client/src/App.js +++ b/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 ( - + {user.username.trim() !== '' && user.isLoggedIn ? : } diff --git a/client/src/components/ChatBox/ChatBox.js b/client/src/components/ChatBox/ChatBox.js index 054609d..fac42f8 100644 --- a/client/src/components/ChatBox/ChatBox.js +++ b/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 = () =>
{messages.map((message, i) =>
{message}
)}
+ const ChatContent = () =>
+ {messages.map((obj, i) => { + const date = new Date() + return ( +
+
+

+ {obj.username} + {`${date.getHours()}:${date.getMinutes()}`} +

+
+
+ {obj.message} +
+
+ ) + })} +
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() }) diff --git a/client/src/components/ChatBox/ChatBox.scss b/client/src/components/ChatBox/ChatBox.scss index dba4464..c9a2f1a 100644 --- a/client/src/components/ChatBox/ChatBox.scss +++ b/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 { diff --git a/client/src/components/EnterChat/EnterChat.js b/client/src/components/EnterChat/EnterChat.js index e69de29..7650043 100644 --- a/client/src/components/EnterChat/EnterChat.js +++ b/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 ( +
+
+

React Chat

+

A simple react chat application

+
+ {authError.status ?
{authError.message}
: null} +
+
+ + +
+
+
+ + + +
+
+ ) +} + +export default EnterChat \ No newline at end of file diff --git a/client/src/components/EnterChat/EnterChat.scss b/client/src/components/EnterChat/EnterChat.scss new file mode 100644 index 0000000..6d8d02e --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 4b0bc90..29e5c6d 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -40,4 +40,19 @@ h1,h2,h3,h4,h5,h6,p { max-width: 820px; 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; + } } \ No newline at end of file diff --git a/server/index.js b/server/index.js index fbfb658..bb5a006 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 => { - io.emit('chat:message', message) + socket.on('chat:message', (message, username) => { + io.emit('chat:message', message, username) }) })