From 13521f76d1693727b2e019ef31c008b5b576807d Mon Sep 17 00:00:00 2001 From: hippoz Date: Tue, 14 Sep 2021 13:12:55 +0300 Subject: [PATCH] add close messages and clean up code --- .../API/Gateway/globalGatewayConnection.js | 32 ++++++++++++++++++- .../src/Components/Channels/ChannelList.js | 4 +-- .../src/Components/Channels/ChannelView.js | 6 ++-- bfrontend/src/Components/Main/App.js | 14 ++++++-- bfrontend/src/Components/UI/FullMessage.js | 11 +++++++ bfrontend/src/Components/UI/Sidebar.js | 2 +- bfrontend/src/Global/store.js | 18 ++++++++--- 7 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 bfrontend/src/Components/UI/FullMessage.js diff --git a/bfrontend/src/API/Gateway/globalGatewayConnection.js b/bfrontend/src/API/Gateway/globalGatewayConnection.js index 859c085..2d42739 100644 --- a/bfrontend/src/API/Gateway/globalGatewayConnection.js +++ b/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..."); diff --git a/bfrontend/src/Components/Channels/ChannelList.js b/bfrontend/src/Components/Channels/ChannelList.js index 8d217f9..4fc5eb5 100644 --- a/bfrontend/src/Components/Channels/ChannelList.js +++ b/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 }; }; diff --git a/bfrontend/src/Components/Channels/ChannelView.js b/bfrontend/src/Components/Channels/ChannelView.js index b609352..f84c035 100644 --- a/bfrontend/src/Components/Channels/ChannelView.js +++ b/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, }; }; diff --git a/bfrontend/src/Components/Main/App.js b/bfrontend/src/Components/Main/App.js index d0b7fae..5a5c566 100644 --- a/bfrontend/src/Components/Main/App.js +++ b/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 ( +
+ +
+ ); + } + if (!hasError) { return (
@@ -61,7 +70,8 @@ function App({ user }) { const stateToProps = (state) => { return { - user: state?.user + user: state.user, + fullscreenMessage: state.fullscreenMessage }; }; diff --git a/bfrontend/src/Components/UI/FullMessage.js b/bfrontend/src/Components/UI/FullMessage.js new file mode 100644 index 0000000..7043a57 --- /dev/null +++ b/bfrontend/src/Components/UI/FullMessage.js @@ -0,0 +1,11 @@ +export default function FullMessage({ glyph, title, content }) { + return (
+
+ { glyph } +
+ { title } +
+ { content } +
+
) +} \ No newline at end of file diff --git a/bfrontend/src/Components/UI/Sidebar.js b/bfrontend/src/Components/UI/Sidebar.js index 02e7996..7654766 100644 --- a/bfrontend/src/Components/UI/Sidebar.js +++ b/bfrontend/src/Components/UI/Sidebar.js @@ -20,7 +20,7 @@ function Sidebar({ user }) { const stateToProps = (state) => { return { - user: state?.user + user: state.user }; }; diff --git a/bfrontend/src/Global/store.js b/bfrontend/src/Global/store.js index d4e9fa6..0f33f6b 100644 --- a/bfrontend/src/Global/store.js +++ b/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; }