From 07ca16f41c53eccf4a9b959bd4e4656a987d8199 Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Tue, 25 Apr 2023 17:53:24 -0600 Subject: Añade listado de productos MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/clients/loader.ts | 5 +- src/components/product_listing.tsx | 67 ++++++++++++++++++++++++++ src/components/stylesheets/navbar.css | 1 - src/components/stylesheets/product_listing.css | 9 ++++ src/components/stylesheets/shared.css | 5 ++ src/main.tsx | 6 +-- src/routes/products/products.tsx | 12 ++++- tailwind.config.js | 9 ---- 8 files changed, 96 insertions(+), 18 deletions(-) create mode 100644 src/components/product_listing.tsx create mode 100644 src/components/stylesheets/product_listing.css 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 => + +
  • {category}
    • + ); + + return ( +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + +
    {product.attributes.name}
    Precio al por menor{product.attributes.unitary_price} $
    Precio al por mayor{product.attributes.bulk_price} $
    Proveedor{product.attributes.company.name}
    +
    + +
    +
    +
      +
    • {categories}
      • +
    +
    +
    +
    +
    +
    +
    + ); +} \ 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: }, { 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 => +
  • + +
    • + ); return( <> +
      + {productList} +
    ); diff --git a/tailwind.config.js b/tailwind.config.js index d36f1b1..ab4c580 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,15 +5,6 @@ export default { "./src/**/*.{js,ts,jsx,tsx}", "./node_modules/tw-elements/dist/js/**/*.js" ], - theme: { - extend: { - colors: { - blue: { - 600: "#394490" - } - } - }, - }, plugins: [require("tw-elements/dist/plugin.cjs")], } -- cgit v1.2.3