From 7f5cf978de80d3ba0686ef68f1974f0e2249d573 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Wed, 26 Aug 2020 17:13:26 +0300 Subject: [PATCH] fixes --- client/src/components/ChatBox/ChatBox.js | 75 +++++-------------- .../ChatBox/ChatContent/ChatContent.js | 29 +++++++ .../components/ChatBox/ChatInput/ChatInput.js | 23 ++++++ .../ChatBox/ChatOnline/ChatOnline.js | 11 +++ server/consumer.js | 22 ++++++ server/index.js | 34 ++------- 6 files changed, 107 insertions(+), 87 deletions(-) create mode 100644 client/src/components/ChatBox/ChatContent/ChatContent.js create mode 100644 client/src/components/ChatBox/ChatInput/ChatInput.js create mode 100644 client/src/components/ChatBox/ChatOnline/ChatOnline.js create mode 100644 server/consumer.js diff --git a/client/src/components/ChatBox/ChatBox.js b/client/src/components/ChatBox/ChatBox.js index c360b7a..f11b77f 100644 --- a/client/src/components/ChatBox/ChatBox.js +++ b/client/src/components/ChatBox/ChatBox.js @@ -1,6 +1,9 @@ import React from 'react'; import { socket } from '../../App' import Header from './Header/Header' +import ChatOnline from "./ChatOnline/ChatOnline"; +import ChatContent from './ChatContent/ChatContent' +import ChatInput from "./ChatInput/ChatInput" import './ChatBox.scss' const ChatBox = ({ user }) => { @@ -19,84 +22,40 @@ const ChatBox = ({ user }) => { socket.emit('chat:message', { message: message.value, username: user.username, date: `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}` }) } - const ChatContent = () => { - return ( -
- {messages.map((client, i) => { - return ( -
- {client.date !== null ?
-
-

- {client.username} - {client.date} -

-
-
- {client.message} -
-
:
- {client.message} -
} -
- ) - })} -
- ) - } - - const ChatOnline = () => { - return ( -
- Online: {online} -
- ) - } - - const ChatInput = () => { - - const handleInputChange = e => { - setInputMessage(e.target.value) - } - - return ( -
-
- handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/> - -
-
- ) - } + const scrollChatToBottom = (chatContentElement) => chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight React.useEffect(() => { socket.on('chat:message', ({ message, username, date }) => { setMessages(messages => ([...messages, { message, username, date }])) - chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight - // inputMessageElement.current.focus() + scrollChatToBottom(chatContentElement) + inputMessageElement.current.focus() + setInputMessage('') }) socket.on('user:connected', ({ username, online }) => { setOnline(online) setMessages(messages => ([...messages, { message: `${username} joined!`, username, date: null }])) + scrollChatToBottom(chatContentElement) }) socket.on('user:disConnected', ({ username, online }) => { setOnline(online) setMessages(messages => ([...messages, { message: `${username} left!`, username, date: null }])) + scrollChatToBottom(chatContentElement) }) }, [setMessages, setOnline]); return (
- - - + + +
) } diff --git a/client/src/components/ChatBox/ChatContent/ChatContent.js b/client/src/components/ChatBox/ChatContent/ChatContent.js new file mode 100644 index 0000000..b2b0071 --- /dev/null +++ b/client/src/components/ChatBox/ChatContent/ChatContent.js @@ -0,0 +1,29 @@ +import React from 'react' + +const ChatContent = ({ chatContentElement, messages }) => { + return ( +
+ {messages.map((client, i) => { + return ( +
+ {client.date !== null ?
+
+

+ {client.username} + {client.date} +

+
+
+ {client.message} +
+
:
+ {client.message} +
} +
+ ) + })} +
+ ) +} + +export default ChatContent \ No newline at end of file diff --git a/client/src/components/ChatBox/ChatInput/ChatInput.js b/client/src/components/ChatBox/ChatInput/ChatInput.js new file mode 100644 index 0000000..8a46caa --- /dev/null +++ b/client/src/components/ChatBox/ChatInput/ChatInput.js @@ -0,0 +1,23 @@ +import React from "react" + +const ChatInput = ({ setInputMessage, sendMessage, inputMessageElement, inputMessage }) => { + + const handleInputChange = e => { + setInputMessage(e.target.value) + } + + return ( +
+
+ handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/> + +
+
+ ) +} + +export default ChatInput \ No newline at end of file diff --git a/client/src/components/ChatBox/ChatOnline/ChatOnline.js b/client/src/components/ChatBox/ChatOnline/ChatOnline.js new file mode 100644 index 0000000..03c6bf3 --- /dev/null +++ b/client/src/components/ChatBox/ChatOnline/ChatOnline.js @@ -0,0 +1,11 @@ +import React from "react" + +const ChatOnline = ({ online }) => { + return ( +
+ Online: {online} +
+ ) +} + +export default ChatOnline \ No newline at end of file diff --git a/server/consumer.js b/server/consumer.js new file mode 100644 index 0000000..6b7523c --- /dev/null +++ b/server/consumer.js @@ -0,0 +1,22 @@ +module.exports = { + start: (io) => { + io.on('connection', (socket) => { + 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('disconnecting', () => { + 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) + } + }) + }) + } +} \ No newline at end of file diff --git a/server/index.js b/server/index.js index 3b4d31f..b15b244 100644 --- a/server/index.js +++ b/server/index.js @@ -1,37 +1,13 @@ const server = require('express')() const http = require('http').createServer(server) const io = require('socket.io')(http) - +const consumer = require('./consumer') const PORT = process.env.PORT || 3001 +global.users = [] -server.get('/', (req, res) => { - res.send('React Chat API') -}) +consumer.start(io) -const users = [] +server.get('/', (req, res) => res.json({ users })) -io.on('connection', (socket) => { - - 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('disconnecting', () => { - 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) - } - }) -}) - -http.listen(PORT, () => { - console.log(`Server running on port: ${PORT}`) -}) \ No newline at end of file +http.listen(PORT, () => console.log(`Server running on port: ${PORT}`)) \ No newline at end of file