commit

actions/PT.js

@@ -5,9 +5,7 @@ export const getPT = async (token, params) => {
 		let url = "/pt";
 		if (params) {
 			url += "?";
-			if (params.id) {
-				url += `id=${params.id}`;
-			} else if (params.search || params.pembina) {
+			if (params.search || params.pembina) {
 				const parseURL = [];
 				if (params.search) parseURL.push(`search=${params.search}`);
 				if (params.pembina) parseURL.push(`pembina=${params.pembina}`);
@@ -40,6 +38,25 @@ export const getOnePT = async (token, pt_id) => {
 	}
 };
 
+export const ptPublic = async (params) => {
+	try {
+		let url = "/public/pt";
+		if (params) {
+			url += "?";
+			if (params.search) {
+				const parseURL = [];
+				if (params.search) parseURL.push(`search=${params.search}`);
+				url += parseURL.join("&");
+			}
+		}
+		const response = await axios.get(url);
+		return response.data;
+	} catch (error) {
+		console.log("error", error);
+		return false;
+	}
+};
+
 export const getPembina = async (token, params) => {
 	try {
 		let url = "/lembaga";

actions/log.js

@@ -31,10 +31,9 @@ export const getLogPT = async (token) => {
 	}
 };
 
-export const getLogPublic = async ({ ptId, laporanId }) => {
+export const getLogPublic = async ({ no_hp, no_laporan }) => {
 	try {
-		let url = `/log/public?ptId=${ptId}&laporan=${laporanId}`;
-		const res = await get(url);
+		const res = await axios.get(`/public/pemantauan?no_hp=${no_hp}&no_laporan=${no_laporan}`);
 		return res.data;
 	} catch (error) {
 		console.log("error", error);

actions/pelaporan.js

@@ -50,6 +50,16 @@ export const createPelaporan = async (token, data) => {
 	return res.data;
 };
 
+export const createLaporanPublic = async (data) => {
+	try {
+		const res = await axiosAPI.post("/public/laporan/create", data);
+		return res.data;
+	} catch (error) {
+		console.log("error", error.response.data);
+		return false;
+	}
+};
+
 // export const addStatus = async ({ number, ptId }, data) => {
 // 	try {
 // 		const res = await post(`/pelaporan/status/add?number=${number}&ptId=${ptId}`, data);

components/Main/DetailLaporan.js

@@ -38,7 +38,7 @@ function DetailLaporan({ data, noTitle = false, noStatus = false }) {
 							<FormGroup row>
 								<Col md="4">Foto Kartu Identitas:</Col>
 								<Col md="8">
-									<img src={data.user.dokumen.path} height={200} alt="Foto Identitas" />
+									<img src={data.user.foto.path} height={200} alt="Foto Identitas" />
 								</Col>
 							</FormGroup>
 						</>

components/Main/Timeline.js

@@ -12,9 +12,9 @@ function Timeline({ data, noFile = false, noJadwal = false }) {
 						.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
 						.map((data, i) => (
 							<>
-								<li className={data.user.role.id === 2022 ? "timeline-inverted" : ""}>
-									<div className={`timeline-badge ${data.user.role.id === 2022 ? " danger" : "info"}`}>
-										<em className={`fas fa-${data.user.role.id === 2022 ? "graduation-cap" : "file"}`}></em>
+								<li className={data.user.role?.id === 2022 ? "timeline-inverted" : ""}>
+									<div className={`timeline-badge ${data.user.role?.id === 2022 ? " danger" : "info"}`}>
+										<em className={`fas fa-${data.user.role?.id === 2022 ? "graduation-cap" : "file"}`}></em>
 									</div>
 
 									<div className="timeline-card">
@@ -24,12 +24,12 @@ function Timeline({ data, noFile = false, noJadwal = false }) {
 												<div className="d-flex align-items-center mb-3">
 													<img
 														className="mr-3 rounded-circle thumb48"
-														src={`/static/img${data.user.role.id === 2022 ? "/univ-avatar.png" : data.user.role.id === 2023 ? "/user/user.png" : "/logo-single.png"}`}
+														src={`/static/img${data.user.role?.id === 2022 ? "/univ-avatar.png" : data.user.isPublic ? "/user/user.png" : "/logo-single.png"}`}
 														alt="Avatar"
 													/>
 													<p className="m-0">
 														<strong>
-															{data.user.nama} - {data.user.role.nama}
+															{data.user.nama} - {data.user.isPublic ? "Umum" : data.user.role.nama}
 														</strong>
 														<br />
 														{data.keterangan}

components/Pelaporan/InputData.js

@@ -40,7 +40,7 @@ export class InputData extends Component {
 			splitButtonOpen: false,
 			selectedOptionMulti: [],
 			stat: "Waiting to add files..",
-			pelaporanNumber: moment(new Date()).format("DDMMYY") + "" + Math.floor(Math.random() * 10000),
+			pelaporanNumber: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
 			keteranganLaporan: "",
 			files: [],
 			pelanggaran: [],

components/Public/DetailLaporan.js

@@ -36,7 +36,7 @@ function DetailLaporan({ data }) {
 					<Col md="4">Keterangan Laporan:</Col>
 					<Col md="8">
 						<Scrollable height="100px" className="list-group">
-							<p>{data.description}</p>
+							<p>{data.keterangan}</p>
 						</Scrollable>
 					</Col>
 				</FormGroup>
@@ -46,30 +46,26 @@ function DetailLaporan({ data }) {
 						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
 					</Col>
 				</FormGroup>
-				{data.status ? (
-					<FormGroup row>
-						<Col md="4">Status:</Col>
-						<Col md="8">
-							<div className="badge badge-info">{data.status}</div>
-						</Col>
-					</FormGroup>
-				) : (
-					""
-				)}
+				<FormGroup row>
+					<Col md="4">Status:</Col>
+					<Col md="8">
+						<div className="badge badge-info">{!data.aktif ? "Laporan ditutup" : data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+					</Col>
+				</FormGroup>
 				<FormGroup row>
 					<Col md="4">File Pendukung:</Col>
 					<Col md="8">
 						<Scrollable height="120px" className="list-group">
 							<table className="table table-bordered bg-transparent">
 								<tbody>
-									{data.files.map((e, index) => (
-										<tr key={`files-${index}`}>
+									{data.dokumen.map((e, index) => (
+										<tr key={index}>
 											<td>
 												<em className="fa-lg far fa-file-code"></em>
 											</td>
 											<td>
-												<a className="text-muted" href={API_URL + e.path} target="_blank" download={e.name}>
-													{e.name}
+												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+													{e.judul}
 												</a>
 											</td>
 										</tr>

pages/app/pemantauan/index.js

@@ -94,7 +94,7 @@ class Search extends Component {
 											{pt.sk_pendirian} - {pt.website} - {pt.email}
 										</small>
 										<p>{pt.alamat.jalan}</p>
-										{this.props.user.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
+										{this.props.user?.role.id === 2021 ? "" : <p>Pembina: {pt.pembina.nama}</p>}
 									</div>
 									<div className="ml-auto">
 										<Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>
@@ -121,14 +121,14 @@ class Search extends Component {
 					</div>
 				</div>
 				<Row>
-					<Col lg={this.props.user.role.id === 2021 ? 12 : 9}>
+					<Col lg={this.props.user?.role.id === 2021 ? 12 : 9}>
 						<div className="form-group mb-4">
 							<input className="form-control mb-2" type="text" id="searchInput" placeholder="Pencarian Nama Perguruan Tinggi" />
 							<div className="d-flex">
 								<button className="btn btn-secondary" type="button" onClick={(e) => this.handleSearchClick()}>
 									Search
 								</button>
-								<div className="ml-auto">{this.props.user.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
+								<div className="ml-auto">{this.props.user?.role.id === 2021 && `Pembina: ${this.props.user.lembaga.nama}`}</div>
 							</div>
 						</div>
 						{/* START card */}
@@ -151,7 +151,7 @@ class Search extends Component {
 						</div>
 						{/* END card */}
 					</Col>
-					{this.props.user.role.id === 2021 ? (
+					{this.props.user?.role.id === 2021 ? (
 						""
 					) : (
 						<Col lg="3">

pages/laporan/new/index.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import Router from "next/router";
 import BasePage from "@/components/Layout/BasePage";
-import { getPT } from "@/actions/PT";
-import { getPelanggaran } from "@/actions/pelanggaran";
-import { createPelaporan } from "@/actions/pelaporan";
+import { ptPublic } from "@/actions/PT";
+import { getPelanggaranPublic } from "@/actions/pelanggaran";
+import { createLaporanPublic } from "@/actions/pelaporan";
 import { notifLaporanBaru } from "@/actions/notifikasi";
 import Select from "react-select";
 import AsyncSelect from "react-select/async";
@@ -12,12 +12,29 @@ import Link from "next/link";
 import ContentWrapper from "@/components/Layout/ContentWrapper";
 import { createPublicUser } from "@/actions/user";
 import { ToastContainer, toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 import "react-toastify/dist/ReactToastify.css";
 
+const laporanSchema = Yup.object().shape({
+	no_laporan: Yup.string().required("Harap Diisi"),
+	no_hp: Yup.number().required("Harap Diisi"),
+	nama: Yup.string().required(),
+	setuju: Yup.boolean().isTrue(),
+	alamat: Yup.string().min(3).max(200).required(),
+	keterangan: Yup.string().min(3).max(200).required(),
+	email: Yup.string().email().required(),
+	pelanggaran_id: Yup.array().min(1).required(),
+	pt_id: Yup.string().required(),
+	foto: Yup.array().min(1).required("Harus ada"),
+	dokumen: Yup.mixed().nullable().notRequired(),
+	is_private: Yup.boolean().notRequired(),
+});
+
 const loadOptions = (inputValue, callback) => {
 	setTimeout(async () => {
-		const pt = await getPT({ search: inputValue });
+		const pt = await ptPublic({ search: inputValue });
 		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
 		callback(data);
 	}, 1000);
@@ -64,7 +81,7 @@ class App extends Component {
 	static getInitialProps = ({ pathname }) => ({ pathname });
 
 	componentDidMount = async () => {
-		const pelanggaran = await getPelanggaran();
+		const pelanggaran = await getPelanggaranPublic();
 		this.setState({ pelanggaran });
 	};
 
@@ -96,70 +113,36 @@ class App extends Component {
 		return inputValue;
 	};
 
-	handleKirim = async (e) => {
-		e.preventDefault();
-		const id = toast.loading("Please wait...");
-		const { nama } = this.state;
-		const user_id = await this.createUser();
-
-		if (user_id) {
-			const laporan = await this.createLaporan(user_id, nama);
-			if (laporan) {
-				toast.update(id, { render: "All is good", type: "success", isLoading: false });
-				await this.sendNotif();
-				Router.push("/laporan/new");
-			}
-			return;
-		}
-		toast.update(id, { render: "All is not good", type: "error", isLoading: false });
-
-		// validasi
-		// if (nama === '')  msgError.push({nama: 'Wajib diisi'})
-	};
-
-	sendNotif = async () => {
-		const { nama, no_hp, selectedPerguruanTinggi, keteranganLaporan, pelaporanNumber, selectedJenis } = this.state;
-		const description = `${selectedJenis.map((e) => e.label).join(", ")} dengan keterangan ${keteranganLaporan}`;
-		// const description = keteranganLaporan;
-		return await notifLaporanBaru({ nama, pt_name: selectedPerguruanTinggi.label, description, no_laporan: pelaporanNumber.toString() });
-	};
-
-	createUser = async () => {
-		const { nama, alamat, no_hp, email, fileIdentitas, isPrivate } = this.state;
-		const dataUser = new FormData();
-		dataUser.append("nama", nama);
-		dataUser.append("no_hp", no_hp);
-		dataUser.append("email", email);
-		dataUser.append("alamat", alamat);
-		dataUser.append("files", fileIdentitas);
-		dataUser.append("isPrivate", isPrivate);
-		const userPublic = await createPublicUser(dataUser);
-		if (userPublic.success) return userPublic.created._id;
-		return false;
-	};
-
-	createLaporan = async (user_id, nama) => {
-		const { pelaporanNumber, selectedPerguruanTinggi, keteranganLaporan, selectedJenis, files } = this.state;
+	handleKirim = async (data, { resetForm }) => {
 		const formdata = new FormData();
-		formdata.append("number", pelaporanNumber);
-		formdata.append("pt_id", selectedPerguruanTinggi.value);
-		formdata.append("user_id", user_id);
-		formdata.append("description", keteranganLaporan);
-		formdata.append("is_public", true);
-		formdata.append("nama", nama);
-		formdata.append("pelanggaran", selectedJenis.map((e) => e.value).join());
-		if (files.length > 0) {
-			Array.from(files).forEach((e) => {
-				formdata.append("files", e);
+		formdata.append("no_laporan", data.no_laporan);
+		formdata.append("pt_id", data.pt_id);
+		formdata.append("keterangan", data.keterangan);
+		formdata.append("is_private", data.is_private);
+		formdata.append("nama", data.nama);
+		formdata.append("alamat", data.alamat);
+		formdata.append("no_hp", data.no_hp);
+		formdata.append("email", data.email);
+		formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
+		formdata.append("foto", data.foto[0]);
+		if (data.dokumen.length > 0) {
+			Array.from(data.dokumen).forEach((e) => {
+				formdata.append("dokumen", e);
 			});
 		}
-		const create = await createPelaporan(formdata);
-		if (create.success) return create;
-		return false;
+
+		const toastid = toast.loading("Please wait...");
+		const success = await createLaporanPublic(formdata);
+		if (!success) {
+			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("/laporan/new");
+		}
 	};
 
 	render() {
-		const { selectedJenis, pelanggaran, confirm, isPrivate } = this.state;
+		const { selectedJenis, pelanggaran } = this.state;
 		return (
 			<div>
 				<ToastContainer />
@@ -185,104 +168,157 @@ class App extends Component {
 						<Col lg={8} className="block-center d-block ">
 							<Card className="card-default">
 								<CardBody>
-									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
-										<p className="lead bb">Identitas Pelapor</p>
-										<FormGroup row>
-											<div className="col-xl-10">
-												<div className="checkbox c-checkbox">
-													<label>
-														<Input type="checkbox" onChange={(e) => this.setState({ isPrivate: !isPrivate })} defaultChecked="" />
-														<span className="fa fa-check"></span>Klik jika ingin merahasiakan identitas anda
-													</label>
+									<Formik
+										initialValues={{
+											nama: "",
+											no_hp: "",
+											email: "",
+											alamat: "",
+											foto: [],
+											no_laporan: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
+											pt_id: "",
+											pelanggaran_id: "",
+											keterangan: "",
+											dokumen: [],
+											setuju: false,
+											is_private: false,
+										}}
+										validationSchema={laporanSchema}
+										onSubmit={this.handleKirim}
+									>
+										<Form className="form-horizontal">
+											<p className="lead bb">Identitas Pelapor</p>
+											<FormGroup row>
+												<div className="col-xl-10">
+													<div className="checkbox c-checkbox">
+														<label>
+															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
+															<span className="fa fa-check"></span>Klik jika ingin merahasiakan identitas anda
+														</label>
+													</div>
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nama Pelapor</label>
+												<div className="col-md-10">
+													<Field name="nama">{({ field }) => <Input type="text" {...field} />}</Field>
+													<ErrorMessage name="nama" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
+												<div className="col-md-10">
+													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
+													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Email</label>
+												<div className="col-md-10">
+													<Field name="email">{({ field }) => <Input type="email" {...field} />}</Field>
+													<ErrorMessage name="email" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Alamat</label>
+												<div className="col-md-10">
+													<Field name="alamat">{({ field }) => <Input type="textarea" {...field} />}</Field>
+													<ErrorMessage name="alamat" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Foto Kartu Identitas</label>
+												<div className="col-md-10">
+													<Field name="foto">{({ field, form }) => <Input type="file" onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
+													<ErrorMessage name="foto" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<p className="lead bb">Detail Laporan</p>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+												<div className="col-md-10">
+													<Field name="no_laporan">{({ field }) => <Input disabled type="text" {...field} />}</Field>
+													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Perguruan Tinggi yang Dilaporkan</label>
+												<div className="col-md-10">
+													<Field name="pt_id">
+														{({ field, form }) => (
+															<AsyncSelect
+																cacheOptions
+																loadOptions={loadOptions}
+																defaultOptions
+																onChange={(e) => {
+																	this.handleChangeSelectPerguruanTinggi(e);
+																	form.setFieldValue(field.name, e.value);
+																}}
+																onInputChange={this.handleInputChange}
+															/>
+														)}
+													</Field>
+													<ErrorMessage name="pt_id" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+												<div className="col-md-10">
+													<Field name="pelanggaran_id">
+														{({ field, form }) => (
+															<Select
+																instanceId={selectInstanceId + 1}
+																isMulti
+																value={selectedJenis}
+																onChange={(e) => {
+																	this.handleChangeSelectJenis(e);
+																	form.setFieldValue(
+																		field.name,
+																		e.map((e) => e.value)
+																	);
+																}}
+																options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
+																required
+															/>
+														)}
+													</Field>
+													<ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+												<div className="col-md-10">
+													<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
+													<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">File Pendukung</label>
+												<div className="col-md-10">
+													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
+													<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<div className="col-xl-10">
+													<div className="checkbox c-checkbox">
+														<label>
+															<Field name="setuju">{({ field }) => <Input type="checkbox" {...field} />}</Field>
+															<span className="fa fa-check"></span>Klik jika data yang anda laporkan sudah benar
+															<ErrorMessage name="setuju" component="div" className="form-text text-danger" />
+														</label>
+													</div>
 												</div>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nama Pelapor</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.nama} onChange={(e) => this.setState({ nama: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.no_hp} onChange={(e) => this.setState({ no_hp: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Email</label>
-											<div className="col-md-10">
-												<Input type="email" value={this.state.email} onChange={(e) => this.setState({ email: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Alamat</label>
-											<div className="col-md-10">
-												<Input type="textarea" value={this.state.alamat} onChange={(e) => this.setState({ alamat: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Foto Kartu Identitas</label>
-											<div className="col-md-10">
-												<Input type="file" onChange={(e) => this.setState({ fileIdentitas: e.target.files[0] })} />
-											</div>
-										</FormGroup>
-										<p className="lead bb">Detail Laporan</p>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-											<div className="col-md-10">
-												<Input type="text" disabled value={this.state.pelaporanNumber} />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Perguruan Tinggi yang Dilaporkan</label>
-											<div className="col-md-10">
-												<AsyncSelect cacheOptions loadOptions={loadOptions} defaultOptions onChange={this.handleChangeSelectPerguruanTinggi} onInputChange={this.handleInputChange} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
-											<div className="col-md-10">
-												<Select
-													instanceId={selectInstanceId + 1}
-													isMulti
-													value={selectedJenis}
-													onChange={this.handleChangeSelectJenis}
-													options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
-													required
-												/>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
-											<div className="col-md-10">
-												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">File Pendukung</label>
-											<div className="col-md-10">
-												<Input type="file" multiple onChange={(e) => this.setState({ files: e.target.files })} />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<div className="col-xl-10">
-												<div className="checkbox c-checkbox">
-													<label>
-														<Input type="checkbox" onChange={(e) => this.setState({ confirm: !confirm })} defaultChecked="" />
-														<span className="fa fa-check"></span>Klik jika data yang anda laporkan sudah benar
-													</label>
+											</FormGroup>
+											<FormGroup row>
+												<div className="col-12 col-lg-2">
+													<Button color="info" block type="submit">
+														Kirim Laporan
+													</Button>
 												</div>
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<div className="col-12 col-lg-2">
-												<Button color="info" block type="submit" onClick={this.handleKirim}>
-													Kirim Laporan
-												</Button>
-											</div>
-										</FormGroup>
-									</form>
+											</FormGroup>
+										</Form>
+									</Formik>
 								</CardBody>
 							</Card>
 						</Col>

pages/pemantauan.js

@@ -7,6 +7,8 @@ import { getPelaporanPublic } from "@/actions/pelaporan";
 import DetailLaporan from "@/components/Public/DetailLaporan";
 import { getLogPublic } from "@/actions/log";
 import Timeline from "@/components/Main/Timeline";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
 
 const menu = [
 	{
@@ -22,6 +24,11 @@ const menu = [
 		path: "/pemantauan",
 	},
 ];
+
+const pemantauanSchema = Yup.object().shape({
+	no_laporan: Yup.string().required("Harap Diisi"),
+	no_hp: Yup.number().required("Harap Diisi"),
+});
 class App extends Component {
 	constructor(props) {
 		super(props);
@@ -30,8 +37,8 @@ class App extends Component {
 			no_laporan: "",
 			no_hp: "",
 			msgError: [],
-			laporan: {},
-			log: {},
+			laporan: null,
+			log: null,
 		};
 	}
 
@@ -43,13 +50,11 @@ class App extends Component {
 		});
 	};
 
-	handleLihatPemantaun = async (e) => {
-		e.preventDefault();
-		const { no_hp, no_laporan } = this.state;
-		const laporan = await getPelaporanPublic({ number: no_laporan, noHp: no_hp });
-		const log = await getLogPublic({ ptId: laporan.data[0].pt_id, laporanId: laporan.data[0]._id });
-		this.setState({ laporan });
-		this.setState({ log });
+	handleLihatPemantaun = async (data) => {
+		const { no_hp, no_laporan } = data;
+		const log = await getLogPublic({ no_hp, no_laporan });
+		this.setState({ laporan: log.data.laporan });
+		this.setState({ log: log.data.pemantauan });
 	};
 
 	render() {
@@ -78,37 +83,48 @@ class App extends Component {
 						<Col lg={8} className="block-center d-block ">
 							<Card className="card-default">
 								<CardBody>
-									<form className="form-horizontal" method="post" onSubmit={this.onSubmit}>
-										<p className="lead bb">Pemantauan</p>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor Laporan</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.no_laporan} onChange={(e) => this.setState({ no_laporan: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
-											<div className="col-md-10">
-												<Input type="text" value={this.state.no_hp} onChange={(e) => this.setState({ no_hp: e.target.value })} required />
-											</div>
-										</FormGroup>
-										<FormGroup row>
-											<div className="col-12 col-lg-2">
-												<Button color="info" block type="submit" onClick={this.handleLihatPemantaun}>
-													Lihat Pemantauan
-												</Button>
-											</div>
-										</FormGroup>
-									</form>
+									<Formik
+										initialValues={{
+											no_laporan: "",
+											no_hp: "",
+										}}
+										validationSchema={pemantauanSchema}
+										onSubmit={this.handleLihatPemantaun}
+									>
+										<Form className="form-horizontal">
+											<p className="lead bb">Pemantauan</p>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Laporan</label>
+												<div className="col-md-10">
+													<Field name="no_laporan">{({ field }) => <Input type="text" {...field} />}</Field>
+													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
+												<div className="col-md-10">
+													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
+													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<div className="col-12 col-lg-2">
+													<Button color="info" block type="submit">
+														Lihat Pemantauan
+													</Button>
+												</div>
+											</FormGroup>
+										</Form>
+									</Formik>
 								</CardBody>
 							</Card>
 							<Card className="card-default">
 								<CardBody>
-									{laporan.data && log.data ? (
+									{laporan && log ? (
 										<>
-											<DetailLaporan data={laporan.data[0]} />
+											<DetailLaporan data={laporan} />
 											<p className="lead bb">Pemantauan</p>
-											<Timeline data={log.data} noFile />{" "}
+											<Timeline data={log} noFile />{" "}
 										</>
 									) : (
 										"Tidak Ada Laporan"