From 5eb1c2d0ae66e27a4c2461b2a7d700bf14a39599 Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
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) => (<Message key={message._id} message={message} />));
-    if (messagesView === undefined || messagesView.length <= 0) 
-        messagesView = (<div className='no-messages-warning'>
-            <span style={{ margin: "12px" }}>No messages yet...</span>
-        </div>);
-
-    return <div className="message-list">
-        { messagesView }
+    return <div className="message-list" id="message-list" ref={ scroller } onScroll={ onScroll }>
+        {messages.map(message => <Message message={message} key={message._id} />)}
         <div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
     </div>;
-}
\ 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 }) => {
 
                 <div className="row-flex hidden-overflow">
                     <div className="channel-message-panel">
-                        <ChannelMessageView messages={messages}></ChannelMessageView>
+                        <ChannelMessageView messages={messages} channelId={channel._id}></ChannelMessageView>
                         <div className="col-flex">
                             <input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
                         </div>
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;
 }