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, Progress } 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";
import Link from "next/link";
import { getCsrf } from "../../../actions/security";

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) => {
		const getToken = await getCsrf();
		const _csrf = getToken.token;
		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, _csrf);
		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/sanksi/jawaban-keberatan/detail", query: { id: id }
			});
		}
	};

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

		const removeFile = file => () => {
			const newFiles = [...files]
			newFiles.splice(newFiles.indexOf(file), 1)
			this.setState({
				files: newFiles,
			});
		}
		const thumbs = files.map((file, index) => (
			<p>
				<em className="far fa-file" />&nbsp;&nbsp;{file.name}
				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
			</p>
		));
		return (
			<>
				<Modal isOpen={this.props.modal} toggle={this.props.toggleModal}>
					<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>

					<ModalFooter>

						<Button color className="btn-login" onClick={this.toggleModal1}>
							<span className="font-color-white">Ya</span>
						</Button>
						<Button color className="btn-v2" 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}
					>
						{({ isSubmitting }) => (
							<Form className="form-horizontal">
								<ModalBody>
									<FormGroup>
										<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah surat permohonan keberatan & 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" + (isDragActive ? "dropzone-drag-active" : "")}>
																	<input {...getInputProps()} />
																	<div className="dropzone-previews flex">
																		<div className="dropzone-style-1">
																			<div className="center-ver-hor dropzone-previews flex">{this.state.files.length > 0 ?
																				<div className="text-center fa-2x icon-cloud-upload mr-2 ">
																					<h5 className="text-center dz-default dz-message">Klik untuk tambah file</h5>
																				</div> :
																				<div className="text-center fa-2x icon-cloud-upload mr-2 ">
																					<h5 className="text-center dz-default dz-message">Klik untuk upload dokumen</h5>
																				</div>
																			}
																			</div>
																		</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>
											<div>
												{thumbs}
											</div>
											<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
											<p className="mrgn-top-5 font-color-black">
												Ukuran setiap dokumen maksimal 15mb
											</p>
										</div>
									</FormGroup>
								</ModalBody>
								<ModalFooter>

									<Button color className="btn-login" type="submit" disabled={isSubmitting}>
										<span className="font-color-white">Kirim</span>
									</Button>

								</ModalFooter>
							</Form>
						)}

					</Formik>
				</Modal>
			</>
		);
	}
}

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