ptb-fe/components/RekomendasiDelegasi/InputRekomendasi.js

import React, { Component } from "react";
import { insertPemeriksaan } from "@/actions/pemeriksaan";
import { Row, Col, Card, CardBody, FormGroup, Input, Button, Modal, ModalHeader, ModalBody, ModalFooter, CardHeader, CardTitle } from "reactstrap";
import { toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { connect } from "react-redux";
import { getOneSanksi, addRekomendasiDelegasi } from "@/actions/sanksi";
import moment from "moment";
import 'moment/min/locales';
moment.locale('id');


const selectInstanceId = 1;
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 rekomendasiSchema = Yup.object().shape({
	dokumen: Yup.array().min(1).required("Wajib diisi").test("filesize", "Maksimal ukuran dokumen 15mb", checkIfFilesAreTooBig),
});

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;
	}
}

class InputRekomendasi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dropdownOpen: false,
			splitButtonOpen: false,
			files: [],
			sanksi: {},
			data: {},
		};
	}

	toggleSplit = () => {
		this.setState({
			splitButtonOpen: !this.state.splitButtonOpen,
		});
	};

	toggleDropDown = () => {
		this.setState({
			dropdownOpen: !this.state.dropdownOpen,
		});
	};

	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: [],
		});
	};

	static getInitialProps = async ({ query }) => {
		return { query };
	};


	handelSimpan = async () => {

		const { token, query } = this.props;
		const { id } = query;
		const formdata = new FormData();
		this.state.files.forEach((e) => {
			formdata.append("dokumen", e);
		});
		const toastid = toast.loading("Please wait...");
		const added = await addRekomendasiDelegasi(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 });
			const sanksi = await getOneSanksi(token, id);
			this.setState({ sanksi, files: [] });
			resetForm();
			// Router.push({
			// 	pathname: "/app/rekomendasi-delegasi",
			// });

		}

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

		const thumbs = files.map((file, index) => (
			<div md={3} key={index}>
				<span className="text-left">{index + 1}.{file.name}</span>
			</div>
		));
		return (
			<Card className="card-default">
				<CardBody>
					<p className="lead bb">Dokumen Rekomendasi Delegasi</p>
					<Formik
						initialValues={{
							dokumen: [],
						}}
						validationSchema={rekomendasiSchema}
						onSubmit={async (data) => {
							this.setState({ data });
							await this.handelSimpan();
						}}
					>
						{() => (
							<Form className="form-horizontal">
								<FormGroup>
									<div className="row-md-10">
										<Field name="dokumen">
											{({ field, form }) => (
												<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 ? <Row><span className="text-left">{thumbs}</span></Row> :
																			<div className="text-center fa-2x icon-cloud-upload mr-2 ">
																				<h5 className="text-center dz-default dz-message">upload dokumen rekomendasi delegasi</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>
										<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
										<p className="mrgn-top-5">Ukuran setiap dokumen maksimal 15mb</p>
									</div>
								</FormGroup>
								<FormGroup row>
									<div className="col-xl-10">
										<Button color className="color-3e3a8e btn-login" type="submit">
											<span className="font-color-white">Kirim</span>
										</Button>
									</div>
								</FormGroup>
							</Form>
						)}
					</Formik>
				</CardBody>
			</Card>
		);
	}
}

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