Fakultas Ilmu Komputer UI

Commit 7c54b297 authored by Nabila Febri Viola's avatar Nabila Febri Viola
Browse files

Merge branch 'PBI-8/integrasi_stok_donor' into 'PBI-8-stok-donor'

Pbi 8/integrasi stok donor

See merge request !79
parents 9f458782 fe984d0a
Pipeline #44885 passed with stages
in 2 minutes and 27 seconds
{
"lockfileVersion": 1
}
......@@ -22,6 +22,3 @@ class Darah(models.Model):
def __str__(self):
return f'{self.tipe}'
class Meta:
pass
from django.urls import path, include
from rest_framework import routers
from .views import DarahViewSet
from django.urls import path
router = routers.DefaultRouter()
router.register(r'darah', DarahViewSet)
from .views import DarahView
urlpatterns = [
path('', include(router.urls))
path('darah/', DarahView.as_view())
]
from rest_framework import viewsets
from rest_framework import generics
from .serializers import DarahSerializer
from .models import Darah
class DarahViewSet(viewsets.ReadOnlyModelViewSet):
class DarahView(generics.ListAPIView):
serializer_class = DarahSerializer
queryset = Darah.objects.all().order_by('tipe')
......@@ -78,3 +78,5 @@ export const getAgendaDonor = shouldReturnDefault =>
export const getRiwayatDonor = page =>
axios.get(`/donor/jadwal/riwayat/${!!page ? "?page=" + page : ""}`)
export const getStokDarah = () => axios.get(`/stok-darah/darah/`)
import React from "react"
import ReactApexChart from "react-apexcharts"
import { apexOptions } from "../config"
import Row from "react-bootstrap/Row"
import Col from "react-bootstrap/Col"
import Row from "react-bootstrap/Row"
import { useQuery } from "react-query"
import { getStokDarah } from "../api"
import { apexOptions } from "../config"
import "./stokdonorchart.css"
import Spinner from "./spinner"
import ErrorRetry from "./error-retry"
export default function StokDonorChart() {
const state = {
series: [
{
name: "Rhesus Positif",
data: [263, 334, 232, 385],
},
{
name: "Rhesus Negatif",
data: [424, 463, 317, 345],
},
],
}
const { status, data, refetch, isFetching } = useQuery(
["stok-darah"],
queryKey => getStokDarah()
)
const series = data
? [{ name: "Darah", data: data.data.map(stok => stok.jumlah_stok) }]
: []
return (
<div>
<Row>
<Col sm="1" id="title">
<div className="">
<div className="title">
<h1>Stok Darah PMI Depok</h1>
</div>
</Col>
<Col>
<div id="chart">
<ReactApexChart
options={apexOptions}
series={state.series}
type="bar"
height={350}
/>
{isFetching ? (
<Spinner />
) : status === "error" ? (
<ErrorRetry retry={refetch} />
) : (
<ReactApexChart
options={apexOptions}
series={series}
type="bar"
height={350}
/>
)}
</div>
</Col>
</Row>
......
import {
fireEvent,
render,
screen,
waitForElementToBeRemoved,
} from "@testing-library/react"
import React from "react"
import { render } from "@testing-library/react"
import { getStokDarah } from "../api"
import StokDonorChart from "./stokdonorchart"
it("renders properly", () => {
const { getByText } = render(<StokDonorChart />)
expect(getByText(/Stok Darah PMI Depok/)).toBeInTheDocument()
describe(`Stok Donor`, () => {
it("renders properly", () => {
const { getByText } = render(<StokDonorChart />)
expect(getByText(/Stok Darah PMI Depok/)).toBeInTheDocument()
})
it(`Show "Coba lagi" button if failing on load the data and then if success show the result`, async () => {
getStokDarah.mockRejectedValueOnce(new Error("Dummy error"))
render(<StokDonorChart />)
const buttonRetry = await screen.findByText("Coba lagi")
expect(buttonRetry).toBeInTheDocument()
getStokDarah.mockResolvedValueOnce({
data: [{ type: "A", jumlah_stok: "100" }],
})
fireEvent.click(buttonRetry)
await waitForElementToBeRemoved(() => screen.queryByText("Coba lagi"))
})
})
......@@ -50,10 +50,18 @@ const IndexPage = () => {
<SEO title="Home" />
<div className="mb-4">
<Row className="justify-content-center">
<Col xs={{ span: 12, order: 2 }} md={{ span: 10, order: 1 }}>
<Col
xs={{ span: 12, order: 2 }}
md={{ span: 9, order: 1 }}
lg={{ span: 10, order: 1 }}
>
<StokDonorChart />
</Col>
<Col xs={{ span: 4, order: 1 }} md={{ span: 2, order: 2 }}>
<Col
xs={{ span: 4, order: 1 }}
md={{ span: 3, order: 2 }}
lg={{ span: 2, order: 2 }}
>
<div className="calendar">
<div className="calendar__header">
<div className="text-left">{today.format("MMM")}</div>
......
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