feat: message history from message-history branch

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) => {

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,

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>;
-}
+}

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>

src/styles/Components/ProfileLink.scss

@@ -69,7 +69,7 @@
 }
 
 .profile-username {
-    font-weight: 500;
+    font-weight: 600;
     font-size: 1rem;
     line-height: 1.256rem;
 }