Añade listado de productos

7 files changed, 96 insertions, 9 deletions

diff --git a/src/clients/loader.ts b/src/clients/loader.ts
index 645ba88..c529806 100644
--- a/src/clients/loader.ts
+++ b/src/clients/loader.ts
@@ -1,8 +1,9 @@
 import { ApiClient } from "./api_client";
 
-export default async function loader(path: string, { params }) {
+export default async function productLoader({ request }) {
   const client = new ApiClient();
-  const response = await client.get(path);
+  const url = new URL(request.url)
+  const response = await client.get(url.pathname);
   
   return response.data;
 }
\ No newline at end of file
diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
new file mode 100644
index 0000000..497bd19
--- /dev/null
+++ b/src/components/product_listing.tsx
@@ -0,0 +1,67 @@
+import { Collapse, Ripple, initTE} from "tw-elements";
+initTE({Collapse, Ripple});
+import "./stylesheets/shared.css"
+import "./stylesheets/product_listing.css"
+
+export default function ProductListing({ product }) {
+  const collapseMenu = `collapse${product.id}`
+  const collapseTarget = `#${collapseMenu}`
+  const categories = product.attributes.categories.map(category =>
+
+    <li>{category}</li>
+  );
+
+  return (
+    <div className="flex w-3/5 my-4  border-solid border-2 border-gray-200">
+      <img className="listing-image" src={product.attributes.picture} />
+      <div className="overflow-hidden">
+        <table>
+          <thead>
+            <tr >
+              <th scope="col" className="product-listing-text font-bold text-2xl px-6 py-4">{product.attributes.name}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b dark:border-neutral-500">
+              <td className="product-listing-text text-xl">Precio al por menor</td>
+              <td className="text-neutral-900 text-xl">{product.attributes.unitary_price} $</td>
+            </tr>
+            <tr className="border-b dark:border-neutral-500">
+              <td className="product-listing-text text-xl">Precio al por mayor</td>
+              <td className="text-neutral-900 text-xl">{product.attributes.bulk_price} $</td>
+            </tr>
+            <tr className="border-b dark:border-neutral-500">
+              <td className="product-listing-text text-xl">Proveedor</td>
+              <td className="text-neutral-900 text-xl">{product.attributes.company.name}</td>
+            </tr>
+            <tr>
+              <td>
+                <div className="my-2">
+                  <button
+                    className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                    type="button"
+                    data-te-collapse-init
+                    data-te-ripple-init
+                    data-te-ripple-color="light"
+                    data-te-target={collapseTarget}
+                    aria-expanded="false"
+                    aria-controls={collapseMenu}>
+                    Categorías
+                  </button>
+                  <div className="!visible hidden" id={collapseMenu} data-te-collapse-item>
+                    <div
+                      className="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
+                      <ul>
+                        <li>{categories}</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/stylesheets/navbar.css b/src/components/stylesheets/navbar.css
index 75748a6..357271f 100644
--- a/src/components/stylesheets/navbar.css
+++ b/src/components/stylesheets/navbar.css
@@ -1,7 +1,6 @@
 .navbar {
   overflow: hidden;
   margin-bottom: 5px;
-  /*position: fixed;*/
   top: 0;
   width: 100%;
   border-bottom: solid 5px #394490;
diff --git a/src/components/stylesheets/product_listing.css b/src/components/stylesheets/product_listing.css
new file mode 100644
index 0000000..c926448
--- /dev/null
+++ b/src/components/stylesheets/product_listing.css
@@ -0,0 +1,9 @@
+.product-listing {
+  width: 70%;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.product-listing-text {
+  color: #394490;
+}
\ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index dd50228..2cda15b 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -13,4 +13,9 @@
 .main-view {
   width: 80%;
   margin: auto;
+}
+
+.listing-image {
+  height: 296px;
+  width: auto;
 }
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index af84886..7d0af9a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,15 +3,13 @@ import ReactDOM from 'react-dom/client'
 import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 import Products from "./routes/products/products";
 import Layout from "./components/layout";
-import loader from "./clients/loader"; 
+import productLoader from "./clients/loader"; 
 import './index.css'
 
 const routes = [
   {
     path: '/products',
-    loader: async({ params }) => {
-      return loader("/products", params);
-    },
+    loader: productLoader,
     element: <Products/>
   },
   {
diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx
index 80a9794..c7f3a3a 100644
--- a/src/routes/products/products.tsx
+++ b/src/routes/products/products.tsx
@@ -1,15 +1,23 @@
 import { useLoaderData } from "react-router-dom";
+import ProductListing from "../../components/product_listing";
 import SearchBar from "../../components/search_bar";
 import MainContentLayout from "../../components/main_content_layout";
 
 export default function Products() {
-  const products = useLoaderData();
-  console.log(products);
+  const products = useLoaderData().data;
+  const productList = products.map(product =>
+    <li key={product.id}>
+      <ProductListing product={product}/>
+    </li>
+  );
 
   return(
     <>
       <MainContentLayout>
         <SearchBar path="/products"/>
+        <ul>
+          {productList}
+        </ul>
       </MainContentLayout>
     </>
   );