From 8814d4b10a9faf5932bd9efcc389fa89f8ffe4b8 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Wed, 21 Jan 2026 17:59:32 -0500
Subject: [PATCH] fix: abstract Catalog to ProductCards

---
 src/App.tsx                        | 23 +++++++++++++--
 src/pages/catalog/ProductCards.tsx | 27 +++++++++++++++++
 src/pages/catalog/catalog.tsx      | 47 ------------------------------
 src/pages/catalog/index.ts         |  2 +-
 src/types.ts                       |  7 +++++
 5 files changed, 56 insertions(+), 50 deletions(-)
 create mode 100644 src/pages/catalog/ProductCards.tsx
 delete mode 100644 src/pages/catalog/catalog.tsx
 create mode 100644 src/types.ts

diff --git a/src/App.tsx b/src/App.tsx
index 5195b04..aa70508 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,29 @@
 import './App.css'
-import { Catalog } from './pages'
+import { useEffect, useState } from "react";
+import type { Product } from './types';
+import { ProductCards } from './pages'
+
+
 function App() {
 
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    async function fetchProducts(){
+      try{
+        const response = await fetch("http://localhost:8010/api/v1/products");
+        const data = await response.json();
+        setProducts(data);
+      }catch(error){
+        console.error(`Este es el error: ${error}`);
+      };
+    };
+    fetchProducts();
+  }, []);
+
   return (
     <>
-      <Catalog/>
+      <ProductCards products={ products }/>
     </>
   )
 }
diff --git a/src/pages/catalog/ProductCards.tsx b/src/pages/catalog/ProductCards.tsx
new file mode 100644
index 0000000..02332e3
--- /dev/null
+++ b/src/pages/catalog/ProductCards.tsx
@@ -0,0 +1,27 @@
+import { Card } from "./components";
+import type { Product } from '../../types.ts'
+
+type ProductCardProps = {
+  products: Product[];
+}
+
+const ProductCards = ({ products } : ProductCardProps) => {
+
+  return (
+    <>
+      { products.map((product) => {
+        return (
+          <Card
+            image={product.image}
+            name={product.name}
+            price={product.price}
+            description={ product.description}
+            cardId={product.id}
+          />
+        )
+      }) }
+    </>
+  )
+}
+
+export default ProductCards;
diff --git a/src/pages/catalog/catalog.tsx b/src/pages/catalog/catalog.tsx
deleted file mode 100644
index 6b1046d..0000000
--- a/src/pages/catalog/catalog.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect, useState } from "react";
-import { Card } from "./components";
-
-type Product = {
-  id: number;
-  name : string;
-  price: number;
-  description: string;
-  image: string;
-};
-
-const Catalog = () => {
-
-  const [products, setProducts] = useState<Product[]>([]);
-
-  useEffect(() => {
-    async function fetchProducts(){
-      try{
-        const response = await fetch("http://localhost:8010/api/v1/products");
-        const data = await response.json();
-        setProducts(data);
-      }catch(error){
-        console.error(`Este es el error: ${error}`);
-      };
-    };
-    fetchProducts();
-  }, []);
-
-  console.log(products);
-  return (
-    <>
-      { products.map((product) => {
-        return (
-          <Card
-            image={product.image}
-            name={product.name}
-            price={product.price}
-            description={ product.description}
-            cardId={product.id}
-          />
-        )
-      }) }
-    </>
-  )
-}
-
-export default Catalog;
diff --git a/src/pages/catalog/index.ts b/src/pages/catalog/index.ts
index b11f23d..28c53a3 100644
--- a/src/pages/catalog/index.ts
+++ b/src/pages/catalog/index.ts
@@ -1 +1 @@
-export { default as Catalog} from './catalog.tsx';
+export { default as ProductCards} from './ProductCards.tsx';
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..6693298
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,7 @@
+export type Product = {
+  id: number;
+  name : string;
+  price: number;
+  description: string;
+  image: string;
+};