Handle when there is no network and reconnecting

Author: ValentaTomas

src/Auth/SignInModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -90,6 +90,22 @@ const SignInAgainButton = styled(Button)`
   }
 `;
 
+const InfoWrapper = styled.div`
+  padding: 5px;
+  height: 100%;
+  display: flex;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const InfoMessage = styled.div`
+  color: #5A5A6F;
+  font-size: 16px;
+  font-weight: 600;
+`;
+
 const InputWrapper = styled.div`
   margin-bottom: 20px;
   width: 100%;
@@ -140,11 +156,11 @@ function SignInModal({ onCloseRequest }: SignInModalProps) {
   const [email, setEmail] = useState('');
   const [error, setError] = useState('');
 
-  const auth = useContext(AuthContext);
+  const authInfo = useContext(AuthContext);
 
-  const isLoading = auth.state === AuthState.SigningInUser;
+  const isLoading = authInfo.state === AuthState.SigningInUser;
 
-  const isSignedIn = auth.state === AuthState.UserAndMetadataLoaded;
+  const isSignedIn = authInfo.state === AuthState.UserAndMetadataLoaded;
 
   function handleEmailInputChange(e: any) {
     setEmail(e.target.value);
@@ -166,6 +182,7 @@ function SignInModal({ onCloseRequest }: SignInModalProps) {
 
     try {
       await signIn(email);
+      setError('');
       trackSignInFinished();
     } catch (error) {
       console.error(error.message);
@@ -180,90 +197,116 @@ function SignInModal({ onCloseRequest }: SignInModalProps) {
   }
 
   function handleEmailInputOnKeyDown(e: any) {
-    if (e.key === 'Enter') handleSignInButtonClick();
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSignInButtonClick();
+    }
   }
 
   function handleContinueIntoAppButtonClick() {
     trackContinueIntoAppButtonClicked();
     onCloseRequest?.();
   }
 
+  useEffect(() => {
+    if (authInfo.isReconnecting) {
+      cancelSignIn();
+    }
+  }, [
+    authInfo.isReconnecting,
+  ]);
+
   return (
     <StyledModal
       onCloseRequest={handleCloseRequest}
     >
-      {!isSignedIn && !isLoading &&
+
+      {authInfo.isReconnecting
+        &&
+        <InfoWrapper>
+          <InfoMessage>Contacting Devbook servers failed.</InfoMessage>
+          <InfoMessage>Reconnecting...</InfoMessage>
+        </InfoWrapper>
+      }
+
+      {!authInfo.isReconnecting &&
         <>
-          <Title>
-            Sign in with your email
+          {!isSignedIn
+            && !isLoading
+            &&
+            <>
+              <Title>
+                Sign in with your email
           </Title>
 
-          <Description>
-            Click on the sign-in button to receive an email with a sign-in link.
+              <Description>
+                Click on the sign-in button to receive an email with a sign-in link.
           </Description>
 
-          <InputWrapper>
-            <InputTitle>EMAIL</InputTitle>
-            <EmailInput
-              autoFocus
-              placeholder="[email protected]"
-              value={email}
-              onChange={handleEmailInputChange}
-              onKeyDown={handleEmailInputOnKeyDown}
-            />
-          </InputWrapper>
-
-          {error &&
-            <Error>
-              {error}
-            </Error>
-          }
-          <SignInButton
-            onClick={handleSignInButtonClick}
-          >
-            Sign in to Devbook
+              <InputWrapper>
+                <InputTitle>EMAIL</InputTitle>
+                <EmailInput
+                  autoFocus
+                  placeholder="[email protected]"
+                  value={email}
+                  onChange={handleEmailInputChange}
+                  onKeyDown={handleEmailInputOnKeyDown}
+                />
+              </InputWrapper>
+
+              {error &&
+                <Error>
+                  {error}
+                </Error>
+              }
+              <SignInButton
+                onClick={handleSignInButtonClick}
+              >
+                Sign in to Devbook
          </SignInButton>
-        </>
-      }
+            </>
+          }
 
-      {!isSignedIn
-        && isLoading
-        && !error
-        &&
-        <>
-          <Title>
-            Check your email
+          {!isSignedIn
+            && isLoading
+            && !error
+            &&
+            <>
+              <Title>
+                Check your email
           </Title>
 
-          <Description>
-            We just sent an email with the sign-in link to the following email address:
+              <Description>
+                We just sent an email with the sign-in link to the following email address:
             <br />
-            <strong>{email}</strong>
-          </Description>
+                <strong>{email}</strong>
+              </Description>
 
-          <Description>
-            Click on the link and you'll be signed-in in a few seconds...
+              <Description>
+                Click on the link and you'll be signed-in in a few seconds...
           </Description>
 
-          <Loader />
+              <Loader />
 
-          <SignInAgainButton
-            onClick={handleSignInAgainButtonClick}
-          >
-            Sign in again
+              <SignInAgainButton
+                onClick={handleSignInAgainButtonClick}
+              >
+                Sign in again
          </SignInAgainButton>
-        </>
-      }
+            </>
+          }
 
-      {isSignedIn &&
-        <>
-          <Title>
-            You are signed in!
+          {isSignedIn &&
+            <>
+              <Title>
+                You are signed in!
           </Title>
-          <CheckIcon />
-          <ContinueIntoAppButton onClick={handleContinueIntoAppButtonClick}>
-            Continue into the app
+              <CheckIcon />
+              <ContinueIntoAppButton onClick={handleContinueIntoAppButtonClick}>
+                Continue into the app
           </ContinueIntoAppButton>
+            </>
+          }
         </>
       }
     </StyledModal>

src/Auth/index.ts

@@ -16,6 +16,23 @@ import {
 } from 'mainCommunication';
 import timeout from 'utils/timeout';
 
+axios.interceptors.response.use((value) => {
+  setIsReconnecting(false);
+  return Promise.resolve(value);
+}, (error) => {
+  if (error.response) {
+    setIsReconnecting(false);
+    return Promise.reject(error);
+  }
+
+  if (error.request) {
+    setIsReconnecting(true);
+    console.log('Reconnecting');
+    return timeout(1000).then(() => axios.request(error.config));
+  }
+  return Promise.reject(error);
+});
+
 export enum AuthError {
   // The error when the looking for a valid stored user failed - probably because of the network connection.
   // User is no signed in and no metadata are present.
@@ -69,14 +86,14 @@ type SigningInUserAuthInfo = { state: AuthState.SigningInUser }
 type SigningOutUserAuthInfo = { state: AuthState.SigningOutUser, user?: User }
 type UserAndMetadataLoadedAuthInfo = { state: AuthState.UserAndMetadataLoaded, user: User };
 
-export type AuthInfo = FailedSigningOutAuthInfo
+export type AuthInfo = (FailedSigningOutAuthInfo
   | FailedSigningInAuthInfo
   | NoUserAuthInfo
   | FailedLookingForStoredUserAuthInfo
   | SigningInUserAuthInfo
   | UserAndMetadataLoadedAuthInfo
   | LookingForStoredUserAuthInfo
-  | SigningOutUserAuthInfo;
+  | SigningOutUserAuthInfo) & { isReconnecting?: boolean }
 
 export type { MagicUserMetadata };
 
@@ -113,6 +130,13 @@ function deleteRefreshToken() {
   return electronStore.delete(refreshTokenStoreName);
 }
 
+function setIsReconnecting(isReconnecting: boolean) {
+  updateAuth({
+    ...auth,
+    isReconnecting,
+  });
+}
+
 function changeAnalyticsUserAndSaveEmail(auth: AuthInfo) {
   if (auth.state === AuthState.UserAndMetadataLoaded) {
     const email = auth?.user?.email || undefined;
@@ -281,6 +305,7 @@ export async function refreshAuth() {
     updateAuth({ state: AuthState.UserAndMetadataLoaded, user });
     setRefreshToken(refreshToken);
   } catch (error) {
+    deleteRefreshToken();
     updateAuth({ state: AuthState.NoUser, error: AuthError.FailedLookingForStoredUser });
   }
 }

src/Home/SearchHeaderPanel/SearchInput.tsx

@@ -2,6 +2,7 @@ import React, {
   useState,
   useEffect,
   useCallback,
+  useContext,
 } from 'react';
 import styled from 'styled-components';
 
@@ -12,6 +13,7 @@ import useDebounce from 'hooks/useDebounce';
 import { DocSource } from 'search/docs';
 import Loader from 'components/Loader';
 import Hotkey from 'Home/HotkeysPanel/Hotkey';
+import { AuthContext } from 'Auth';
 
 const Input = styled.input`
   padding: 10px 15px;
@@ -100,6 +102,8 @@ function SearchInput({
   searchMode,
   onInputFocusChange,
 }: SearchInputProps) {
+  const authInfo = useContext(AuthContext);
+
   const [value, setValue] = useState('');
   const [lastValue, setLastValue] = useState('');
   const [lastDocSource, setLastDocSource] = useState<DocSource>();
@@ -231,7 +235,11 @@ function SearchInput({
         onBlur={() => onInputFocusChange(false)}
         onKeyDown={handleInputKeyDown}
       />
-      {isLoading && <StyledLoader />}
+      {isLoading
+        && !authInfo.isReconnecting
+        &&
+        < StyledLoader />
+      }
 
       {searchMode === SearchMode.OnEnterPress &&
         <HotkeyWrapper

src/Home/SearchHeaderPanel/index.tsx

@@ -14,7 +14,6 @@ import electron, {
   postponeUpdate,
   togglePinMode,
 } from 'mainCommunication';
-import Loader from 'components/Loader';
 import { PreferencesPage } from 'Preferences';
 import { IPCMessage } from 'mainCommunication/ipc';