Mejora manejo de sesiones

6 files changed, 33 insertions, 4 deletions

diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts
index a114e8d..f3d01cc 100644
--- a/src/clients/loaders.ts
+++ b/src/clients/loaders.ts
@@ -2,10 +2,19 @@ import { redirect } from "react-router-dom";
 import { ApiClient } from "./api_client";
 import { Product, mapProduct } from "../models/product";
 import { Card } from "../models/card";
+import { refreshIfExpired, logout, presentSession } from "../lib/session";
 import Token from "../lib/token";
 import Order from "../models/order";
 
 export async function loader({ request }) {
+  if(presentSession()) {
+    if(!refreshIfExpired()) {
+      logout();
+
+      return redirect('/products');
+    }
+  }
+
   const client = new ApiClient();
   const url = new URL(request.url)
   const response = await client.get(`${url.pathname}${url.search}`);
diff --git a/src/components/addresses_table.tsx b/src/components/addresses_table.tsx
index f55c04a..3f0a323 100644
--- a/src/components/addresses_table.tsx
+++ b/src/components/addresses_table.tsx
@@ -16,7 +16,7 @@ export default function AddressesTable({ addresses }) {
           Nueva dirección
         </a>
       </div>
-      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <table className="my-4 w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" className="px-6 py-3">
diff --git a/src/components/main_page_dropdown_menu.tsx b/src/components/main_page_dropdown_menu.tsx
index 8c043a8..16fb302 100644
--- a/src/components/main_page_dropdown_menu.tsx
+++ b/src/components/main_page_dropdown_menu.tsx
@@ -1,6 +1,7 @@
 import UserAccountButton from "./user_account_button";
 import { LoginForm }  from "./forms/login_form";
 import Token from "../lib/token";
+import { refreshIfExpired, isUserAuthenticated } from "../lib/session";
 import UserAccountDropdownMenu from "./user_account_dropdown_menu";
 
 export default function MainPageDropdownMenu() {
diff --git a/src/components/payment_methods_table.tsx b/src/components/payment_methods_table.tsx
index f4c9f3e..4fda4b3 100644
--- a/src/components/payment_methods_table.tsx
+++ b/src/components/payment_methods_table.tsx
@@ -17,7 +17,7 @@ export default function PaymentMethodsTable({ payment_methods }) {
           Nuevo método de pago
         </a>
       </div>
-      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <table className="my-4 w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" className="px-6 py-3">
diff --git a/src/lib/session.ts b/src/lib/session.ts
index 5d4967f..28284ed 100644
--- a/src/lib/session.ts
+++ b/src/lib/session.ts
@@ -1,7 +1,22 @@
 import Token from "./token";
 
-export function isUserAuthenticated() {
-  const session = new Token();
+const session = new Token();
 
+export function isUserAuthenticated() {
   return session.get() != null && !session.expired();
+}
+
+export function refreshIfExpired() {
+  if(!isUserAuthenticated())
+    return session.refresh();
+
+  return true;
+}
+
+export function presentSession() {
+  return session.get() != null;
+}
+
+export function logout() {
+  session.logout();
 }
\ No newline at end of file
diff --git a/src/lib/token.ts b/src/lib/token.ts
index f27df28..68765d7 100644
--- a/src/lib/token.ts
+++ b/src/lib/token.ts
@@ -38,8 +38,12 @@ export default class Token {
       const response = axios.post('/refresh_tokens', null, options);
       this.setRefresh(response.data.refresh);
       this.set(response.data.token);
+
+      return true;
     } catch(error) {
       this.logout();
+
+      return false;
     }
   }