ptb-fe/components/PT/Keberatan/ModalPermohonan.js

import React, { Component } from "react";
import Router from "next/router";
import { Row, Col, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { addKeberatan } from "@/actions/keberatan";
import { connect } from "react-redux";
import { toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

let Dropzone = null;
class DropzoneWrapper extends Component {
	state = {
		isClient: false,
	};
	componentDidMount = () => {
		Dropzone = require("react-dropzone").default;
		this.setState({ isClient: true });
	};
	render() {
		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
	}
}

const checkIfFilesAreTooBig = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (file.size > 15 * 1024 * 1024) {
				valid = false;
			}
		});
	}
	return valid;
};

const checkIfFilesAreCorrectType = (files) => {
	let valid = true;
	if (files) {
		files.map((file) => {
			if (!["image/jpeg", "image/png"].includes(file.type)) {
				valid = false;
			}
		});
	}
	return valid;
};

const evaluasiSchema = Yup.object().shape({
	dokumen: Yup.array().min(1, "Minimal terdapat 1 dokumen").required("Required").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});

export class ModalPermohonan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modal1: false,
			files: [],
		};
	}

	onDrop = (files) => {
		this.setState({
			files: files.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + files.length + " file(s)",
		});
	};

	uploadFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
		});
	};

	clearFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			files: [],
		});
	};

	toggleModal1 = () => {
		this.setState({ error: null });
		this.props.toggleModal(false);
		this.setState({
			modal1: !this.state.modal1,
		});
	};

	onSubmit = async (data) => {
		this.setState({
			modal1: !this.state.modal1,
		});
		const { query, token } = this.props;
		const { id } = query;
		const formdata = new FormData();
		if (data.dokumen.length > 0) {
			data.dokumen.forEach((e) => {
				formdata.append("dokumen", e);
			});
		}

		const tostid = toast.loading("Please wait...");
		const success = await addKeberatan(token, id, formdata);

		if (!success) {
			toast.update(tostid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
		} else {
			toast.update(tostid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
			Router.push({
				pathname: "/pt/jawaban-keberatan",
			});
		}
	};

	render() {
		const { files } = this.state;

		const thumbs = files.map((file, index) => (
			<div md={3} key={index}>
				{/* <img className="img-fluid mb-2" src={file.preview} alt="Item" /> */}
				<span className="text-center">{file.name}</span>
			</div>
		));
		return (
			<>
				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
					<ModalFooter>
						<Button color="primary" onClick={this.toggleModal1}>
							Ya
						</Button>{" "}
						<Button color="secondary" onClick={this.props.toggleModal}>
							Tidak
						</Button>
					</ModalFooter>
				</Modal>
				<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
					<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
					<Formik
						initialValues={{
							dokumen: [],
						}}
						validationSchema={evaluasiSchema}
						onSubmit={this.onSubmit}
					>
						<Form className="form-horizontal">
							<ModalBody>
								<FormGroup>
									<label>Dalam hal mengajukan permohonan banding maka wajib mengunggah surat permohonan banding & dokumen pendukungnya</label>
									<div>
										<Field name="dokumen">
											{({ field, form, meta }) => (
												<DropzoneWrapper
													className=""
													onDrop={(e) => {
														this.onDrop(e);
														form.setFieldValue(field.name, e);
													}}
												>
													{({ getRootProps, getInputProps, isDragActive }) => {
														return (
															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
																<input {...getInputProps()} />
																<div className="dropzone-previews flex">
																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Klik untuk upload dokumen</div>}
																</div>
																<div className="d-flex align-items-center">
																	<small className="ml-auto">
																		<button
																			type="button"
																			className="btn btn-link"
																			onClick={(e) => {
																				this.clearFiles(e);
																				form.setFieldValue(field.name, []);
																			}}
																		>
																			Reset dokumen
																		</button>
																	</small>
																</div>
															</div>
														);
													}}
												</DropzoneWrapper>
											)}
										</Field>
										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
										<p className="mrgn-top-5">
											Ukuran setiap dokumen maksimal 15mb
										</p>
									</div>
								</FormGroup>
							</ModalBody>
							<ModalFooter>
								<Button color="primary" type="submit">
									Kirim
								</Button>
							</ModalFooter>
						</Form>
					</Formik>
				</Modal>
			</>
		);
	}
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(ModalPermohonan);