bubble/react-chat-app
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/react-chat-app.git synced 2026-10-11 02:18:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Sergey Yarkov 2020-08-26 07:23:15 +03:00
parent 41719a02ca
commit 88d301d2c3
4 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/components/ChatBox/ChatBox.js
View File

@ -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)}`)
message.value = ''
socket.emit('chat:message', { message: message.value, username: user.username, date: `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}` })
}
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]);

4
client/src/components/EnterChat/EnterChat.js
View File

@ -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 (

12
client/src/components/EnterChat/EnterChat.scss
View File

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

18
server/index.js
View File

@ -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) => {
onlineCounter += 1
io.emit('user:connected', username, onlineCounter)
users.push(socket.id)
console.log(users)
socket.on('user:connected', ({ username }) => {
users.push({ username, socketId: socket.id })
io.emit('user:connected', { username, online: users.length })
})
socket.on('chat:message', (message, username, date) => {
io.emit('chat:message', message, username, date)
socket.on('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)
}
})