Add auto reconnect on connection loss (#228)

Author: foxbit19

ui/src/CurrentUser.ts

@@ -10,6 +10,8 @@ const tokenKey = 'gotify-login-key';
 
 export class CurrentUser {
     private tokenCache: string | null = null;
+    private reconnectTimeoutId: number | null = null;
+    private readonly reconnectTime: number = 3000;
     @observable
     public loggedIn = false;
     @observable
@@ -90,7 +92,7 @@ export class CurrentUser {
             })
             .catch((error: AxiosError) => {
                 if (!error || !error.response) {
-                    this.hasNetwork = false;
+                    this.lostNetwork();
                     return Promise.reject(error);
                 }
 
@@ -124,4 +126,23 @@ export class CurrentUser {
             .post(config.get('url') + 'current/user/password', {pass})
             .then(() => this.snack('Password changed'));
     };
+
+    public tryReconnect = (quiet = false) => {
+        this.tryAuthenticate().catch(() => {
+            if (!quiet) {
+                this.snack('Reconnect failed');
+            }
+        });
+    };
+
+    private lostNetwork = () => {
+        this.hasNetwork = false;
+        if (this.reconnectTimeoutId !== null) {
+            window.clearTimeout(this.reconnectTimeoutId);
+        }
+        this.reconnectTimeoutId = window.setTimeout(
+            () => this.tryReconnect(true),
+            this.reconnectTime
+        );
+    };
 }

ui/src/layout/Layout.tsx

@@ -63,8 +63,6 @@ class Layout extends React.Component<
     private showSettings = false;
     @observable
     private version = Layout.defaultVersion;
-    @observable
-    private reconnecting = false;
 
     public componentDidMount() {
         if (this.version === Layout.defaultVersion) {
@@ -81,19 +79,6 @@ class Layout extends React.Component<
         }
     }
 
-    private doReconnect = () => {
-        this.reconnecting = true;
-        this.props.currentUser
-            .tryAuthenticate()
-            .then(() => {
-                this.reconnecting = false;
-            })
-            .catch(() => {
-                this.reconnecting = false;
-                this.props.snackManager.snack('Reconnect failed');
-            });
-    };
-
     public render() {
         const {version, showSettings, currentTheme} = this;
         const {
@@ -104,6 +89,7 @@ class Layout extends React.Component<
                 user: {name, admin},
                 logout,
                 hasNetwork,
+                tryReconnect,
             },
         } = this.props;
         const theme = themeMap[currentTheme];
@@ -113,7 +99,7 @@ class Layout extends React.Component<
                 <HashRouter>
                     <div>
                         {hasNetwork ? null : (
-                            <NetworkLostBanner height={64} retry={this.doReconnect} />
+                            <NetworkLostBanner height={64} retry={() => tryReconnect()} />
                         )}
                         <div style={{display: 'flex'}}>
                             <CssBaseline />
@@ -131,7 +117,7 @@ class Layout extends React.Component<
 
                             <main className={classes.content}>
                                 <Switch>
-                                    {authenticating || this.reconnecting ? (
+                                    {authenticating ? (
                                         <Route path="/">
                                             <LoadingSpinner />
                                         </Route>