Añade creación de reseñas

1 files changed, 22 insertions, 5 deletions

diff --git a/src/routes/products/product.tsx b/src/routes/products/product.tsx
index cca4073..fb883a8 100644
--- a/src/routes/products/product.tsx
+++ b/src/routes/products/product.tsx
@@ -2,17 +2,20 @@ import { useLoaderData, Form, useActionData } from "react-router-dom";
 import { CartPlusFill } from "react-bootstrap-icons"
 import { InfoModal } from "../../components/info_modal";
 import { Modal } from "flowbite";
+import { isUserAuthenticated } from "../../lib/session";
 import ProductListing from "../../components/product_listing";
 import MainContentLayout from "../../components/main_content_layout";
 import Review from "../../components/review";
+import ReviewForm from "../../components/forms/review_form";
 import "../../components/stylesheets/shared.css"
 import { useEffect } from "react";
 
 
 export default function Product() {
   let quantity_field;
+  let review_form_error_messages;
   const response = useLoaderData();
-  const response_status = useActionData();
+  const action_response = useActionData();
   const product = response[0].data;
   const reviews = response[1].data.data.map(review =>
     <li key={review.id}>
@@ -33,12 +36,22 @@ export default function Product() {
       modal.hide();
     });
 
-    if(response_status == 200)
+    if(action_response == 200)
       modal.show();
 
-  }, [response_status]);
+  }, [action_response]);
+  let review_form;
 
-  if(response_status == 422) {
+  if(isUserAuthenticated()) {
+    if(action_response?.status == 422)
+      review_form_error_messages = action_response.data.errors;
+    review_form = <ReviewForm product={product.data.attributes} errors={review_form_error_messages}/>;
+  }
+  else {
+    review_form = null;
+  }
+
+  if(action_response == 422) {
     quantity_field = (
       <div className="mx-2 w-17">
         <input type="number" id="quantity-field" name="quantity" className="bg-red-50 border border-red-500 text-red-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
@@ -62,13 +75,17 @@ export default function Product() {
         <div className="my-2 flex flex-flow-reverse w-4/6">
           <Form method="post" id="cart-button" className="flex h-10">
             {quantity_field}
-            <button className="flex inline-block rounded button w-50 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
+            <button className="flex inline-block rounded button w-50 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+                    name="intent" value="add_to_cart">
               <CartPlusFill size={16}/>
               <span className="mx-2">Añadir al carrito</span>
             </button>
           </Form>
         </div>
         <div className="my-4">
+          <div className="my-2 w-3/5">
+            {review_form}
+          </div>
           <ul>
             {reviews}
           </ul>