Añade página de error

7 files changed, 55 insertions, 7 deletions

diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts
index f3d01cc..ffb44f3 100644
--- a/src/clients/loaders.ts
+++ b/src/clients/loaders.ts
@@ -3,6 +3,7 @@ import { ApiClient } from "./api_client";
 import { Product, mapProduct } from "../models/product";
 import { Card } from "../models/card";
 import { refreshIfExpired, logout, presentSession } from "../lib/session";
+import { deleteEmptyParams } from "../lib/form_utils";
 import Token from "../lib/token";
 import Order from "../models/order";
 
@@ -17,7 +18,8 @@ export async function loader({ request }) {
 
   const client = new ApiClient();
   const url = new URL(request.url)
-  const response = await client.get(`${url.pathname}${url.search}`);
+  const params = '?' + deleteEmptyParams(new URLSearchParams(url.search)).toString();
+  const response = await client.get(`${url.pathname}${params}`);
   
   return response;
 }
@@ -87,6 +89,13 @@ export async function accountLoader() {
 export async function productLoader({ params }) {
   const client = new ApiClient();
   const response = await client.getProduct(params.productId);
+
+  if(response[0].response?.status == 404) {
+    throw new Response("", {
+      status: 404,
+      statusText: "El producto que desea buscar no existe",
+    });
+  }
   
   return [response[0], response[1]];
 }
diff --git a/src/components/error_page.tsx b/src/components/error_page.tsx
new file mode 100644
index 0000000..3c479be
--- /dev/null
+++ b/src/components/error_page.tsx
@@ -0,0 +1,22 @@
+import { useRouteError } from "react-router-dom";
+import "./stylesheets/shared.css";
+import MainContentLayout from "./main_content_layout";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+
+  return(
+    <MainContentLayout>
+      <div className="flex flex-col justify-center my-2">
+        <div>
+          <h1 className="text-3xl">
+            Error {error.status}
+          </h1>
+        </div>
+        <div className="text-xl">
+          {error.error.message || error.statusText}
+        </div>
+      </div>
+    </MainContentLayout>
+  );
+}
\ No newline at end of file
diff --git a/src/lib/form_utils.ts b/src/lib/form_utils.ts
index 43fe0fa..c7abb1e 100644
--- a/src/lib/form_utils.ts
+++ b/src/lib/form_utils.ts
@@ -6,6 +6,21 @@ export interface FormError {
   message: string;
 }
 
+export function deleteEmptyParams(params: URLSearchParams) {
+  const to_delete = [];
+  const trimmed_params = params;
+
+  for(const [key, value] of params.entries()) {
+    if(value == '')
+      to_delete.push(key);
+  }
+
+  for(const key of to_delete)
+    trimmed_params.delete(key);
+
+  return trimmed_params;
+}
+
 export function deleteEmptyFields(form: FormData) {
   const trimmed_form = new FormData();
 
diff --git a/src/lib/session.ts b/src/lib/session.ts
index 28284ed..e3d4784 100644
--- a/src/lib/session.ts
+++ b/src/lib/session.ts
@@ -6,9 +6,9 @@ export function isUserAuthenticated() {
   return session.get() != null && !session.expired();
 }
 
-export function refreshIfExpired() {
+export async function refreshIfExpired() {
   if(!isUserAuthenticated())
-    return session.refresh();
+    return await session.refresh();
 
   return true;
 }
diff --git a/src/lib/token.ts b/src/lib/token.ts
index 68765d7..a92d242 100644
--- a/src/lib/token.ts
+++ b/src/lib/token.ts
@@ -27,7 +27,7 @@ export default class Token {
     sessionStorage.removeItem("refresh");
   }
 
-  refresh() {
+  async refresh() {
     const options = {
       headers: {
         Authorization: `Bearer ${this.getRefresh()}`
@@ -35,7 +35,7 @@ export default class Token {
     }
 
     try {
-      const response = axios.post('/refresh_tokens', null, options);
+      const response = await axios.post('http://localhost:3000/api/refresh_tokens', null, options);
       this.setRefresh(response.data.refresh);
       this.set(response.data.token);
 
diff --git a/src/main.tsx b/src/main.tsx
index ab98f13..7ffaf2f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,7 @@ import Companies from "./routes/companies/companies";
 import Account from "./routes/account/account";
 import Cart from "./routes/account/cart";
 import Orders from "./routes/account/orders";
+import ErrorPage from "./components/error_page";
 import { EditAccount } from './routes/account/edit';
 import { Edit as EditAddress } from "./routes/account/addresses/edit";
 import { create, editAccount, authenticatedEdit, deleteFromCart, placeOrder, productAction } from './clients/actions';
@@ -81,7 +82,8 @@ const routes = [
   },
   {
     path: '/',
-    element: <Navigate to='/products'/>
+    element: <Navigate to='/products'/>,
+    errorElement: <ErrorPage />
   }
 ];
 
diff --git a/src/routes/products/products.tsx b/src/routes/products/products.tsx
index 27192d3..881c1f6 100644
--- a/src/routes/products/products.tsx
+++ b/src/routes/products/products.tsx
@@ -1,4 +1,4 @@
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, useRouteError } from "react-router-dom";
 import ProductListing from "../../components/product_listing";
 import SearchBar from "../../components/search_bar";
 import MainContentLayout from "../../components/main_content_layout";