Vista de proveedores

12 files changed, 89 insertions, 30 deletions

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(
+  <>
+    <div className="flex w-3/5 my-4">
+      <img className="mx-2 company-logo" src={company.attributes.logo}/>
+      <div className="relative overflow-x-auto">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <thead>
+            <tr>
+              <th scope="col" className="company-details-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
+                <Link to={`/products?company=${company.attributes.short_name}`}>
+                  {company.attributes.name}
+                </Link>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th scope="row" className="px-6 py-4 font-medium company-details-text whitespace-nowrap dark:text-white">
+                País
+              </th>
+              <td className="px-6 py-4">
+                {countryList().getLabel(company.attributes.country)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </>
+  );
+}
\ 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() {
 
                   <li className="mb-4 lg:mb-0 lg:pr-2">
                     <a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
-                       href="/products">
+                       href="/companies">
                       Proveedores
                     </a>
                   </li>
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 =>
-    <li>{category}</li>
+    <Dropdown.Item>
+      {category}
+    </Dropdown.Item>
   );
 
   return (
@@ -44,25 +44,9 @@ export default function ProductListing({ product }) {
           </tbody>
         </table>
         <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="flex 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>
-                {categories}
-              </ul>
-            </div>
-          </div>
+          <Dropdown label="Categorías" dismissOnClick={false} color="dark">
+            {categories}
+          </Dropdown>
         </div>
       </div>
     </div>
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 }) {
     <>
       <div className="grid grid-cols-10 w-3/5 my-4">
         <div className="flex flex-col col-span- justify-center mx-2">
-          <div>
+          <div className="text-black">
             {review.attributes.author_name}
           </div>
           <div>
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';
@@ -19,6 +20,11 @@ const routes = [
     element: <Product/>
   },
   {
+    path: "/companies",
+    loader: loader,
+    element: <Companies/>
+  },
+  {
     path: '/',
     element: <Navigate to='/products'/>
   }
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 =>
+    <li key={company.id}>
+      <CompanyDetails company={company}/>
+    </li>  
+  );
+
+  return(
+    <>
+      <MainContentLayout>
+        <SearchBar path="/companies"/>
+        <ul>
+          {companies}
+        </ul>
+      </MainContentLayout>
+    </>
+  );
+}
\ 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
--- /dev/null
+++ b/src/routes/companies/company_products.tsx