Fakultas Ilmu Komputer UI

Commit 65117ae3 authored by Nabila Febri Viola's avatar Nabila Febri Viola
Browse files

[GREEN] Implements riwayat acara donor integration

parent e51b23e3
Pipeline #48907 failed with stages
in 1 minute and 26 seconds
......@@ -109,6 +109,9 @@ export const getAgendaDonor = shouldReturnDefault =>
? Promise.resolve({ data: [] })
: axios.get(`/donor/jadwal/agenda/`)
export const getRiwayatAcaraDonor = page =>
axios.get(`/acara-donor/pengajuan/riwayat/${!!page ? "?page=" + page : ""}`)
export const getRiwayatDonor = page =>
axios.get(`/donor/jadwal/riwayat/${!!page ? "?page=" + page : ""}`)
......
......@@ -5,6 +5,7 @@ import { useQuery } from "react-query"
import {
getAgendaDonor,
getFormulirDaftarDonor,
getRiwayatAcaraDonor,
getRiwayatDonor,
getUserProfile,
} from "../api"
......@@ -34,6 +35,29 @@ const Profile = () => {
? dataAgenda.data[0]
: null
const [pageRiwayatAcaraDonor, setPageRiwayatAcaraDonor] = useState(1)
const {
status: statusRiwayatAcaraDonor,
data: dataRiwayatAcaraDonor,
refetch: refetchRiwayatAcaraDonor,
isFetching: isFetchingRiwayatAcaraDonor,
} = useQuery(
["riwayat-acara-donor", pageRiwayatAcaraDonor],
(queryKey, page) => getRiwayatAcaraDonor(page)
)
const paginationItemCountRiwayatAcaraDonor = 5
const riwayatAcaraDonorCountPerPage = 3
const pageCountRiwayatAcaraDonor = dataRiwayatAcaraDonor
? Math.ceil(
dataRiwayatAcaraDonor.data.count / riwayatAcaraDonorCountPerPage
)
: 0
const paginationRiwayatAcaraDonor = paginationArray(
pageRiwayatAcaraDonor,
pageCountRiwayatAcaraDonor,
paginationItemCountRiwayatAcaraDonor
)
const [pageRiwayatDonor, setPageRiwayatDonor] = useState(1)
const {
status: statusRiwayatDonor,
......@@ -182,7 +206,120 @@ const Profile = () => {
<div className="row justify-content-center">
<div className="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4 my-3">
<div className="card profile-card border-light shadow bg-white rounded mt-2 card">
<div className="card-body fluid"></div>
<div className="card-body fluid d-flex flex-column">
<h5 className="text-center text-red mb-3">
<b>Riwayat Acara Donor Darah</b>
</h5>
{isFetchingRiwayatAcaraDonor ? (
<Spinner />
) : statusRiwayatAcaraDonor === "error" ? (
<ErrorRetry retry={refetchRiwayatAcaraDonor} />
) : (
<div className="container flex-grow-1 d-flex flex-column">
{dataRiwayatAcaraDonor.data.count === 0 ? (
<div className="text-center">
Belum ada riwayat acara donor.
</div>
) : (
<>
<div className="flex-grow-1">
<table className="table table-riwayat-donor table-striped">
<thead>
<tr>
<th>Alamat</th>
<th>Waktu</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{dataRiwayatAcaraDonor.data.results.map(
riwayatAcaraDonor => {
return (
<tr key={riwayatAcaraDonor.id}>
<td>
{riwayatAcaraDonor.alamat_lokasi_donor}
</td>
<td>
{moment(
riwayatAcaraDonor.waktu_mulai
).format("D MMMM YYYY, (HH:mm")}
{moment(
riwayatAcaraDonor.waktu_berakhir
).format(" - HH:mm)")}
</td>
<td>
{riwayatAcaraDonor.status ? (
<p>Diterima</p>
) : (
<p>Ditolak</p>
)}
</td>
</tr>
)
}
)}
</tbody>
</table>
</div>
<ul className="pagination d-flex justify-content-center">
<li
className={`page-item ${
pageRiwayatAcaraDonor === 1 ? "disabled" : ""
}`}
onClick={() =>
pageRiwayatAcaraDonor > 1 &&
setPageRiwayatAcaraDonor(curPage => curPage - 1)
}
>
<span className="page-link">
«
<span className="sr-only">
Halaman sebelumnya riwayat acara donor
</span>
</span>
</li>
{paginationRiwayatAcaraDonor.map(val => (
<li
className={`page-item ${
pageRiwayatAcaraDonor === val ? "active" : ""
}`}
onClick={() => setPageRiwayatAcaraDonor(val)}
key={val}
>
<span className="page-link">
{val}
<span className="sr-only">
{`Halaman ${val} riwayat acara donor`}
</span>
</span>
</li>
))}
<li
className={`page-item ${
pageRiwayatAcaraDonor ===
pageCountRiwayatAcaraDonor
? "disabled"
: ""
}`}
onClick={() =>
pageRiwayatAcaraDonor <
pageCountRiwayatAcaraDonor &&
setPageRiwayatAcaraDonor(curPage => curPage + 1)
}
>
<span className="page-link">
»
<span className="sr-only">
Halaman selanjutnya riwayat acara donor
</span>
</span>
</li>
</ul>
</>
)}
</div>
)}
</div>
</div>
</div>
<div className="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4 my-3">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment