feat: handle loading and server timeout in StartMenu | [AntonioMrtz#261]

gigigimay · Oct 24, 2024 · 67e1467 · 67e1467
1 parent 6c2e117
commit 67e1467
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 16 deletions.
diff --git a/Electron/src/global/global.ts b/Electron/src/global/global.ts
@@ -10,6 +10,8 @@ namespace Global {
   export const songArchitecture: SongArchitecture =
     SongArchitecture.BLOB_ARCHITECTURE;
 
+  export const coldStartRequestTimeout = 5000;
+
   export interface HandleUrlChangeResponse {
     canGoBack: boolean | undefined;
     canGoForward: boolean | undefined;

diff --git a/Electron/src/pages/StartMenu/StartMenu.tsx b/Electron/src/pages/StartMenu/StartMenu.tsx
@@ -8,6 +8,8 @@ import { getToken } from 'utils/token';
 // eslint-disable-next-line camelcase
 import { Body_login_user_login__post } from 'swagger/api/models/Body_login_user_login__post';
 import timeout from 'utils/timeout';
+import LoadingCircle from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircle';
+import Global from 'global/global';
 import styles from './startMenu.module.css';
 import SpotifyElectronLogo from '../../assets/imgs/SpotifyElectronLogo.png';
 import { LoginService } from '../../swagger/api/services/LoginService';
@@ -17,6 +19,10 @@ interface PropsStartMenu {
   setIsSigningUp: Function;
 }
 
+const coldStartTimeoutErrorTitle = 'El servidor esta iniciándose';
+const coldStartTimeoutErrorDescription =
+  'El servidor esta iniciándose (cold-start), inténtelo de nuevo en 1 minuto';
+
 export default function StartMenu({
   setIsLogged,
   setIsSigningUp,
@@ -37,6 +43,22 @@ export default function StartMenu({
     password: '',
   });
 
+  const showErrorPopover = ({
+    title,
+    description,
+  }: Pick<PropsInfoPopover, 'title' | 'description'>) => {
+    setPropsPopOver({
+      title,
+      description,
+      type: InfoPopoverType.ERROR,
+      triggerOpenConfirmationModal: false,
+      handleClose: () => {
+        setisOpenPopover(false);
+      },
+    });
+    setisOpenPopover(true);
+  };
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({
@@ -61,7 +83,7 @@ export default function StartMenu({
       const loginUserPromise = LoginService.loginUserLoginPost(loginData);
       const loginResponse = await Promise.race([
         loginUserPromise,
-        timeout(5000),
+        timeout(Global.coldStartRequestTimeout),
       ]);
       localStorage.setItem('jwt', loginResponse);
       setIsLogged(true);
@@ -73,24 +95,14 @@ export default function StartMenu({
       let description: string;
 
       if (error instanceof Error && error.message === 'Timeout') {
-        title = 'El servidor esta iniciándose';
-        description =
-          'El servidor esta iniciándose (cold-start), inténtelo de nuevo en 1 minuto';
+        title = coldStartTimeoutErrorTitle;
+        description = coldStartTimeoutErrorDescription;
       } else {
         title = 'Los credenciales introducidos no son válidos';
         description = 'No se ha podido iniciar sesión';
       }
 
-      setPropsPopOver({
-        title,
-        description,
-        type: InfoPopoverType.ERROR,
-        triggerOpenConfirmationModal: false,
-        handleClose: () => {
-          setisOpenPopover(false);
-        },
-      });
-      setisOpenPopover(true);
+      showErrorPopover({ title, description });
     } finally {
       setLoginLoading(false);
     }
@@ -106,10 +118,22 @@ export default function StartMenu({
         setAutoLoginLoading(true);
         const token = getToken();
         if (!token) return;
-        await LoginService.loginUserWithJwtLoginTokenTokenPost(token);
+        const autoLoginPromise =
+          LoginService.loginUserWithJwtLoginTokenTokenPost(token);
+        await Promise.race([
+          autoLoginPromise,
+          timeout(Global.coldStartRequestTimeout),
+        ]);
         setIsLogged(true);
       } catch (error) {
-        console.log(`User invalid credentials for auto login with JWT token`);
+        if (error instanceof Error && error.message === 'Timeout') {
+          showErrorPopover({
+            title: coldStartTimeoutErrorTitle,
+            description: coldStartTimeoutErrorDescription,
+          });
+        } else {
+          console.log(`User invalid credentials for auto login with JWT token`);
+        }
       } finally {
         setAutoLoginLoading(false);
       }
@@ -119,6 +143,11 @@ export default function StartMenu({
 
   return (
     <div className={`${styles.mainModalContainer}`}>
+      {(autoLoginLoading || loginLoading) && (
+        <div className={`${styles.loadingCircleWrapper}`}>
+          <LoadingCircle />
+        </div>
+      )}
       {!autoLoginLoading && (
         <div className={`${styles.contentWrapper}`}>
           <div className={`d-flex flex-row ${styles.titleContainer}`}>
@@ -145,6 +174,7 @@ export default function StartMenu({
                 id="nombre"
                 placeholder="Nombre de usuario"
                 onChange={handleChange}
+                disabled={loginLoading}
                 spellCheck={false}
                 required
               />
@@ -160,6 +190,7 @@ export default function StartMenu({
                 id="password"
                 placeholder="Contraseña"
                 onChange={handleChange}
+                disabled={loginLoading}
                 spellCheck={false}
                 required
               />
@@ -185,6 +216,7 @@ export default function StartMenu({
             </p>
             <button
               onClick={handleClickRegister}
+              disabled={loginLoading}
               type="button"
               style={{
                 color: 'var(--pure-white)',

diff --git a/Electron/src/pages/StartMenu/startMenu.module.css b/Electron/src/pages/StartMenu/startMenu.module.css
@@ -14,6 +14,15 @@
   z-index: 9999;
 }
 
+.loadingCircleWrapper {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .contentWrapper {
   background-color: black;
   border-radius: 8px;
@@ -84,6 +93,10 @@
   box-shadow: inset 0 0 0 3px var(--pure-white, #000000);
 }
 
+.formWrapper input:disabled {
+  opacity: 50%;
+}
+
 .loginButton {
   border-radius: 999px;
   background-color: var(--app-logo-color-darker);
@@ -122,6 +135,10 @@
   color: var(--app-logo-color-darker) !important;
 }
 
+.wrapperRegisterText button:disabled {
+  opacity: 50%;
+}
+
 @media (max-width: 1336px) {
   .contentWrapper h1 {
     margin-bottom: 2rem !important;