Add user image and show review form options

Dium-dev · May 16, 2024 · a9cc022 · a9cc022
1 parent 201aa03
commit a9cc022
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
@@ -23,6 +24,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-fast-marquee": "^1.6.4",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.0.1",

diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
@@ -19,8 +19,11 @@ import { createReview, updateReview } from "@/actions/reviews";
 import { Review } from "@/types";
 import { Button } from "@/components/ui/button";
 import { ImSpinner2 } from "react-icons/im";
+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";
 
 interface ReviewFormProps {
   review?: Review;
@@ -30,6 +33,12 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
   const [isPending, startTransition] = useTransition();
   const { onClose } = useReviewFormModal();
   const router = useRouter();
+  const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
+    useDropzone({
+      accept: {
+        "image/*": [],
+      },
+    });
 
   const form = useForm<z.infer<typeof reviewSchema>>({
     resolver: zodResolver(reviewSchema),
@@ -84,8 +93,8 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
     } else {
       const updatedReview = {
         id: review.id,
-        ...values
-      }
+        ...values,
+      };
 
       handleUpdate(updatedReview, token);
     }
@@ -121,7 +130,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
             <FormItem className="w-full">
               <FormLabel>Calificación</FormLabel>
               <FormControl>
-                <Input type="number" max={5} min={1} {...field} step={0.5}/>
+                <Input type="number" max={5} min={1} {...field} step={0.5} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -139,12 +148,52 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
             </FormItem>
           )}
         />
+        <div
+          {...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 ? (
+            <div className="flex flex-col gap-y-0.5 items-center">
+              <FiUploadCloud className="animate-bounce" size={50} />
+              <p>Suelta la imagen</p>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-y-0.5 items-center">
+              <FiUploadCloud size={50} />
+              <p>Carga la imagen del usuario, arrastra o haz click</p>
+            </div>
+          )}
+        </div>
+        <FormField
+          control={form.control}
+          name="user"
+          render={({ field }) => (
+            <FormItem className="w-full flex items-center gap-x-2">
+              <FormControl>
+                <div className="flex items-center space-x-2">
+                  <Checkbox id="show" {...field} />
+                  <label
+                    htmlFor="show"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    Mostrar en pantalla
+                  </label>
+                </div>
+              </FormControl>
+            </FormItem>
+          )}
+        />
         <Button
           className="w-full bg-primary-lm hover:bg-red-600"
           disabled={isPending}
         >
           {!isPending ? (
-            review ? "Actualizar reseña" : "Registrar reseña"
+            review ? (
+              "Actualizar reseña"
+            ) : (
+              "Registrar reseña"
+            )
           ) : (
             <ImSpinner2 size={20} className="animate-spin h-5 w-5" />
           )}

diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/store/useReviewFormModal.ts b/src/store/useReviewFormModal.ts
@@ -24,7 +24,7 @@ export const useReviewFormModal = create<ReviewFormModal>((set) => ({
   defaultValues: {
     id: '',
     review: '',
-    rating: 5,
+    rating: '5',
     user: ''
   }
 }));