Retry websocket connect if error returned is 502

* Retry websocket connect if error returned is 502

* Introduce connect button on 'Disconnected' left-pane dialog

* NetworkStatus: If user clicks connect, show connecting for 5s
This commit is contained in:
Scott Nonnenberg 2020-03-20 11:01:55 -07:00
parent c44176f7f3
commit 6bd5587d50
5 changed files with 89 additions and 15 deletions

View file

@ -3,11 +3,14 @@ import React from 'react';
import { LocalizerType } from '../types/Util';
import { NetworkStateType } from '../state/ducks/network';
const FIVE_SECONDS = 5 * 1000;
export interface PropsType extends NetworkStateType {
hasNetworkDialog: boolean;
i18n: LocalizerType;
isRegistrationDone: boolean;
relinkDevice: () => void;
manualReconnect: () => void;
}
type RenderDialogTypes = {
@ -39,17 +42,41 @@ export const NetworkStatus = ({
isRegistrationDone,
socketStatus,
relinkDevice,
manualReconnect,
}: PropsType): JSX.Element | null => {
if (!hasNetworkDialog) {
return null;
}
if (!isOnline) {
return renderDialog({
subtext: i18n('checkNetworkConnection'),
title: i18n('offline'),
});
} else if (!isRegistrationDone) {
const [isConnecting, setIsConnecting] = React.useState<boolean>(false);
React.useEffect(() => {
let timeout: NodeJS.Timeout;
if (isConnecting) {
timeout = setTimeout(() => {
setIsConnecting(false);
}, FIVE_SECONDS);
}
return () => {
if (timeout) {
clearTimeout(timeout);
}
};
}, [isConnecting, setIsConnecting]);
const reconnect = () => {
setIsConnecting(true);
manualReconnect();
};
const manualReconnectButton = (): JSX.Element => (
<div className="module-left-pane-dialog__actions">
<button onClick={reconnect}>{i18n('connect')}</button>
</div>
);
if (!isRegistrationDone) {
return renderDialog({
renderActionableButton: (): JSX.Element => (
<div className="module-left-pane-dialog__actions">
@ -59,10 +86,22 @@ export const NetworkStatus = ({
subtext: i18n('unlinkedWarning'),
title: i18n('unlinked'),
});
} else if (isConnecting) {
return renderDialog({
subtext: i18n('connectingHangOn'),
title: i18n('connecting'),
});
} else if (!isOnline) {
return renderDialog({
renderActionableButton: manualReconnectButton,
subtext: i18n('checkNetworkConnection'),
title: i18n('offline'),
});
}
let subtext = '';
let title = '';
let renderActionableButton;
switch (socketStatus) {
case WebSocket.CONNECTING:
@ -72,11 +111,13 @@ export const NetworkStatus = ({
case WebSocket.CLOSED:
case WebSocket.CLOSING:
default:
renderActionableButton = manualReconnectButton;
title = i18n('disconnected');
subtext = i18n('checkNetworkConnection');
}
return renderDialog({
renderActionableButton,
subtext,
title,
});