From 094ca06060e30d0d8a9af6103fe335243f929ae1 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Mon, 3 Jun 2024 17:24:45 -0500
Subject: [PATCH] Add status and image user properties to form

---
 src/actions/reviews.ts                        |  1 +
 .../atc24$rw/admin/components/ReviewForm.tsx  | 37 ++++++++++++++-----
 src/app/(admin)/atc24$rw/admin/schema.ts      |  1 +
 src/types.d.ts                                |  2 +
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/actions/reviews.ts b/src/actions/reviews.ts
index 544fe5c..f338c84 100644
--- a/src/actions/reviews.ts
+++ b/src/actions/reviews.ts
@@ -17,6 +17,7 @@ export const getReviews = async (): Promise<Review[]> => {
 };
 export const createReview = async (
   review: z.infer<typeof reviewSchema>,
+  image: File,
   token: string
 ) => {
   const newReview = {
diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
index 610b11c..dee6432 100644
--- a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
+++ b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
@@ -23,7 +23,7 @@ import { FiUploadCloud } from "react-icons/fi";
 import { toast } from "sonner";
 import { Textarea } from "@/components/ui/textarea";
 import { useDropzone } from "react-dropzone";
-import { Checkbox } from "@/components/ui/checkbox";
+import Image from "next/image";
 
 interface ReviewFormProps {
   review?: Review;
@@ -38,6 +38,10 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
       accept: {
         "image/*": [],
       },
+      multiple: false,
+      onDropRejected: () => {
+        toast.error("Archivo inválido");
+      },
     });
 
   const form = useForm<z.infer<typeof reviewSchema>>({
@@ -46,6 +50,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
       review: review?.review || "",
       rating: review?.rating || "5",
       user: review?.user || "",
+      active: review?.active || "false"
     },
   });
 
@@ -54,7 +59,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
     token: string
   ) => {
     startTransition(() => {
-      createReview(values, token)
+      createReview(values, acceptedFiles[0], token)
         .then((data) => {
           if (data.success) {
             toast.success(data.success);
@@ -93,6 +98,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
     } else {
       const updatedReview = {
         id: review.id,
+        image: acceptedFiles[0],
         ...values,
       };
 
@@ -152,8 +158,16 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
           {...getRootProps()}
           className="w-full p-4 shadow-sm text-sm text-muted-foreground rounded-md border border-input bg-transparent flex flex-col items-center justify-center"
         >
-          <Input type="file" required {...getInputProps()} />
-          {isDragActive ? (
+          <Input type="file" {...getInputProps()} />
+          {acceptedFiles[0] ? (
+            <Image
+              src={URL.createObjectURL(acceptedFiles[0])}
+              width={150}
+              height={150}
+              className="aspect-square object-cover"
+              alt="Imagen del usuario"
+            />
+          ) : isDragActive ? (
             <div className="flex flex-col gap-y-0.5 items-center">
               <FiUploadCloud className="animate-bounce" size={50} />
               <p>Suelta la imagen</p>
@@ -167,15 +181,20 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
         </div>
         <FormField
           control={form.control}
-          name="user"
+          name="active"
           render={({ field }) => (
-            <FormItem className="w-full flex items-center gap-x-2">
+            <FormItem className="w-full flex items-center">
               <FormControl>
-                <div className="flex items-center space-x-2">
-                  <Checkbox id="show" {...field} />
+                <div className="flex items-center gap-x-2">
+                  <Input
+                    {...field}
+                    type="checkbox"
+                    id="show"
+                    className="w-5 h-5"
+                  />
                   <label
                     htmlFor="show"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    className="text-sm h-5 flex items-center font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     Mostrar en pantalla
                   </label>
diff --git a/src/app/(admin)/atc24$rw/admin/schema.ts b/src/app/(admin)/atc24$rw/admin/schema.ts
index f96eff3..6659218 100644
--- a/src/app/(admin)/atc24$rw/admin/schema.ts
+++ b/src/app/(admin)/atc24$rw/admin/schema.ts
@@ -4,4 +4,5 @@ export const reviewSchema = z.object({
   review: z.string().min(10, { message: "La reseña es muy corta" }),
   rating: z.string().min(1),
   user: z.string().min(3, { message: "El nombre es inválido" }),
+  active: z.boolean().or(z.string()).transform((val) => val.toString()).optional()
 });
diff --git a/src/types.d.ts b/src/types.d.ts
index de9ee11..180b473 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -7,4 +7,6 @@ export interface Review {
   review: string;
   rating: string;
   user: string;
+  image: File,
+  active?: string;
 }