src/api/authenticator.js

@@ -1,10 +1,14 @@
-import Logger from '../common/util/logger';
+import Logger from '../common/util/Logger';
 import gateway from "./gateway/globalGatewayConnection";
-import { getToken } from "./tokenManager";
+import token from "./tokenManager";
 
 const { log: authLog } = Logger([ 'Authenticator' ]);
 
-export function login() {
+const Authenticator = {
+    login: async function() {
         authLog('Logging in through gateway...');
-    return gateway.connect(getToken());
+        return gateway.connect(token.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,7 +18,6 @@ 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],
@@ -26,7 +25,6 @@ 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 { getToken } from "./tokenManager";
+import token from "./tokenManager";
 
-export async function APIRequest(endpoint, options) {
+async function APIRequest(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -28,7 +28,7 @@ export async function APIRequest(endpoint, options) {
     return { res, json, isOK, err };
 }
 
-export async function authenticated(endpoint, options) {
+APIRequest.authenticated = async function(endpoint, options) {
     let res;
     let json;
     let isOK = false;
@@ -38,7 +38,7 @@ export async function authenticated(endpoint, options) {
     if (!options.headers) options.headers = {};
 
     options.headers = {
-        "Authorization": getToken(),
+        "Authorization": token.getToken(),
         ...options.headers
     };
 

src/api/tokenManager.js

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

src/common/store.js

@@ -54,19 +54,6 @@ 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,13 +1,11 @@
 export default function FullMessage({ glyph, title, content }) {
-    return (
+    return (<div className="center grow col-flex">
-        <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,6 +11,7 @@ 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 { login } from '../../api/authenticator';
+import Authenticator from '../../api/authenticator';
-import { setToken } from "../../api/tokenManager";
+import token from "../../api/tokenManager";
-import { getLoginMessageFromError } from '../../common/util/errors'
+import { getLoginMessageFromError } from '../../common/util/Errors'
 
 export default function Login() {
     const history = useHistory();
@@ -42,8 +42,8 @@ export default function Login() {
             return;
         }
         
-        setToken(json.token);
+        token.setToken(json.token);
-        await login();
+        await Authenticator.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,51 +1,21 @@
-import { useRef, useEffect, useState } from 'react';
-import { useDispatch } from "react-redux";
-
-import { authenticated } from "../../api/request";
 import Message from  "../Message";
+import { useRef, useEffect } from 'react';
 
-export default function ChannelMessageView({ messages, channelId }) {
+export default function ChannelMessageView({messages}) {
     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]);
 
-    return <div className="message-list" id="message-list" ref={ scroller } onScroll={ onScroll }>
+    let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
-        {messages.map(message => <Message message={message} key={message._id} />)}
+    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 }
         <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} channelId={channel._id}></ChannelMessageView>
+                        <ChannelMessageView messages={messages}></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 { login } from '../../api/authenticator';
+import Authenticator 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(() => {
-        login();
+        Authenticator.login();
     }, []);
 
     if (user === null && !hasError) {

src/components/main/LoggedInMount.js

@@ -1,10 +1,9 @@
-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 { authenticated } from "../../api/request";
+import APIRequest 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(() => {
-        authenticated(`/api/v1/users/user/${userId}/info`, {
+        APIRequest.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 style={{ padding: "12px" }}>Admin</span>}
+            {(userObject.role === "ADMIN") && <span>Admin</span>}
-            {(userObject.role === "USER") && <span style={{ padding: "12px" }}>User</span>}
+            {(userObject.role === "USER") && <span>User</span>}
         </>
     } else {
         view = <>

src/styles/Components/ProfileLink.scss

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