From 5eb1c2d0ae66e27a4c2461b2a7d700bf14a39599 Mon Sep 17 00:00:00 2001 From: hippoz Date: Mon, 4 Oct 2021 22:43:20 +0300 Subject: [PATCH] feat: message history from `message-history` branch --- src/api/gateway/globalGatewayConnection.js | 2 + src/common/store.js | 13 +++++ src/components/channel/ChannelMessageView.js | 51 +++++++++++++++----- src/components/channel/ChannelView.js | 2 +- src/styles/Components/ProfileLink.scss | 2 +- 5 files changed, 57 insertions(+), 13 deletions(-) diff --git a/src/api/gateway/globalGatewayConnection.js b/src/api/gateway/globalGatewayConnection.js index 5de06ec..b1e3f36 100644 --- a/src/api/gateway/globalGatewayConnection.js +++ b/src/api/gateway/globalGatewayConnection.js @@ -18,6 +18,7 @@ const wsCloseCodes = { NOT_AUTHORIZED: [4006, "Not authorized"], FLOODING: [4007, "Flooding"], NO_PING: [4008, "No ping"], + UNSUPPORTED_ATTRIBUTE: [4009, "Unsupported attribute."], }; const cancelReconnectionForCodes = [ wsCloseCodes.NOT_AUTHENTICATED[0], @@ -25,6 +26,7 @@ const cancelReconnectionForCodes = [ wsCloseCodes.SERVER_DENIED_CONNECTION[0], wsCloseCodes.TOO_MANY_SESSIONS[0], wsCloseCodes.FLOODING[0], + wsCloseCodes.UNSUPPORTED_ATTRIBUTE[0], ]; globalGatewayConnection.onopen = (sessionData) => { diff --git a/src/common/store.js b/src/common/store.js index 0f33f6b..b5b304a 100644 --- a/src/common/store.js +++ b/src/common/store.js @@ -54,6 +54,19 @@ const reducer = (state = intitialState, payload) => { }; } + case 'messagestore/addmessagesback': { + return { + ...state, + messages: { + ...state.messages, + [payload.channelId]: [ + ...payload.messages, + ...state.messages[payload.channelId] || [] + ] + } + }; + } + case 'channels/selectchannel': { return { ...state, diff --git a/src/components/channel/ChannelMessageView.js b/src/components/channel/ChannelMessageView.js index ba31574..8a8f3b2 100644 --- a/src/components/channel/ChannelMessageView.js +++ b/src/components/channel/ChannelMessageView.js @@ -1,22 +1,51 @@ -import { useRef, useEffect } from 'react'; +import { useRef, useEffect, useState } from 'react'; +import { useDispatch } from "react-redux"; +import { authenticated } from "../../api/request"; import Message from "../Message"; -export default function ChannelMessageView({messages}) { +export default function ChannelMessageView({ messages, channelId }) { const invisibleBottomMessageRef = useRef(); + const [isLoading, setIsLoading] = useState(false); + const dispatch = useDispatch(); + const scroller = useRef(); + + const loadOlderMessages = () => { + if (isLoading) return; + if (!channelId) return; + setIsLoading(true); + + const request = messages[0] ? `/api/v1/content/channel/${channelId}/messages?before=${messages[0]._id}` : `/api/v1/content/channel/${channelId}/messages`; + + authenticated(request) + .then((res) => { + if (res.json.channelMessages) + dispatch({ + type: "messagestore/addmessagesback", + messages: res.json.channelMessages.reverse(), + channelId + }) + }) + .then(() => { + setIsLoading(false); + }); + }; + + const onScroll = () => { + if (scroller.current.scrollTop === 0) { + loadOlderMessages(); + } + }; + + useEffect(loadOlderMessages, [channelId, dispatch]); + useEffect(() => { invisibleBottomMessageRef.current.scrollIntoView(true); }, [messages]); - let messagesView = messages.map((message) => ()); - if (messagesView === undefined || messagesView.length <= 0) - messagesView = (
- No messages yet... -
); - - return
- { messagesView } + return
+ {messages.map(message => )}
; -} \ No newline at end of file +} diff --git a/src/components/channel/ChannelView.js b/src/components/channel/ChannelView.js index 2801c2b..7da8e2b 100644 --- a/src/components/channel/ChannelView.js +++ b/src/components/channel/ChannelView.js @@ -41,7 +41,7 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
- +
setTextInput(target.value) }>
diff --git a/src/styles/Components/ProfileLink.scss b/src/styles/Components/ProfileLink.scss index e80b46f..1bcda17 100644 --- a/src/styles/Components/ProfileLink.scss +++ b/src/styles/Components/ProfileLink.scss @@ -69,7 +69,7 @@ } .profile-username { - font-weight: 500; + font-weight: 600; font-size: 1rem; line-height: 1.256rem; }