From f6cc288cd67308330a83094bc2f0b64132ad81e8 Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Mon, 1 May 2023 12:25:03 -0600 Subject: Vista de proveedores --- package.json | 2 ++ src/clients/api_client.ts | 2 +- src/clients/loaders.ts | 2 +- src/components/company_details.tsx | 36 ++++++++++++++++++++++++++ src/components/navbar.tsx | 2 +- src/components/product_listing.tsx | 32 ++++++----------------- src/components/review.tsx | 2 +- src/components/stylesheets/company_details.css | 8 ++++++ src/components/stylesheets/shared.css | 4 +-- src/main.tsx | 6 +++++ src/routes/companies/companies.tsx | 23 ++++++++++++++++ src/routes/companies/company_products.tsx | 0 12 files changed, 89 insertions(+), 30 deletions(-) create mode 100644 src/components/company_details.tsx create mode 100644 src/components/stylesheets/company_details.css create mode 100644 src/routes/companies/companies.tsx create mode 100644 src/routes/companies/company_products.tsx diff --git a/package.json b/package.json index a5e8f47..b2f92e0 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,13 @@ "react-bootstrap-icons": "^1.10.3", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", + "react-select-country-list": "^2.2.3", "tw-elements": "^1.0.0-beta2" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", + "@types/react-select-country-list": "^2.2.1", "@typescript-eslint/eslint-plugin": "^5.57.1", "@typescript-eslint/parser": "^5.57.1", "@vitejs/plugin-react": "^4.0.0-beta.0", diff --git a/src/clients/api_client.ts b/src/clients/api_client.ts index 0e96c36..9a0d3f5 100644 --- a/src/clients/api_client.ts +++ b/src/clients/api_client.ts @@ -3,7 +3,7 @@ import axios from "axios"; export class ApiClient { readonly url = "http://localhost:3000/api"; - async get(path: string) { + async get(path: string, params?: URLSearchParams) { const request_url = `${ this.url }${ path }`; const response = await this.makeRequest(request_url); diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts index 43c1581..334f8aa 100644 --- a/src/clients/loaders.ts +++ b/src/clients/loaders.ts @@ -3,7 +3,7 @@ import { ApiClient } from "./api_client"; export async function loader({ request }) { const client = new ApiClient(); const url = new URL(request.url) - const response = await client.get(url.pathname); + const response = await client.get(`${url.pathname}${url.search}`); return response; } diff --git a/src/components/company_details.tsx b/src/components/company_details.tsx new file mode 100644 index 0000000..9b70c39 --- /dev/null +++ b/src/components/company_details.tsx @@ -0,0 +1,36 @@ +import countryList from "react-select-country-list"; +import "./stylesheets/company_details.css"; +import { Link } from "react-router-dom"; + +export default function CompanyDetails({ company }) { + return( + <> +
+ +
+ + + + + + + + + + + + +
+ + {company.attributes.name} + +
+ País + + {countryList().getLabel(company.attributes.country)} +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 2fd650d..dd8ca25 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -23,7 +23,7 @@ export default function Navbar() {
  • + href="/companies"> Proveedores
    • diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx index d9c5488..1da96c3 100644 --- a/src/components/product_listing.tsx +++ b/src/components/product_listing.tsx @@ -1,13 +1,13 @@ -import { Collapse, Ripple, initTE} from "tw-elements"; import { Link } from "react-router-dom"; +import { Dropdown } from "flowbite-react"; import "./stylesheets/shared.css" -import "./stylesheets/product_listing.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}
    • + + {category} + ); return ( @@ -44,25 +44,9 @@ export default function ProductListing({ product }) {
    - -
    -
    -
      - {categories} -
    -
    -
    + + {categories} +
    diff --git a/src/components/review.tsx b/src/components/review.tsx index e3f34df..153c202 100644 --- a/src/components/review.tsx +++ b/src/components/review.tsx @@ -9,7 +9,7 @@ export default function Review({ review }) { <>
    -
    +
    {review.attributes.author_name}
    diff --git a/src/components/stylesheets/company_details.css b/src/components/stylesheets/company_details.css new file mode 100644 index 0000000..438eef1 --- /dev/null +++ b/src/components/stylesheets/company_details.css @@ -0,0 +1,8 @@ +.company-logo { + width: 128px; + height: auto; +} + +.company-details-text { + color: #394490; +} \ No newline at end of file diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css index 2cda15b..5f410c7 100644 --- a/src/components/stylesheets/shared.css +++ b/src/components/stylesheets/shared.css @@ -3,7 +3,7 @@ display: flex; position: relative; top: 80px; - left: 10%; + left: 50%; } .button { @@ -12,7 +12,7 @@ .main-view { width: 80%; - margin: auto; + margin-left: auto; } .listing-image { diff --git a/src/main.tsx b/src/main.tsx index 45f5fd6..7b21b2a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client' import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom' import Products from "./routes/products/products"; import Product from "./routes/products/product"; +import Companies from "./routes/companies/companies"; import Layout from "./components/layout"; import { loader, productLoader } from "./clients/loaders"; import './index.css'; @@ -18,6 +19,11 @@ const routes = [ loader: productLoader, element: }, + { + path: "/companies", + loader: loader, + element: + }, { path: '/', element: diff --git a/src/routes/companies/companies.tsx b/src/routes/companies/companies.tsx new file mode 100644 index 0000000..7912b80 --- /dev/null +++ b/src/routes/companies/companies.tsx @@ -0,0 +1,23 @@ +import { useLoaderData } from "react-router-dom"; +import CompanyDetails from "../../components/company_details"; +import MainContentLayout from "../../components/main_content_layout"; +import SearchBar from "../../components/search_bar"; + +export default function Companies(){ + const companies = useLoaderData().data.data.map(company => +
  • + +
    • + ); + + return( + <> + + +
      + {companies} +
    +     + + ); +} \ No newline at end of file diff --git a/src/routes/companies/company_products.tsx b/src/routes/companies/company_products.tsx new file mode 100644 index 0000000..e69de29 -- cgit v1.2.3