PTB-fe/components/RekomendasiDelegasi/InputRekomendasi.js

import React, { Component } from "react";
import { insertPemeriksaan } from "@/actions/pemeriksaan";
import { Row, Col, Card, CardBody, FormGroup, Input, Button, Progress } 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';
import { getCsrf } from "../../actions/security";
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: {},
			selectedFile:{}
		};
	}

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

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

    onDrop = (selectedFile) => {
        this.setState({
            selectedFile: selectedFile.map((file) =>
                Object.assign(file, {
                    preview: URL.createObjectURL(file),
                })
            ),
            stat: "Added " + selectedFile.length + " file(s)",
        });
        const selectFile = this.state.selectedFile
        this.setState(prevState => ({
            files: [...prevState.files, ...selectFile]
        }))
    };

	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 getToken = await getCsrf();
		const _csrf = getToken.token;
		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, _csrf);
		if (!added) {
			toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
		} else {
			toast.update(toastid, { render: "Success", 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 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 (
			<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 ?
																			<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">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>
										<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>
								<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);