PTB-fe/components/Pemeriksaan/InputEvaluasi.js

import React, { Component } from "react";
import { insertPemeriksaan } from "@/actions/pemeriksaan";
import Router from "next/router";
import Datetime from "react-datetime";
import moment from "moment";
import { Row, Col, FormGroup, Input, Button, Progress } from "reactstrap";
import { ToastContainer, toast } from "react-toastify";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import { connect } from "react-redux";
import { getCsrf } from "../../actions/security";


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 evaluasiSchema = Yup.object().shape({
	tanggal: Yup.date().required("Wajib diisi"),
	judul: Yup.string().min(3).max(150).required("Wajib diisi"),
	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;
	}
}
<ToastContainer

/>
{/* Same as */ }
<ToastContainer />

class InputEvaluasi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dropdownOpen: false,
			splitButtonOpen: false,
			judulEvaluasi: "",
			tanggal: moment().format("D MMMM YYYY"),
			files: [],
			delegasichecklist: false,
			rolelldikti: false,
			selectedFile: {},
		};
	}

	setjudulEvaluasi = (e) => {
		this.setState({ judulEvaluasi: e.target.value });
	};

	setTanggal = (moment) => {
		this.setState({ tanggal: moment.format("D MMMM YYYY") });
	};

	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.state.files.push(...this.state.selectedFile)
		// this.setState({
		// 	files: files.map((file) =>
		// 		Object.assign(file, {
		// 			preview: URL.createObjectURL(file),
		// 		})
		// 	),
		// 	stat: "Added " + files.length + " file(s)",
		// });
		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: [],
		});
	};

	onSubmit = async (data, { resetForm }) => {
		const getToken = await getCsrf();
		const _csrf = getToken.token;
		const { token, query } = this.props;
		const { id } = query;
		const formdata = new FormData();
		formdata.append("judul", data.judul);
		formdata.append("tanggal", data.tanggal);
		this.state.files.forEach((e) => {
			formdata.append("dokumen", e);
		});
		if (this.state.delegasichecklist == true) {
			await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
				pending: "Loading",
				success: "Success",
				error: "Error",
				autoClose: 1000
			});

			data.change_role = "true";
			data.keterangan = "delegasi ke DIKTI"
			Router.push("/app/pemeriksaan");
			update = await updateLaporan(token, id, data);
		} else {
			await toast.promise(insertPemeriksaan(token, id, formdata, _csrf), {
				pending: "Loading",
				success: {
					render: "success",
					autoClose: 1000
				},
				error: "Error",

			});
			Router.push("/app/pemeriksaan");
		}
		this.setState({ files: [] });
		resetForm();
		const pelaporan = await getOneLaporan(token, query.id);
		this.props.changePelaporan(pelaporan);
	};

	handlechecklist = () => {
		this.setState({ delegasichecklist: !this.state.delegasichecklist })
	};
	// getStatus = () => (this.props.user?.role.id == 2021 ? this.setState({ rolelldikti: !this.state.rolelldikti }) : "")


	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 (
			<>
				<p className="lead bb">Evaluasi</p>
				<Formik
					initialValues={{
						tanggal: new Date(),
						judul: "",
						dokumen: [],
					}}
					validationSchema={evaluasiSchema}
					onSubmit={this.onSubmit}
				>
					{({ isSubmitting }) => (
						<Form className="form-horizontal">
							<FormGroup row>
								<label className="col-md-2 col-form-label">Tanggal Evaluasi</label>
								<div className="col-md-10">
									<Field name="tanggal">
										{({ field, form }) => (
											<Datetime
												timeFormat={false}
												inputProps={{ className: "form-control" }}
												value={field.value}
												onChange={(e) => {
													form.setFieldValue(field.name, e);
												}}
											/>
										)}
									</Field>
									<ErrorMessage name="tanggal" component="div" className="form-text text-danger" />
								</div>
							</FormGroup>
							<FormGroup row>
								<label className="col-md-2 col-form-label">Judul Dokumen</label>
								<div className="col-md-10">
									<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
									<ErrorMessage name="judul" component="div" className="form-text text-danger" />
								</div>
							</FormGroup>
							<FormGroup row>
								<label className="col-md-2 col-form-label">Upload File Pendukung<span className="text-danger">*</span></label>
								<div className="col-md-10">
									<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 name="dokumen" {...getInputProps()} />
															<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 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>
									{thumbs}
									<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>
							{this.props.user?.role.id === 2021 ? (
								<FormGroup row>
									<label className="col-md-2 col-form-label">Delegasi ke dikti</label>
									<div className="col-md-10 mt-2">
										<div className="checkbox c-checkbox">
											<label>
												<Input type="checkbox" onChange={this.handlechecklist} defaultChecked={this.state.delegasichecklist} />
												<span className="fa fa-check"></span></label>
										</div>
									</div>
								</FormGroup>
							) : ("")}
							<FormGroup row>
								<div className="col-xl-10">
									<Button color className="btn-login" type="submit" disabled={isSubmitting}>
										<span className="font-color-white">
											Simpan Evaluasi
										</span>
									</Button>
								</div>
							</FormGroup>
						</Form>

					)}

				</Formik>
			</>
		);
	}
}

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