From a9cc022d521da5bbca9183c15f91e60c5aa4ac2b Mon Sep 17 00:00:00 2001 From: Telkens Date: Thu, 16 May 2024 17:42:50 -0500 Subject: [PATCH] Add user image and show review form options --- package-lock.json | 102 ++++++++++++++++++ package.json | 2 + .../atc24$rw/admin/components/ReviewForm.tsx | 57 +++++++++- src/components/ui/checkbox.tsx | 30 ++++++ src/store/useReviewFormModal.ts | 2 +- 5 files changed, 188 insertions(+), 5 deletions(-) create mode 100644 src/components/ui/checkbox.tsx diff --git a/package-lock.json b/package-lock.json index 2aedc4f..d25ae6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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", @@ -22,6 +23,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", @@ -485,6 +487,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -831,6 +863,41 @@ } } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", + "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz", @@ -1324,6 +1391,14 @@ "has-symbols": "^1.0.3" } }, + "node_modules/attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", + "engines": { + "node": ">=4" + } + }, "node_modules/autoprefixer": { "version": "10.4.17", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz", @@ -2463,6 +2538,17 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-selector": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -4173,6 +4259,22 @@ "react": "^18.2.0" } }, + "node_modules/react-dropzone": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "dependencies": { + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-fast-marquee": { "version": "1.6.4", "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.4.tgz", diff --git a/package.json b/package.json index 264ba22..149e078 100644 --- 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 index fa458b1..610b11c 100644 --- 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>({ 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) => { Calificación - + @@ -139,12 +148,52 @@ export const ReviewForm = ({ review }: ReviewFormProps) => { )} /> +
+ + {isDragActive ? ( +
+ +

Suelta la imagen

+
+ ) : ( +
+ +

Carga la imagen del usuario, arrastra o haz click

+
+ )} +
+ ( + + +
+ + +
+ + + )} + />