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:
parent
c44176f7f3
commit
6bd5587d50
5 changed files with 89 additions and 15 deletions
|
@ -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,
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue