feat: handle register loading and timeout in RegisterMenu | [AntonioM…

…rtz#261]
gigigimay · Oct 18, 2024 · adc1f27 · adc1f27
1 parent cdaf4e6
commit adc1f27
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/Electron/src/pages/StartMenu/RegisterMenu.tsx b/Electron/src/pages/StartMenu/RegisterMenu.tsx
@@ -5,6 +5,8 @@ import {
   PropsInfoPopover,
 } from 'components/AdvancedUIComponents/InfoPopOver/types/InfoPopover';
 import timeout from 'utils/timeout';
+import Global from 'global/global';
+import LoadingCircle from 'components/AdvancedUIComponents/LoadingCircle/LoadingCircle';
 import styles from './startMenu.module.css';
 import SpotifyElectronLogo from '../../assets/imgs/SpotifyElectronLogo.png';
 import { UsersService } from '../../swagger/api/services/UsersService';
@@ -39,6 +41,9 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
     null,
   );
 
+  /* Loading state */
+  const [loading, setLoading] = useState(false);
+
   const handleRegister = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (
@@ -77,15 +82,20 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
     }
 
     try {
+      setLoading(true);
+
       const createUserPromise = UsersService.createUserUsersPost(
         formData.name,
         formData.photo,
         formData.password,
       );
 
-      await Promise.race([createUserPromise, timeout(3000)]);
-      setisOpenPopover(true);
+      await Promise.race([
+        createUserPromise,
+        timeout(Global.coldStartRequestTimeout),
+      ]);
 
+      setisOpenPopover(true);
       setPropsPopOver({
         title: 'Usuario registrado',
         description: 'El usuario ha sido registrado con éxito',
@@ -97,6 +107,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
         },
       });
     } catch (error: unknown) {
+      setLoading(false);
       console.log('Unable to register');
 
       let title: string;
@@ -130,6 +141,11 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
 
   return (
     <div className={`${styles.mainModalContainer}`}>
+      {loading && (
+        <div className={`${styles.loadingCircleWrapper}`}>
+          <LoadingCircle />
+        </div>
+      )}
       <div className={`${styles.contentWrapper}`}>
         <div className={`d-flex flex-row ${styles.titleContainer}`}>
           <img
@@ -155,6 +171,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
               id="name"
               placeholder="Nombre de usuario"
               onChange={handleChange}
+              disabled={loading}
               spellCheck={false}
               required
             />
@@ -170,6 +187,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
               id="photo"
               placeholder="Foto de perfil"
               onChange={handleChange}
+              disabled={loading}
               spellCheck={false}
               required
             />
@@ -187,6 +205,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
                 id="password"
                 placeholder="Contraseña"
                 onChange={handleChange}
+                disabled={loading}
                 spellCheck={false}
                 required
               />
@@ -203,6 +222,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
                 id="confirmpassword"
                 placeholder="Confirma tu contraseña"
                 onChange={handleChange}
+                disabled={loading}
                 spellCheck={false}
                 required
               />
@@ -215,6 +235,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
               backgroundColor: 'var(--app-logo-color)',
             }}
             className={`${styles.registerButton}`}
+            disabled={loading}
             onClick={handleRegister}
           >
             Registrar
@@ -231,6 +252,7 @@ export default function RegisterMenu({ setIsSigningUp }: PropsRegisterMenu) {
           </p>
           <button
             onClick={handleClickLogin}
+            disabled={loading}
             type="button"
             style={{
               color: 'var(--pure-white)',