ptb-fe/pages/app/pt/keberatan/detail.js

import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { getSanksi } from "@/actions/sanksi";
import { addKeberatan } from "@/actions/keberatan";
import Header from "@/components/Main/Header";
import DetailPT from "@/components/Main/DetailPT";
import DetailSanksi from "@/components/Main/DetailSanksi";
import Riwayat from "@/components/PT/Keberatan/Riwayat";
import Link from "next/link";
import { Row, Col, Card, CardBody, FormGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

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 Keberatan extends Component {
	state = {
		modal: false,
		modal1: false,
		files: [],
	};

	static async getInitialProps({ query }) {
		const { noSanksi } = query;
		const sanksi = await getSanksi({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" });
		return { query, sanksi };
	}

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

	onSubmit = async (e) => {
		e.preventDefault();
		const { noSanksi } = this.props.query;
		const formdata = new FormData();
		if (this.state.files.length > 0) {
			this.state.files.forEach((e) => {
				formdata.append("files", e);
			});
		}

		const added = await addKeberatan({ noSanksi, ptId: "0BCE4DB7-B207-445D-8D03-0C54B7688252" }, formdata);
		if (added) {
			Router.push({
				pathname: "/app/pt/keberatan",
			});
		}
	};

	toggleModal = () => {
		this.setState({
			modal: !this.state.modal,
		});
	};

	toggleModal1 = () => {
		this.setState({
			modal: false,
		});
		this.setState({
			modal1: !this.state.modal1,
		});
	};

	handleKirim = (e) => {
		this.setState({
			modal1: !this.state.modal1,
		});
		this.onSubmit(e);
	};

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

		const thumbs = files.map((file, index) => (
			<Col md={3} key={index}>
				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
			</Col>
		));
		return (
			<ContentWrapper unwrap>
				<Header />
				<div className="p-3">
					<div className="content-heading">
						<div>Permohonan Keberatan</div>
						<div className="ml-auto">
							<Link href="/app/keberatan">
								<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
							</Link>
						</div>
					</div>
					<Row>
						<Col xl="9">
							<Card className="card-default">
								<CardBody>
									<Row>
										<Col lg={12}>
											<DetailSanksi data={sanksi.data[0]} />
											<p>Setelah membaca surat keputusan sanksi tersebut, jika Perguruan Tinggi bermaksud mengajukan permohonan keberatan maka dapat menekan tombol di bawah ini (21 Hari Kerja)</p>
											<Button color="primary" onClick={this.toggleModal}>
												Ajukan Permohonan Keberatan
											</Button>
											<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
												{/* <ModalHeader toggle={this.toggleModal}>Banding</ModalHeader> */}
												<ModalBody>Apakah anda akan mengajukan permohonan keberatan atas pengenaan sanksi?</ModalBody>
												<ModalFooter>
													<Button color="primary" onClick={this.toggleModal1}>
														Ya
													</Button>{" "}
													<Button color="secondary" onClick={this.toggleModal}>
														Tidak
													</Button>
												</ModalFooter>
											</Modal>
											<Modal isOpen={this.state.modal1} toggle={this.toggleModal1}>
												<ModalHeader toggle={this.toggleModal1}>Unggah Dokumen Permohonan Keberatan</ModalHeader>
												<ModalBody>
													<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
														<FormGroup>
															<label>Dalam hal mengajukan permohonan keberatan maka wajib mengunggah dokumen pendukungnya</label>
															<div>
																<DropzoneWrapper className="" onDrop={this.onDrop}>
																	{({ getRootProps, getInputProps, isDragActive }) => {
																		return (
																			<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
																				<input {...getInputProps()} />
																				<div className="dropzone-previews flex">
																					{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
																				</div>
																				<div className="d-flex align-items-center">
																					<small className="ml-auto">
																						<button type="button" className="btn btn-link" onClick={this.clearFiles}>
																							Clear files
																						</button>
																					</small>
																				</div>
																			</div>
																		);
																	}}
																</DropzoneWrapper>
																<span className="form-text">Multiple files upload</span>
															</div>
														</FormGroup>
													</form>
												</ModalBody>
												<ModalFooter>
													<Button color="primary" onClick={this.handleKirim}>
														Kirim
													</Button>
												</ModalFooter>
											</Modal>
										</Col>
									</Row>
								</CardBody>
							</Card>
						</Col>
						<Col xl="3">
							<DetailPT />
						</Col>
					</Row>
					<Row>
						<Col>
							<Riwayat data={sanksi.data[0]} />
						</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

export default Keberatan;