Phase 3: Resolve SonarCloud reported issues

backend/pcmod/src/main/java/es/codeurjcstudents/pcmod/service/ImageService.java

@@ -17,7 +17,7 @@
 @Service
 public class ImageService {
 
-  private static final long MAX_SIZE = 10 * 1024 * 1024; // 10MB
+  private static final long MAX_SIZE = 10L * 1024L * 1024L; // 10MB
   private static final List<String> ALLOWED_TYPES = List.of("image/jpeg", "image/png", "image/webp");
 
   private final ImageRepository imageRepository;

backend/pcmod/src/test/java/es/codeurjcstudents/pcmod/e2e/ui/ComponentsSystemTests.java

@@ -3,6 +3,7 @@
 import static org.assertj.core.api.Assertions.assertThat;
 
 import java.time.Duration;
+import java.util.Map;
 
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.AfterEach;
@@ -65,4 +66,28 @@ public void loadComponentsTest() throws InterruptedException {
     assertThat(driver.findElements(By.name("loadMore"))).isEmpty();
 
   }
+
+  @Test
+  public void loadErrorTest() {
+
+    driver.get("http://localhost:5173/components");
+
+    wait.until(ExpectedConditions.presenceOfElementLocated(By.name("loadMore")));
+    WebElement loadMoreButton = driver.findElement(By.name("loadMore"));
+
+    // Simulate a network error
+    ((ChromeDriver) driver).executeCdpCommand("Network.enable", Map.of());
+    ((ChromeDriver) driver).executeCdpCommand("Network.emulateNetworkConditions", Map.of(
+        "offline", true,
+        "latency", 0,
+        "downloadThroughput", 0,
+        "uploadThroughput", 0));
+
+    loadMoreButton.click();
+
+    wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("[role='alert']")));
+    String errorMessage = driver.findElement(By.cssSelector("[role='alert']")).getText();
+    assertThat(errorMessage).isEqualTo("Hubo un problema al cargar más componentes. Por favor, pruebe de nuevo.");
+
+  }
 }

frontend/app/components/componentCard.tsx

@@ -2,11 +2,7 @@ import { Link } from "react-router";
 import { Image as ImageIcon } from "react-bootstrap-icons";
 import type ComponentDTO from "~/dtos/ComponentDTO";
 
-interface ComponentCardProps {
-  component: ComponentDTO;
-}
-
-export default function ComponentCard({ component }: ComponentCardProps) {
+export default function ComponentCard({ component }: Readonly<{ component: ComponentDTO }>) {
   return (
     <div>
       <Link to={`/components/${component.id}`} className="component-card-link">

frontend/app/routes/components.tsx

@@ -61,7 +61,7 @@ export default function Components({ loaderData }: Route.ComponentProps) {
                 <h3 id={`name-${component.id}`}>{component.name}</h3>
                 <h4>Marca: {component.brand} | Tipo: {component.type} | Precio: {component.price} € | Stock: {component.stock} ud.</h4>
                 <p className="component-description">{component.description}</p>
-                <hr></hr>
+                <hr />
               </li>
             ))
           )}
@@ -74,6 +74,11 @@ export default function Components({ loaderData }: Route.ComponentProps) {
               )}
             </button>
           )}
+          {loadMoreError && (
+            <p className="text-danger" role="alert">
+              Hubo un problema al cargar más componentes. Por favor, pruebe de nuevo.
+            </p>
+          )}
         </div>
       </div>
     </main>

frontend/app/routes/index.tsx

@@ -30,23 +30,20 @@ export default function Index({ loaderData }: Route.ComponentProps) {
           <Col lg={6} md={12} className="col">
             <h1 id="welcome">Bienvenido a PCMod</h1>
             <p>
-              PCMod es una plataforma de compra online de componentes de ordenador. En nuestra tienda podrás encontrar una amplia selección de productos para montar tu nuevo PC o actualizar el que ya tienes.
+              PCMod es una plataforma de compra online de componentes de ordenador. En nuestra tienda podrá encontrar una amplia selección de productos para montar su nuevo PC o actualizar el que ya tiene.
             </p>
             <p>
               Buscamos ofrecer la mejor experiencia para nuestros clientes, y, por ello, ofrecemos un servicio de compra sencillo y eficiente. Nuestros clientes cuentan con un servicio de confirmación de operaciones por correo electrónico, un sistema de pago seguro y un asistente potenciado por IA.
             </p>
             <p>
-              Si tienes cualquier duda, no dudes en ponerte en contacto con nosotros:
-              <a href="mailto:....">
-                <span>....</span>
-              </a>
+              Si tiene cualquier duda, no dude en ponerse en contacto con nosotros:{' '}<a href="mailto:...."><span>....</span></a>
             </p>
           </Col>
         </section>
 
         <section className="recentComponents-section">
 
-          <h2>Descubre nuestras últimas novedades:</h2>
+          <h2>Descubra nuestras últimas novedades:</h2>
 
           <div className="row-recentComponents">
             {recentComponents.length > 0 ? (