Resuelto bug de renderizado de errores

4 files changed, 25 insertions, 10 deletions

diff --git a/src/clients/actions.ts b/src/clients/actions.ts
index ea3c332..bfddf54 100644
--- a/src/clients/actions.ts
+++ b/src/clients/actions.ts
@@ -1,6 +1,6 @@
 import { redirect } from "react-router-dom";
 import { ApiClient } from "./api_client";
-import { deleteEmptyFields } from "../lib/form_utils";
+import { clearSessionStorage, deleteEmptyFields, setFormErrorsInSessionStorage } from "../lib/form_utils";
 import Token from "../lib/token";
 
 export async function editAccount({ request }) {
@@ -19,12 +19,13 @@ export async function editAccount({ request }) {
 }
 
 export async function editAddress({ params, request }) {
-
+  clearSessionStorage();
   const client = new ApiClient();
   let form_data = await request.formData();
   form_data = deleteEmptyFields(form_data);
 
   try {
+
     const response = await client.put(`/account/addresses/${params.addressId}`, form_data);
 
     if(response.status == 401 || response.status == 404)
@@ -38,9 +39,7 @@ export async function editAddress({ params, request }) {
       return redirect("/products")
     } 
     else {
-      for(const [key, value] of Object.entries(error.response.data.errors)) {
-        sessionStorage.setItem(key, value);
-      }
+      setFormErrorsInSessionStorage(error.response.data.errors);
 
       return redirect(`/account/addresses/${params.addressId}/edit`);
     }
diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index d002c4e..11b0191 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -38,8 +38,9 @@ function getFieldProperties(address: any) {
   ];
 
   for(const field of fields) {
-    if(sessionStorage.getItem(field.name))
+    if(sessionStorage.getItem(field.name)) {
       field.error_message = sessionStorage.getItem(field.name);
+    }
   }
 
   return fields;
@@ -47,9 +48,9 @@ function getFieldProperties(address: any) {
 
 function getCountrySelectOptions(address: any, country_code: string) {
   if(country_code == address.country)
-    return (<option value={ country_code } selected>{ countryList().getLabel(country_code) }</option>);
+    return (<option key={ country_code } value={ country_code } selected>{ countryList().getLabel(country_code) }</option>);
   else
-    return (<option value={ country_code }>{ countryList().getLabel(country_code) }</option>);
+    return (<option key={ country_code } value={ country_code }>{ countryList().getLabel(country_code) }</option>);
 }
 
 export default function AddressForm({ address }) {
diff --git a/src/lib/form_utils.ts b/src/lib/form_utils.ts
index 73c5ba7..af29463 100644
--- a/src/lib/form_utils.ts
+++ b/src/lib/form_utils.ts
@@ -1,3 +1,5 @@
+import Token from "./token";
+
 export interface Error {
   field_div_id: string;
   field_input_id: string;
@@ -21,6 +23,19 @@ export function setFormErrorsInSessionStorage(errors: Array<any>) {
     }
 }
 
+export function clearSessionStorage() {
+  const token = new Token();
+  const stored_token = sessionStorage.getItem('token');
+  const refresh_token = sessionStorage.getItem('refresh');
+
+  sessionStorage.clear();
+
+  if(stored_token && refresh_token) {
+    token.set(stored_token);
+    token.setRefresh(refresh_token);
+  }
+}
+
 export function formHasErrors(fields: Array<string>) {
   for(const field_key of fields) {
     if(sessionStorage.getItem(field_key))
diff --git a/src/main.tsx b/src/main.tsx
index 6808475..b044f49 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -54,9 +54,9 @@ const routes = [
 const router = createBrowserRouter(routes);
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  //<React.StrictMode>
     <Layout>
       <RouterProvider router={router}/>
     </Layout>
-  </React.StrictMode>
+  //</React.StrictMode>
 )
\ No newline at end of file