From e6fa7db87b5f879de71bfc9e4f8afea9d722ab95 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Fri, 26 May 2023 18:57:36 -0600
Subject: Añade creación de reseñas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/address_form.tsx |  2 +-
 src/components/forms/review_form.tsx  | 48 +++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/forms/review_form.tsx

(limited to 'src/components/forms')

diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index 897b09b..2d3b8f4 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -54,7 +54,7 @@ export default function AddressForm({ address = null, errors = null }) {
     id: "country-field",
     type: "select",
     name: "country",
-    label: "Ciudad"
+    label: "País"
   }
 
   if(errors)
diff --git a/src/components/forms/review_form.tsx b/src/components/forms/review_form.tsx
new file mode 100644
index 0000000..8ed3848
--- /dev/null
+++ b/src/components/forms/review_form.tsx
@@ -0,0 +1,48 @@
+import { Form } from "react-router-dom";
+import StarPicker from 'react-star-picker';
+import "../stylesheets/shared.css";
+import { useState } from "react";
+
+function getTextArea(errors) {
+  if(errors && errors.review) {
+    const error_messages = errors.review.map(message => 
+      <p className="mt-2 text-sm text-red-600 dark:text-red-500">{message}</p>  
+    );
+
+    return (
+      <div className="my-2">
+        <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm bg-red-50 border border-red-500 text-red-900 placeholder-red-700 rounded-lg border focus:ring-blue-500 focus:border-blue-500 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" placeholder="Deje una reseña..."></textarea>
+        {error_messages}
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-2">
+      <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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" placeholder="Deje una reseña..."></textarea>
+    </div>
+  );
+}
+
+export default function ReviewForm({ product, errors }) {
+  const [rating, setRating] = useState(0);
+  const review_field = getTextArea(errors);
+
+  const onChange = (value, name) => {
+    setRating(value);
+  };
+
+  return (
+    <Form method="post" action={`/products/${product.public_id}`} className="flex flex-col justify-end">
+      <input type="hidden" id="rating-field" name="rating" value={rating}/>
+      <StarPicker onChange={onChange} value={rating} name="rating" />
+      {review_field}
+      <div className="my-2">
+        <button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+                name="intent" value="create_review">
+          Enviar
+        </button>
+      </div>
+    </Form>
+  );
+}
\ No newline at end of file
-- 
cgit v1.2.3