add close messages and clean up code

bfrontend/src/API/Gateway/globalGatewayConnection.js

@@ -9,6 +9,24 @@ const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiment
 const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
 let currentlyReconnecting = false;
 
+const wsCloseCodes = {
+    PAYLOAD_ERROR: [4001, "Error while handling payload"],
+    NOT_AUTHENTICATED: [4002, "Not authenticated"],
+    SERVER_DENIED_CONNECTION: [4003, "Server denied connection"],
+    AUTHENTICATION_ERROR: [4004, "Authentication error"],
+    TOO_MANY_SESSIONS: [4005, "Too many sessions"],
+    NOT_AUTHORIZED: [4006, "Not authorized"],
+    FLOODING: [4007, "Flooding"],
+    NO_PING: [4008, "No ping"],
+};
+const cancelReconnectionForCodes = [
+    wsCloseCodes.NOT_AUTHENTICATED[0],
+    wsCloseCodes.NOT_AUTHORIZED[0],
+    wsCloseCodes.SERVER_DENIED_CONNECTION[0],
+    wsCloseCodes.TOO_MANY_SESSIONS[0],
+    wsCloseCodes.FLOODING[0],
+];
+
 globalGatewayConnection.onopen = (sessionData) => {
     if (currentlyReconnecting) {
         store.dispatch({ type: 'application/updatebannertext', text: undefined });
@@ -48,7 +66,19 @@ const dispatchConnectionClose = () => {
 globalGatewayConnection.onclose = function(code) {
     currentlyReconnecting = true; // NOTE: no
     dispatchConnectionClose();
-    if (code === 4004) return;
+    if (code === wsCloseCodes.AUTHENTICATION_ERROR[0]) return;
+    if (cancelReconnectionForCodes.includes(code)) {
+        store.dispatch({
+            type: "application/updatefullscreenmessage",
+            fullscreenMessage: {
+                content: `you have lost connection and a reconnect may not be possible at this time - disconnect code: ${code}`,
+                title: "an error has occurred",
+                glyph: "?!",
+                enabled: true
+            },
+        });
+        return;
+    }
     setTimeout(() => {
         if (globalGatewayConnection.ws.readyState === 0 || globalGatewayConnection.ws.readyState === 1) return;
         log("Attempting reconnection...");

bfrontend/src/Components/Channels/ChannelList.js

@@ -21,8 +21,8 @@ function ChannelList({ selectedChannelId, channels }) {
 
 const stateToProps = (state) => {
     return {
-        selectedChannelId: state?.selectedChannelId,
-        channels: state?.channels
+        selectedChannelId: state.selectedChannelId,
+        channels: state.channels
     };
 };
 

bfrontend/src/Components/Channels/ChannelView.js

@@ -74,9 +74,9 @@ const stateToProps = (state, ownProps) => {
     const channelId = ownProps.channelId;
 
     return {
-        channel: state?.channels?.find(x => x._id === channelId),
-        messages: state?.messages[channelId] || [],
-        channelPresenceClientList: state?.channelPresenceClientList,
+        channel: state.channels?.find(x => x._id === channelId),
+        messages: state.messages[channelId] || [],
+        channelPresenceClientList: state.channelPresenceClientList,
     };
 };
 

bfrontend/src/Components/Main/App.js

@@ -9,8 +9,9 @@ import { useEffect, useState } from 'react';
 import { useDispatch, connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import LoggedInMount from './LoggedInMount';
+import FullMessage from '../UI/FullMessage';
 
-function App({ user }) {
+function App({ user, fullscreenMessage }) {
     const [ notificationText ] = useState('');
     const [ hasError ] = useState(false);
 
@@ -28,6 +29,14 @@ function App({ user }) {
         );
     }
 
+    if (fullscreenMessage && fullscreenMessage.enabled) {
+        return (
+            <div id="root-container" className="main-display">
+                <FullMessage glyph={ fullscreenMessage.glyph } title={ fullscreenMessage.title } content={ fullscreenMessage.content } />
+            </div>
+        );
+    }
+
     if (!hasError) {
         return (
             <div id="root-container" className="main-display">
@@ -61,7 +70,8 @@ function App({ user }) {
 
 const stateToProps = (state) => {
     return {
-        user: state?.user
+        user: state.user,
+        fullscreenMessage: state.fullscreenMessage
     };
 };
 

bfrontend/src/Components/UI/FullMessage.js

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

bfrontend/src/Components/UI/Sidebar.js

@@ -20,7 +20,7 @@ function Sidebar({ user }) {
 
 const stateToProps = (state) => {
     return {
-        user: state?.user
+        user: state.user
     };
 };
 

bfrontend/src/Global/store.js

@@ -2,15 +2,18 @@ import { createStore } from 'redux';
 
 const intitialState = {
     user: null,
-
     channels: null,
-
     gateway: { isConnected: false },
     messages: {},
     channelPresenceClientList: {},
     gradientBannerNotificationText: undefined,
-    
-    selectedChannelId: undefined
+    selectedChannelId: undefined,
+    fullscreenMessage: {
+        enabled: false,
+        glyph: "",
+        title: "",
+        content: ""
+    }
 };
 
 const reducer = (state = intitialState, payload) => {
@@ -79,6 +82,13 @@ const reducer = (state = intitialState, payload) => {
             }
         }
 
+        case "application/updatefullscreenmessage": {
+            return {
+                ...state,
+                fullscreenMessage: payload.fullscreenMessage
+            }
+        }
+
         default: {
             return state;
         }