Añade loader

10 files changed, 53 insertions, 11 deletions

diff --git a/src/clients/api_client.ts b/src/clients/api_client.ts
index f2bcd35..a7b5e0d 100644
--- a/src/clients/api_client.ts
+++ b/src/clients/api_client.ts
@@ -1,16 +1,17 @@
 import axios from "axios";
 
 export class ApiClient {
-  readonly url = "http://localhost:5000/api";
+  readonly url = "http://localhost:3000/api";
 
   async get(path: string) {
     const request_url = `${ this.url }${ path }`;
 
     try {
       const response = await axios.get(request_url);
+
       return response;
     } catch(error) {
-      console.log(error);
+      return error.response;
     }
   }
 }
\ No newline at end of file
diff --git a/src/clients/loader.ts b/src/clients/loader.ts
new file mode 100644
index 0000000..645ba88
--- /dev/null
+++ b/src/clients/loader.ts
@@ -0,0 +1,8 @@
+import { ApiClient } from "./api_client";
+
+export default async function loader(path: string, { params }) {
+  const client = new ApiClient();
+  const response = await client.get(path);
+  
+  return response.data;
+}
\ No newline at end of file
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 4988ecc..742ad0e 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import Navbar from "./navbar";
 import "./stylesheets/shared.css"
 
-interface Props {
+export interface Props {
   children: ReactNode;
 }
 
diff --git a/src/components/main_content_layout.tsx b/src/components/main_content_layout.tsx
new file mode 100644
index 0000000..0b55d6a
--- /dev/null
+++ b/src/components/main_content_layout.tsx
@@ -0,0 +1,12 @@
+import "./stylesheets/shared.css"
+import { Props } from "./layout";
+
+export default function MainContentLayout(props: Props ) {
+  return(
+    <>
+      <div className="main-view">
+        { props.children }
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/search_bar.tsx b/src/components/search_bar.tsx
index 5f1f438..a33bcca 100644
--- a/src/components/search_bar.tsx
+++ b/src/components/search_bar.tsx
@@ -1,18 +1,19 @@
-import "./stylesheets/searchbar.css"
+import "./stylesheets/shared.css"
+import "./stylesheets/search_bar.css"
 
 export default function SearchBar({ path }) {
   return(
     <div>
       <form action={path} method="get" id="search-form">
-        <div className="flex justify-center">
-          <div>
+        <div className="flex justify-start">
+          <div className="search-bar-field">
             <input className="rounded-l border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:focus:border-primary" 
               type="text" name="name" id="search"/>
           </div>
 
           <div>
             <button form="search-form"
-                    className="rounded-r bg-primary px-6 py-2 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
+                    className="button rounded-r px-6 py-2 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 20 20"
diff --git a/src/components/stylesheets/search_bar.css b/src/components/stylesheets/search_bar.css
new file mode 100644
index 0000000..5719db7
--- /dev/null
+++ b/src/components/stylesheets/search_bar.css
@@ -0,0 +1,3 @@
+.search-bar-field {
+  margin-left: 2px;
+}
\ No newline at end of file
diff --git a/src/components/stylesheets/searchbar.css b/src/components/stylesheets/searchbar.css
deleted file mode 100644
index 99d3f28..0000000
--- a/src/components/stylesheets/searchbar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.searchbar {
-  display: flex;
-}
\ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index 9d95e0f..dd50228 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -4,4 +4,13 @@
   position: relative;
   top: 80px;
   left: 10%;
+}
+
+.button {
+  background-color: #394490;
+}
+
+.main-view {
+  width: 80%;
+  margin: auto;
 }
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 891dd4b..af84886 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,11 +3,15 @@ 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 './index.css'
 
 const routes = [
   {
     path: '/products',
+    loader: async({ params }) => {
+      return loader("/products", params);
+    },
     element: <Products/>
   },
   {
diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx
index 6b24269..80a9794 100644
--- a/src/routes/products/products.tsx
+++ b/src/routes/products/products.tsx
@@ -1,9 +1,16 @@
+import { useLoaderData } from "react-router-dom";
 import SearchBar from "../../components/search_bar";
+import MainContentLayout from "../../components/main_content_layout";
 
 export default function Products() {
+  const products = useLoaderData();
+  console.log(products);
+
   return(
     <>
-      <SearchBar path="/products"/>
+      <MainContentLayout>
+        <SearchBar path="/products"/>
+      </MainContentLayout>
     </>
   );
 }
\ No newline at end of file