From ac12903f5cb0ccadf5c31db958019edfe69b29bf Mon Sep 17 00:00:00 2001 From: rdhwan Date: Sat, 22 Jul 2023 20:49:20 +0700 Subject: [PATCH 1/4] fix(dropzone): BIC's behaviour to return Blob Ada bug (mungkin) di browser-image-compression yg seharusnya return File malah return Blob, ada issue yang nge fix tp blom di pr di repo nya See https://github.com/Donaldcwl/browser-image-compression/pull/203 --- components/DropZone.tsx | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/components/DropZone.tsx b/components/DropZone.tsx index fdac296..b242928 100644 --- a/components/DropZone.tsx +++ b/components/DropZone.tsx @@ -1,9 +1,10 @@ import { useState, useEffect } from "react"; -import { Box, Text, Image, Center } from "@chakra-ui/react"; +import { Box, Text, Image, Center, Progress } from "@chakra-ui/react"; import { useController } from "react-hook-form"; import { useDropzone } from "react-dropzone"; import imageCompression from "browser-image-compression"; import Swal from "sweetalert2"; +import axios from "axios"; const DropZone = ({ control, @@ -20,15 +21,17 @@ const DropZone = ({ const { field: { value, onChange }, fieldState: { error }, - } = useController({ control, name, rules, defaultValue }); - - useEffect(() => { - return () => { - if (value && value.preview) { - URL.revokeObjectURL(value.preview); - } - }; - }, [value]); + } = useController({ + control, + name, + rules, + defaultValue: defaultValue + ? axios + .get(defaultValue) + .then((resp) => resp.data) + .catch((err) => defaultValue) + : undefined, + }); const { getRootProps, getInputProps } = useDropzone({ maxFiles: 1, @@ -40,7 +43,14 @@ const DropZone = ({ maxWidthOrHeight: 512, useWebWorker: true, }) - .then((file) => onChange(file)) + .then((file) => + onChange( + new File([file], file.name, { + lastModified: file.lastModified, + type: file.type, + }) + ) + ) .catch((err) => { console.error(err); Swal.fire( From 7bd0c4556695b9e1d0c99a06561fb79d794e2469 Mon Sep 17 00:00:00 2001 From: rdhwan Date: Sat, 22 Jul 2023 21:56:36 +0700 Subject: [PATCH 2/4] fix(stateDetails): fix wrong endpoint param --- app/dashboard/state/details/[stateID]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/dashboard/state/details/[stateID]/page.tsx b/app/dashboard/state/details/[stateID]/page.tsx index 5f31032..5f57261 100644 --- a/app/dashboard/state/details/[stateID]/page.tsx +++ b/app/dashboard/state/details/[stateID]/page.tsx @@ -443,7 +443,7 @@ export default function Details() { formData.append("test_file", data.stateLogo); api - .put(`/stateAct/update/`, formData, { + .put(`/stateAct/update/${params.stateID}`, formData, { headers: { "Content-Type": "multipart/form-data", }, From 8dcafe9c7c2aa7c35f507123b265965e98cff3bc Mon Sep 17 00:00:00 2001 From: rdhwan Date: Sun, 23 Jul 2023 02:53:02 +0700 Subject: [PATCH 3/4] feat: add preview for current image (sunting) --- components/DropZone.tsx | 42 ++++++++++++++++++++++++++++++----------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/components/DropZone.tsx b/components/DropZone.tsx index b242928..c5fb8bc 100644 --- a/components/DropZone.tsx +++ b/components/DropZone.tsx @@ -4,7 +4,10 @@ import { useController } from "react-hook-form"; import { useDropzone } from "react-dropzone"; import imageCompression from "browser-image-compression"; import Swal from "sweetalert2"; -import axios from "axios"; + +const validateImg = (url: string) => { + return url.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/) != null; +}; const DropZone = ({ control, @@ -14,8 +17,8 @@ const DropZone = ({ }: { control: any; name: string; - rules: any; - defaultValue?: any; + rules?: any; + defaultValue?: string; }) => { // yep ini buat nge hook ke react-hook-form const { @@ -25,17 +28,12 @@ const DropZone = ({ control, name, rules, - defaultValue: defaultValue - ? axios - .get(defaultValue) - .then((resp) => resp.data) - .catch((err) => defaultValue) - : undefined, }); const { getRootProps, getInputProps } = useDropzone({ maxFiles: 1, - accept: { "image/jpeg": [], "image/jpg": [], "image/png": [] }, + // "image/jpg": [".jpg"], + accept: { "image/jpeg": [".jpeg", ".jpg"], "image/png": [".png"] }, onDrop: (acceptedFiles: File[]) => { if (acceptedFiles.length) { imageCompression(acceptedFiles[0], { @@ -88,6 +86,28 @@ const DropZone = ({ ); + const before = defaultValue && validateImg(defaultValue) && ( + + + {"before"} + + + ); + return ( <>
- {thumb} + {value ? thumb : before} ); From 9dffc35473f566f4721c0942cb2c92b0555033d8 Mon Sep 17 00:00:00 2001 From: rdhwan Date: Sun, 23 Jul 2023 02:58:46 +0700 Subject: [PATCH 4/4] fix(details):conditional modal, make logo optional Adjust for organisator: cuma bisa ganti logo dan desc Preview for current Logo others optimization... --- .../state/details/[stateID]/page.tsx | 169 ++++++++++-------- 1 file changed, 90 insertions(+), 79 deletions(-) diff --git a/app/dashboard/state/details/[stateID]/page.tsx b/app/dashboard/state/details/[stateID]/page.tsx index 5f57261..9d4b562 100644 --- a/app/dashboard/state/details/[stateID]/page.tsx +++ b/app/dashboard/state/details/[stateID]/page.tsx @@ -110,6 +110,7 @@ export default function Details() { register, handleSubmit, control, + reset, formState: { errors }, } = useForm(); @@ -307,7 +308,10 @@ export default function Details() { bgColor={"#185C99"} borderRadius={"full"} _hover={{ bgColor: "#295278" }} - onClick={onOpen} + onClick={() => { + reset(); + onOpen(); + }} > @@ -431,16 +435,25 @@ export default function Details() { + Sunting STATE {dataState?.name} + +
{ const formData = new FormData(); - formData.append("name", data.name); - formData.append("day", data.day); + formData.append("name", data.name ?? dataState?.name); + formData.append("day", data.day ?? dataState?.day); formData.append("stateDesc", data.stateDesc); - formData.append("location", data.location); - formData.append("quota", data.quota.toString()); - formData.append("test_file", data.stateLogo); + formData.append("location", data.location ?? dataState?.location); + formData.append( + "quota", + data.quota ? data.quota.toString() : dataState!.quota.toString() + ); + + if (data.stateLogo) { + formData.append("test_file", data.stateLogo); + } api .put(`/stateAct/update/${params.stateID}`, formData, { @@ -460,86 +473,84 @@ export default function Details() { onClose(); })} > - -
- - Sunting - -
- - - - - - Logo - - - - - {/* + + + + Ganti Logo + + + + + {/* */} - - - {errors.stateLogo && errors.stateLogo.message} - - - + + + {errors.stateLogo && errors.stateLogo.message} + + + - - Name - - - {errors.name && errors.name.message} - - + {auth.role !== "organisator" && ( + + Name + + + {errors.name && errors.name.message} + + + )} - - Deksripsi -