PTB-fe/components/PT/JawabanKeberatan/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 { addBanding } from "@/actions/banding";
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("Harus ada").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.props.toggleModal(false);
		this.setState({
			modal1: !this.state.modal1,
		});
	};

	onSubmit = async (data) => {
		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);
			});
		}
		this.setState({
			modal1: !this.state.modal1,
		});

		const toastid = toast.loading("Please wait...");
		const added = await addBanding(token, id, formdata);

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

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

		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}>
					<ModalHeader toggle={this.toggleModal1}>Upload Dokumen Banding</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" + (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">
									<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);