Añade creación de reseñas

2 files changed, 49 insertions, 1 deletions

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