feat: message history from message-history branch

src/api/authenticator.js

@@ -1,14 +1,10 @@
-import Logger from '../common/util/Logger';
+import Logger from '../common/util/logger';
 import gateway from "./gateway/globalGatewayConnection";
-import token from "./tokenManager";
+import { getToken } from "./tokenManager";
 
 const { log: authLog } = Logger([ 'Authenticator' ]);
 
-const Authenticator = {
-    login: async function() {
+export function login() {
     authLog('Logging in through gateway...');
-        return gateway.connect(token.getToken());
-    }
+    return gateway.connect(getToken());
 };
-
-export default Authenticator;

src/api/gateway/GatewayConnection.js

@@ -1,4 +1,4 @@
-import logger from "../../common/util/Logger";
+import logger from "../../common/util/logger";
 
 const { log: logGateway } = logger([ "Gateway" ]);
 const { log: logRtc } = logger([ "Gateway", "RTC" ]);

src/api/gateway/globalGatewayConnection.js

@@ -1,7 +1,7 @@
 import GatewayConnection from './GatewayConnection';
 import config from '../../config';
 import store from '../../common/store';
-import logger from '../../common/util/Logger';
+import logger from '../../common/util/logger';
 
 const { log } = logger(["globalGatewayConnection"]);
 const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiments"]);
@@ -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/api/request.js

@@ -1,7 +1,7 @@
 import config from '../config';
-import token from "./tokenManager";
+import { getToken } from "./tokenManager";
 
-async function APIRequest(endpoint, options) {
+export async function APIRequest(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -28,7 +28,7 @@ async function APIRequest(endpoint, options) {
     return { res, json, isOK, err };
 }
 
-APIRequest.authenticated = async function(endpoint, options) {
+export async function authenticated(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -38,7 +38,7 @@ APIRequest.authenticated = async function(endpoint, options) {
     if (!options.headers) options.headers = {};
 
     options.headers = {
-        "Authorization": token.getToken(),
+        "Authorization": getToken(),
         ...options.headers
     };
 

src/api/tokenManager.js

@@ -1,6 +1,7 @@
-const tokenManager = {
-    getToken: () => localStorage.getItem("token"),
-    setToken: (token) => localStorage.setItem("token", token)
+export function getToken() {
+    return localStorage.getItem("token");
 };
 
-export default tokenManager;
+export function setToken(token) {
+    localStorage.setItem("token", token);
+};

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/FullMessage.js

@@ -1,11 +1,13 @@
 export default function FullMessage({ glyph, title, content }) {
-    return (<div className="center grow col-flex">
+    return (
+        <div className="center grow col-flex">
             <div className="greeter-logo">
-                <span className="greeter-logo-text">{ glyph }</span>
+                <span className="greeter-logo-text">{glyph}</span>
             </div>
-            <span className="greeter-branding-name">{ title }</span>
+            <span className="greeter-branding-name">{title}</span>
             <div className="center">
-                { content }
+                {content}
             </div>
-        </div>)
+        </div>
+    );
 }

src/components/auth/Create.js

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import Notification from '../Notification';
 import APIRequest from '../../api/request';
-import { getSignupMessageFromError } from '../../common/util/Errors'
+import { getSignupMessageFromError } from '../../common/util/errors'
 
 export default function Create() {
     const history = useHistory();
@@ -11,7 +11,6 @@ export default function Create() {
     const [ usernameInput, setUsernameInput ] = useState();
     const [ passwordInput, setPasswordInput ] = useState();
     const [ specialCodeInput, setSpecialCodeInput ] = useState();
-
     const [ specialCodePrompt, setSpecialCodePrompt ] = useState();
 
     const [ info, setInfo ] = useState();

src/components/auth/Login.js

@@ -3,9 +3,9 @@ import { useHistory } from 'react-router-dom';
 
 import Notification from '../Notification';
 import APIRequest from '../../api/request';
-import Authenticator from '../../api/authenticator';
-import token from "../../api/tokenManager";
-import { getLoginMessageFromError } from '../../common/util/Errors'
+import { login } from '../../api/authenticator';
+import { setToken } from "../../api/tokenManager";
+import { getLoginMessageFromError } from '../../common/util/errors'
 
 export default function Login() {
     const history = useHistory();
@@ -42,8 +42,8 @@ export default function Login() {
             return;
         }
         
-        token.setToken(json.token);
-        await Authenticator.login();
+        setToken(json.token);
+        await login();
 
         history.push('/');
     }

src/components/channel/ChannelButton.js

@@ -1,8 +1,8 @@
+import { useHistory } from 'react-router-dom';
+
 import ChannelProfile from './ChannelProfileLink';
 import gatewayConnection from '../../api/gateway/globalGatewayConnection';
 
-import { useHistory } from 'react-router-dom';
-
 export default function ChannelButton({ channel, selected }) {
     const history = useHistory();
 

src/components/channel/ChannelList.js

@@ -1,8 +1,8 @@
+import { connect } from 'react-redux'
+
 import ChannelListLoader from './ChannelListLoader';
 import ChannelButton from './ChannelButton';
 
-import { connect } from 'react-redux'
-
 function ChannelList({ selectedChannelId, channels }) {
     if (!channels) {
         return (

src/components/channel/ChannelMessageView.js

@@ -1,21 +1,51 @@
-import Message from  "../Message";
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
+import { useDispatch } from "react-redux";
 
-export default function ChannelMessageView({messages}) {
+import { authenticated } from "../../api/request";
+import Message from  "../Message";
+
+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

@@ -1,10 +1,10 @@
+import { connect, useDispatch } from 'react-redux';
+import { useState, useRef, useEffect } from 'react';
+
 import ChannelProfile from './ChannelProfileLink';
 import gatewayConnection from '../../api/gateway/globalGatewayConnection';
 import ChannelUserList from "./ChannelUserList";
 import ProfileLinkLoader from "../ProfileLinkLoader";
-
-import { connect, useDispatch } from 'react-redux';
-import { useState, useRef, useEffect } from 'react';
 import ChannelMessageView from './ChannelMessageView';
 
 const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
@@ -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/components/main/App.js

@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react';
 import { connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
+import './../../styles/App.scss';
 import Login from '../auth/Login';
 import Create from '../auth/Create';
 import Root from '../main/Root';
-import Authenticator from '../../api/authenticator';
+import { login } from '../../api/authenticator';
 import Notification from '../Notification';
-import './../../styles/App.scss';
 import LoggedInMount from './LoggedInMount';
 import FullMessage from '../FullMessage';
 
@@ -16,7 +16,7 @@ function App({ user, fullscreenMessage }) {
     const [ hasError ] = useState(false);
 
     useEffect(() => {
-        Authenticator.login();
+        login();
     }, []);
 
     if (user === null && !hasError) {

src/components/main/LoggedInMount.js

@@ -1,9 +1,10 @@
+import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+
 import Sidebar from "../Sidebar";
 import ChannelView from "../channel/ChannelView";
 import GradientBanner from "../GradientBanner";
 import UserView from "../user/UserView";
-import { connect } from "react-redux";
 
 function LoggedInMount({ gradientBannerNotificationText }) {
     const { channelId, userId } = useParams();

src/components/user/UserView.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import APIRequest from "../../api/request";
+import { authenticated } from "../../api/request";
 import UserProfile from "./UserProfileLink";
 import ProfileLinkLoader from "../ProfileLinkLoader";
 
@@ -7,7 +7,7 @@ export default function UserView({ userId }) {
     const [userObject, setUserObject] = useState(null);
 
     useEffect(() => {
-        APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
+        authenticated(`/api/v1/users/user/${userId}/info`, {
             method: 'GET',
             headers: {
                 "Accept": "application/json"
@@ -23,8 +23,8 @@ export default function UserView({ userId }) {
     if (userObject) {
         view = <>
             <UserProfile user={ userObject } size="32" />
-            {(userObject.role === "ADMIN") && <span>Admin</span>}
-            {(userObject.role === "USER") && <span>User</span>}
+            {(userObject.role === "ADMIN") && <span style={{ padding: "12px" }}>Admin</span>}
+            {(userObject.role === "USER") && <span style={{ padding: "12px" }}>User</span>}
         </>
     } else {
         view = <>

src/styles/Components/ProfileLink.scss

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