integrate the new gateway, more or less

bfrontend/package.json

@@ -3,21 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/user-event": "^13.0.16",
     "nord": "^0.2.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-content-loader": "^5.1.4",
+    "react-content-loader": "^6.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-media-hook": "^0.4.9",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.3",
     "redux": "^4.0.5",
-    "sass": "^1.32.0",
+    "sass": "^1.32.8",
-    "socket.io-client": "^3.0.5",
+    "web-vitals": "^1.1.1"
-    "web-vitals": "^0.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

bfrontend/src/API/APIRequest.js

@@ -1,4 +1,5 @@
 import config from '../Config';
+import token from "./TokenManager";
 
 async function APIRequest(endpoint, options) {
     let res;
@@ -9,11 +10,6 @@ async function APIRequest(endpoint, options) {
     if (!options) options = {};
     if (!options.headers) options.headers = {};
 
-    options = {
-        credentials: 'include',
-        ...options
-    };
-
     try {
         res = await fetch(`${config.apiUrl}${endpoint}`, options);
         json = await res.json();
@@ -41,12 +37,15 @@ APIRequest.authenticated = async function(endpoint, options) {
     if (!options) options = {};
     if (!options.headers) options.headers = {};
 
-    options = {
+    console.log(options);
-        credentials: 'include',
+
-        ...options
+    options.headers = {
+        "Authorization": token.getToken(),
+        ...options.headers
     };
 
     try {
+        console.log(options);
         res = await fetch(`${config.apiUrl}${endpoint}`, options);
         json = await res.json();
         isOK = true;

bfrontend/src/API/Authenticator.js

@@ -1,34 +1,15 @@
-import APIRequest from './APIRequest';
-import gatewayConnection from '../API/Gateway/globalGatewayConnection';
 import Logger from '../Util/Logger';
+import gateway from "./Gateway/globalGatewayConnection";
 
-const { log: authLog, error: authError } = Logger([ 'Authenticator' ]);
+const { log: authLog } = Logger([ 'Authenticator' ]);
 
 const Authenticator = {
     getToken: function() {
         return localStorage.getItem("token");
     },
-    getLoggedInUserFromCookie: async function() {
+    login: async function() {
-        authLog('Fetching current logged in user status...');
+        authLog('Logging in through gateway...');
-        const { json, isOK, err } = await APIRequest.authenticated('/api/v1/users/current/info');
+        return gateway.connect();
-        if (!isOK && err) {
-            authLog('Exception while fetching current logged in user status', err);
-            throw new Error(err);
-        }
-        if (!isOK && !err) {
-            authError('User is not authenticated');
-            return undefined;
-        }
-        if (!json || !json.user) {
-            authError('User is not authenticated');
-            return undefined;
-        }
-
-        authLog(`Logged in as "${json.user.username || '[undefined username]'}"`);
-
-        // NOTE(hippoz): this function has a stupid side-effect but this will have to do for now...
-        gatewayConnection.connect(json.user.token);
-        return json.user;
     }
 };
 

bfrontend/src/API/Gateway/GatewayConnection.js

@@ -1,6 +1,6 @@
 import logger from "../../Util/Logger";
 
-const logGateway = logger([ "Gateway" ]);
+const { log: logGateway } = logger([ "Gateway" ]);
 
 const opcodes = {
     0: { name: "HELLO", data: "JSON" },
@@ -46,57 +46,62 @@ const getOpcodeByName = (name) => {
 
 class GatewayConnection {
     constructor(token, gatewayUrl) {
-        this.ws = new WebSocket(gatewayUrl);
+        this.token = token;
-        
+        this.gatewayUrl = gatewayUrl;
-        this.handshakeCompleted = false;
-        this.sessionInformation = null;
-
-        this.ws.onopen = () => logGateway("Open");
-        this.ws.onclose = (e) => {
-            this.handshakeCompleted = false;
-            logGateway(`Close: ${e.code}:${e.reason}`);
-            this.fire("onclose", e);
-        };
-        this.ws.onmessage = (message) => {
-            try {
-                const packet = parseMessage(message.data);
-                if (!packet) return console.error("gateway: invalid packet from server");
-                
-                switch (packet.opcodeType) {
-                case "HELLO": {
-                    // Got HELLO from server, send YOO as soon as possible
-                    logGateway("Got HELLO", packet.data);
-                    logGateway("Sending YOO");
-                    this.ws.send(this.packet("YOO", { token }));
-                    break;
-                }
-                case "YOO_ACK": {
-                    // Server accepted connection
-                    logGateway("Got YOO_ACK", packet.data);
-                    this.handshakeCompleted = true;
-                    this.sessionInformation = packet.data;
-                    logGateway("Handshake complete");
-                    this.fire("onopen", packet.data);
-                    break;
-                }
-                case "EVENT_CREATE_MESSAGE": {
-                    // New message
-                    // console.log("gateway: got new message", packet.data);
-                    this.fire("onmessage", packet.data);
-                    break;
-                }
-                default: {
-                    logGateway("Got unknown packet", message.data);
-                    break;
-                }
-                }
-            } catch(e) {
-                return console.error("err: gateway:", e);
-            }
-        };
     }
 }
 
+GatewayConnection.prototype.connect = function() {
+    this.ws = new WebSocket(this.gatewayUrl);
+        
+    this.handshakeCompleted = false;
+    this.sessionInformation = null;
+
+    this.ws.onopen = () => logGateway("Open");
+    this.ws.onclose = (e) => {
+        this.handshakeCompleted = false;
+        logGateway(`Close: ${e.code}:${e.reason}`);
+        this.fire("onclose", e);
+    };
+    this.ws.onmessage = (message) => {
+        try {
+            const packet = parseMessage(message.data);
+            if (!packet) return console.error("gateway: invalid packet from server");
+            
+            switch (packet.opcodeType) {
+            case "HELLO": {
+                // Got HELLO from server, send YOO as soon as possible
+                logGateway("Got HELLO", packet.data);
+                logGateway("Sending YOO");
+                this.ws.send(this.packet("YOO", { token: this.token }));
+                break;
+            }
+            case "YOO_ACK": {
+                // Server accepted connection
+                logGateway("Got YOO_ACK", packet.data);
+                this.handshakeCompleted = true;
+                this.sessionInformation = packet.data;
+                logGateway("Handshake complete");
+                this.fire("onopen", packet.data);
+                break;
+            }
+            case "EVENT_CREATE_MESSAGE": {
+                // New message
+                // console.log("gateway: got new message", packet.data);
+                this.fire("onmessage", packet.data);
+                break;
+            }
+            default: {
+                logGateway("Got unknown packet", message.data);
+                break;
+            }
+            }
+        } catch(e) {
+            return console.error("err: gateway:", e);
+        }
+    };
+};
+
 GatewayConnection.prototype.sendMessage = function(content, channelId) {
     if (!this.sessionInformation) throw new Error("gateway: tried to send message before handshake completion");
 

bfrontend/src/API/Gateway/globalGatewayConnection.js

@@ -1,15 +1,14 @@
 import GatewayConnection from './GatewayConnection';
 import config from '../../Config';
-import Authenticator from '../Authenticator';
+import token from '../TokenManager';
 import store from '../../Global/store';
-console.log(Authenticator);
 
-const globalGatewayConnection = new GatewayConnection(Authenticator.getToken(), config.gatewayUrl);
+const globalGatewayConnection = new GatewayConnection(token.getToken(), config.gatewayUrl);
 
 globalGatewayConnection.onopen = (sessionData) => {
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } });
     store.dispatch({ type: 'authenticator/updatelocaluserobject', user: sessionData.user });
-    store.dispatch({ type: 'channels/updatechannellist', user: sessionData.channels })
+    store.dispatch({ type: 'channels/updatechannellist', channels: sessionData.channels })
 };
 
 globalGatewayConnection.onmessage = (message) => {
@@ -17,6 +16,7 @@ globalGatewayConnection.onmessage = (message) => {
 };
 
 globalGatewayConnection.onclose = function() {
+    store.dispatch({ type: 'authenticator/updatelocaluserobject', user: undefined });
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
 };
 

bfrontend/src/API/TokenManager.js

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

bfrontend/src/Components/Auth/Login.js

@@ -1,15 +1,14 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 
 import Notification from '../UI/Notification';
 import APIRequest from '../../API/APIRequest';
 import Authenticator from '../../API/Authenticator';
+import token from "../../API/TokenManager";
 import { getLoginMessageFromError } from '../../Util/Errors'
 
 export default function Login() {
     const history = useHistory();
-    const dispatch = useDispatch();
 
     const [ usernameInput, setUsernameInput ] = useState();
     const [ passwordInput, setPasswordInput ] = useState();
@@ -30,8 +29,7 @@ export default function Login() {
             },
             body: JSON.stringify({
                 username: usernameInput,
-                password: passwordInput,
+                password: passwordInput
-                alsoSetCookie: true
             })
         });
 
@@ -43,9 +41,9 @@ export default function Login() {
             setInfo('Something went wrong');
             return;
         }
-
+        
-        const res = await Authenticator.getLoggedInUserFromCookie();
+        token.setToken(json.token);
-        dispatch({ type: 'authenticator/updatelocaluserobject', user: res });
+        await Authenticator.login();
 
         history.push('/');
     }

bfrontend/src/Components/Channels/ChannelButton.js

@@ -10,7 +10,7 @@ export default function ChannelButton({ channel, selected }) {
     if (selected) buttonClasses += ' pressed';
 
     const handleClick = () => {
-        if (gatewayConnection.isConnected) {
+        if (gatewayConnection.handshakeCompleted) {
             history.push(`/channels/${channel._id}`);
         }
     };

bfrontend/src/Components/Channels/ChannelList.js

@@ -1,65 +1,19 @@
 import ChannelListLoader from './ChannelListLoader';
 import ChannelButton from './ChannelButton';
-import APIRequest from '../../API/APIRequest';
-import { couldNotReach } from '../../Util/Errors';
 
-import { connect, useDispatch } from 'react-redux'
+import { connect } from 'react-redux'
-import { useState, useEffect } from 'react';
-import Logger from '../../Util/Logger';
-import gatewayConnection from '../../API/Gateway/globalGatewayConnection';
 
-const { log: loaderLog } = Logger([ 'ChannelList', 'Loader' ]);
+function ChannelList({ selectedChannelId, channels }) {
-
+    if (!channels) {
-function ChannelList({ selectedChannelId, gatewayStatus }) {
+        return (
-    const [ channelList, setChannelList ] = useState();
+            <div>
-    const [ error, setError ] = useState();
+                <ChannelListLoader />
-
+            </div>
-    const dispatch = useDispatch();
+        );
-
-    useEffect(() => {
-        loaderLog('Loading ChannelList...');
-        APIRequest.authenticated('/api/v1/content/channel/list?count=50')
-            .then(({ isOK, json }) => {
-                if (!isOK) return setError(true);
-
-                loaderLog('Got channel list from server, dispatching...');
-                setChannelList(json.channels || []);
-                dispatch({ type: 'channels/updatechannellist', channels: json.channels });
-                loaderLog('Subscribing to all channels...');
-            })
-            .catch(() => {
-                setError(true);
-            });
-    }, [dispatch]);
-
-    useEffect(() => {
-        if (!channelList) return;
-        if (!gatewayStatus.isConnected) return;
-
-        // TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server
-        gatewayConnection.subscribeToChannelChats(channelList.map(channel => channel._id));
-    }, [gatewayStatus, channelList]);
-
-    if (!channelList) {
-        if (error) {
-            return (
-                <div>
-                    <p>
-                        { couldNotReach }
-                    </p>
-                </div>
-            );
-        } else {
-            return (
-                <div>
-                    <ChannelListLoader />
-                </div>
-            );
-        }
     } else {
         return (
             <div className="channel-list">
-                { channelList.map((channel) => ( <ChannelButton key={ channel._id } channel={ channel } selected={ (channel._id === selectedChannelId) } /> )) }
+                { channels.map((channel) => ( <ChannelButton key={ channel._id } channel={ channel } selected={ (channel._id === selectedChannelId) } /> )) }
             </div>
         );
     }
@@ -68,7 +22,7 @@ function ChannelList({ selectedChannelId, gatewayStatus }) {
 const stateToProps = (state) => {
     return {
         selectedChannelId: state?.selectedChannelId,
-        gatewayStatus: state?.gateway,
+        channels: state?.channels
     };
 };
 

bfrontend/src/Components/Channels/ChannelView.js

@@ -26,7 +26,7 @@ function ChannelView({ channels, messages }) {
 
     const handleTextboxKeydown = (e) => {
         if (e.key === 'Enter') {
-            gatewayConnection.sendMessage(id, textInput);
+            gatewayConnection.sendMessage(textInput, id);
             textInputRef.current.value = '';
             setTextInput('');
         }
@@ -36,13 +36,13 @@ function ChannelView({ channels, messages }) {
         if (!channels) return;
 
         setChannel(channels.find(x => x._id === id));
-    }, [ channels, id ]);
+    }, [channels, id]);
 
     useEffect(() => {
         if (!channel) return;
 
         dispatch({ type: 'channels/selectchannel', channelId: channel._id });
-    }, [ channel, dispatch ]);
+    }, [channel, dispatch]);
 
     if (channel) {
         let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);

bfrontend/src/Components/Main/App.js

@@ -3,7 +3,6 @@ import Root from '../Home/Root';
 import Authenticator from '../../API/Authenticator';
 import Notification from '../UI/Notification';
 import './../../Styles/App.scss';
-import { couldNotReach } from '../../Util/Errors';
 import ChannelView from '../Channels/ChannelView';
 import Sidebar from '../UI/Sidebar';
 
@@ -12,20 +11,13 @@ import { useDispatch, connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 function App({ user }) {
-    const [ notificationText, setNotificationText ] = useState('');
+    const [ notificationText ] = useState('');
-    const [ hasError, setHasError ] = useState(false);
+    const [ hasError ] = useState(false);
 
     const dispatch = useDispatch();
 
     useEffect(() => {
-        Authenticator.getLoggedInUserFromCookie()
+        Authenticator.login();
-            .then((res) => {
-                dispatch({ type: 'authenticator/updatelocaluserobject', user: res });
-            })
-            .catch(() => {
-                setNotificationText(couldNotReach);
-                setHasError(true);
-            });
     }, [dispatch]);
 
     if (user === null && !hasError) {

bfrontend/src/Config.js

@@ -1,6 +1,6 @@
 const config = {
     apiUrl: 'http://localhost:3000',
-    gatewayUrl: '', // Leave blank for it to look for the gateway on the current page, if that makes sense
+    gatewayUrl: 'ws://localhost:3005/gateway'
 };
 
 export default config;