Skip to content

Commit 9564e6d

Browse files
rdhwanrdhwan
authored
Merge pull request #5 from MAXIMA-2023/update
fix: state details and sunting state
2 parents 7c826b3 + 9dffc35 commit 9564e6d

File tree

2 files changed

+136
-95
lines changed

2 files changed

+136
-95
lines changed

‎app/dashboard/state/details/[stateID]/page.tsx

Lines changed: 91 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export default function Details() {
110110
register,
111111
handleSubmit,
112112
control,
113+
reset,
113114
formState: { errors },
114115
} = useForm<UpdateStateActivities>();
115116

@@ -307,7 +308,10 @@ export default function Details() {
307308
bgColor={"#185C99"}
308309
borderRadius={"full"}
309310
_hover={{ bgColor: "#295278" }}
310-
onClick={onOpen}
311+
onClick={() => {
312+
reset();
313+
onOpen();
314+
}}
311315
>
312316
<Flex alignItems={"center"} color={"white"}>
313317
<Icon as={MdEdit} boxSize={4} />
@@ -431,19 +435,28 @@ export default function Details() {
431435
<Modal size={"2xl"} onClose={onClose} isOpen={isOpen} isCentered>
432436
<ModalOverlay />
433437
<ModalContent borderRadius={"xl"}>
438+
<ModalHeader>Sunting STATE {dataState?.name}</ModalHeader>
439+
<ModalCloseButton />
440+
434441
<form
435442
// to handle multipart, please use formData :)
436443
onSubmit={handleSubmit((data) => {
437444
const formData = new FormData();
438-
formData.append("name", data.name);
439-
formData.append("day", data.day);
445+
formData.append("name", data.name ?? dataState?.name);
446+
formData.append("day", data.day ?? dataState?.day);
440447
formData.append("stateDesc", data.stateDesc);
441-
formData.append("location", data.location);
442-
formData.append("quota", data.quota.toString());
443-
formData.append("test_file", data.stateLogo);
448+
formData.append("location", data.location ?? dataState?.location);
449+
formData.append(
450+
"quota",
451+
data.quota ? data.quota.toString() : dataState!.quota.toString()
452+
);
453+
454+
if (data.stateLogo) {
455+
formData.append("test_file", data.stateLogo);
456+
}
444457

445458
api
446-
.put(`/stateAct/update/`, formData, {
459+
.put(`/stateAct/update/${params.stateID}`, formData, {
447460
headers: {
448461
"Content-Type": "multipart/form-data",
449462
},
@@ -460,86 +473,84 @@ export default function Details() {
460473
onClose();
461474
})}
462475
>
463-
<ModalBody>
464-
<Center w={"full"} my={"1em"}>
465-
<Text fontSize={"2xl"} fontWeight={"semibold"} color={"#11D22"}>
466-
Sunting
467-
</Text>
468-
</Center>
469-
<Box w={"full"}>
470-
<ModalBody textColor="#1e1d22">
471-
<FormControl isInvalid={!!errors.stateLogo}>
472-
<Box w={"full"} mb={"2em"}>
473-
<FormLabel
474-
fontSize={"md"}
475-
fontWeight={"semibold"}
476-
color={"#11D22"}
477-
>
478-
Logo
479-
</FormLabel>
480-
481-
<Box
482-
padding={"1em"}
483-
border={"solid #CBD5E0"}
484-
width={"100%"}
485-
height={"100%"}
486-
borderRadius={10}
487-
transition={"0.1s ease-in-out"}
488-
_hover={{ border: "solid #CBD5E0" }}
489-
>
490-
<DropZone
491-
control={control}
492-
name="stateLogo"
493-
rules={{
494-
required: "Logo STATE tidak boleh kosong.",
495-
}}
496-
/>
497-
{/* <Input
476+
<ModalBody textColor="#1e1d22">
477+
<FormControl isInvalid={!!errors.stateLogo}>
478+
<Box w={"full"} mb={"2em"}>
479+
<FormLabel
480+
fontSize={"md"}
481+
fontWeight={"semibold"}
482+
color={"#11D22"}
483+
>
484+
Ganti Logo
485+
</FormLabel>
486+
487+
<Box
488+
padding={"1em"}
489+
border={"solid #CBD5E0"}
490+
width={"100%"}
491+
height={"100%"}
492+
borderRadius={10}
493+
transition={"0.1s ease-in-out"}
494+
_hover={{ border: "solid #CBD5E0" }}
495+
>
496+
<DropZone
497+
control={control}
498+
name="stateLogo"
499+
defaultValue={dataState?.stateLogo}
500+
// rules={{
501+
// required: "Logo STATE tidak boleh kosong.",
502+
// }}
503+
/>
504+
{/* <Input
498505
id="stateLogo"
499506
type="file"
500507
{...register("stateLogo", {
501508
required: "Logo STATE tidak boleh kosong.",
502509
})}
503510
/> */}
504-
</Box>
505-
<FormErrorMessage>
506-
{errors.stateLogo && errors.stateLogo.message}
507-
</FormErrorMessage>
508-
</Box>
509-
</FormControl>
511+
</Box>
512+
<FormErrorMessage>
513+
{errors.stateLogo && errors.stateLogo.message}
514+
</FormErrorMessage>
515+
</Box>
516+
</FormControl>
510517

511-
<FormControl isInvalid={!!errors.name}>
512-
<FormLabel>Name</FormLabel>
513-
<Input
514-
id="name"
515-
{...register("name", {
516-
value: dataState?.name,
517-
required: "Nama STATE tidak boleh kosong.",
518-
pattern: {
519-
value: /^[A-Za-z .]*$/,
520-
message: "Nama STATE tidak valid",
521-
},
522-
})}
523-
/>
524-
<FormErrorMessage>
525-
{errors.name && errors.name.message}
526-
</FormErrorMessage>
527-
</FormControl>
518+
{auth.role !== "organisator" && (
519+
<FormControl isInvalid={!!errors.name}>
520+
<FormLabel>Name</FormLabel>
521+
<Input
522+
id="name"
523+
{...register("name", {
524+
value: dataState?.name,
525+
required: "Nama STATE tidak boleh kosong.",
526+
pattern: {
527+
value: /^[A-Za-z .]*$/,
528+
message: "Nama STATE tidak valid",
529+
},
530+
})}
531+
/>
532+
<FormErrorMessage>
533+
{errors.name && errors.name.message}
534+
</FormErrorMessage>
535+
</FormControl>
536+
)}
528537

529-
<FormControl isInvalid={!!errors.stateDesc}>
530-
<FormLabel>Deksripsi</FormLabel>
531-
<Textarea
532-
id="stateDesc"
533-
{...register("stateDesc", {
534-
value: dataState?.stateDesc,
535-
required: "Deskripsi STATE tidak boleh kosong",
536-
})}
537-
/>
538-
<FormErrorMessage>
539-
{errors.stateDesc && errors.stateDesc.message}
540-
</FormErrorMessage>
541-
</FormControl>
538+
<FormControl isInvalid={!!errors.stateDesc}>
539+
<FormLabel>Deksripsi</FormLabel>
540+
<Textarea
541+
id="stateDesc"
542+
{...register("stateDesc", {
543+
value: dataState?.stateDesc,
544+
required: "Deskripsi STATE tidak boleh kosong",
545+
})}
546+
/>
547+
<FormErrorMessage>
548+
{errors.stateDesc && errors.stateDesc.message}
549+
</FormErrorMessage>
550+
</FormControl>
542551

552+
{auth.role !== "organisator" && (
553+
<>
543554
<FormControl isInvalid={!!errors.location}>
544555
<FormLabel>Lokasi</FormLabel>
545556
<Input
@@ -600,8 +611,8 @@ export default function Details() {
600611
{errors.quota && errors.quota.message}
601612
</FormErrorMessage>
602613
</FormControl>
603-
</ModalBody>
604-
</Box>
614+
</>
615+
)}
605616
</ModalBody>
606617
<ModalFooter>
607618
<Button type="submit" color="#185C99" mr={3}>

‎components/DropZone.tsx

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { useState, useEffect } from "react";
2-
import { Box, Text, Image, Center } from "@chakra-ui/react";
2+
import { Box, Text, Image, Center, Progress } from "@chakra-ui/react";
33
import { useController } from "react-hook-form";
44
import { useDropzone } from "react-dropzone";
55
import imageCompression from "browser-image-compression";
66
import Swal from "sweetalert2";
77

8+
const validateImg = (url: string) => {
9+
return url.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/) != null;
10+
};
11+
812
const DropZone = ({
913
control,
1014
name,
@@ -13,34 +17,38 @@ const DropZone = ({
1317
}: {
1418
control: any;
1519
name: string;
16-
rules: any;
17-
defaultValue?: any;
20+
rules?: any;
21+
defaultValue?: string;
1822
}) => {
1923
// yep ini buat nge hook ke react-hook-form
2024
const {
2125
field: { value, onChange },
2226
fieldState: { error },
23-
} = useController({ control, name, rules, defaultValue });
24-
25-
useEffect(() => {
26-
return () => {
27-
if (value && value.preview) {
28-
URL.revokeObjectURL(value.preview);
29-
}
30-
};
31-
}, [value]);
27+
} = useController({
28+
control,
29+
name,
30+
rules,
31+
});
3232

3333
const { getRootProps, getInputProps } = useDropzone({
3434
maxFiles: 1,
35-
accept: { "image/jpeg": [], "image/jpg": [], "image/png": [] },
35+
// "image/jpg": [".jpg"],
36+
accept: { "image/jpeg": [".jpeg", ".jpg"], "image/png": [".png"] },
3637
onDrop: (acceptedFiles: File[]) => {
3738
if (acceptedFiles.length) {
3839
imageCompression(acceptedFiles[0], {
3940
maxSizeMB: 0.5,
4041
maxWidthOrHeight: 512,
4142
useWebWorker: true,
4243
})
43-
.then((file) => onChange(file))
44+
.then((file) =>
45+
onChange(
46+
new File([file], file.name, {
47+
lastModified: file.lastModified,
48+
type: file.type,
49+
})
50+
)
51+
)
4452
.catch((err) => {
4553
console.error(err);
4654
Swal.fire(
@@ -78,6 +86,28 @@ const DropZone = ({
7886
</Box>
7987
);
8088

89+
const before = defaultValue && validateImg(defaultValue) && (
90+
<Box
91+
display={"inline-flex"}
92+
borderRadius={4}
93+
border={"2px solid #eaeaea"}
94+
mt={"16px"}
95+
mx={1}
96+
w={"auto"}
97+
h={"auto"}
98+
p={1}
99+
boxSizing={"border-box"}
100+
>
101+
<Box display={"flex"} w={"auto"} h={"100%"}>
102+
<Image
103+
src={defaultValue}
104+
style={{ display: "block", width: "auto", height: "100%" }}
105+
alt={"before"}
106+
/>
107+
</Box>
108+
</Box>
109+
);
110+
81111
return (
82112
<>
83113
<Center
@@ -96,7 +126,7 @@ const DropZone = ({
96126
</Text>
97127
</Center>
98128
<Box display={"flex"} flexDirection={"row"} flexWrap={"wrap"}>
99-
{thumb}
129+
{value ? thumb : before}
100130
</Box>
101131
</>
102132
);

0 commit comments

Comments
 (0)