Fakultas Ilmu Komputer UI

Commit 1f07e733 authored by Muhammad Fairuzi Teguh's avatar Muhammad Fairuzi Teguh
Browse files

[REFACTOR] integrate with backend

parent 743ac2f3
Pipeline #48743 passed with stages
in 1 minute and 48 seconds
......@@ -6,4 +6,4 @@ class ExtraSmallResultsSetPagination(PageNumberPagination):
class SmallResultsSetPagination(PageNumberPagination):
page_size = 5
page_size = 6
import React from "react"
import { Link } from "gatsby"
import React, { useState } from "react"
import { Card, CardDeck } from "react-bootstrap"
import { useQuery } from "react-query"
import { getListArtikelEdukasi } from "../api"
import ErrorRetry from "../components/error-retry"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { Card, CardDeck } from "react-bootstrap"
import "./kumpulan-artikel.css"
import Spinner from "../components/spinner"
import "../styles/theme.css"
import { paginationArray } from "../utils/array"
import "./kumpulan-artikel.css"
const renderArtikelCard = article => {
return (
<Card>
<Card.Img variant="top" src={article.featured_image} />
<Card.Body>
<Card.Title>{article.title}</Card.Title>
<Card.Text className="article">
{article.content
.split(". ")
.slice(0, 3)
.join(". ") + ". ..."}
</Card.Text>
</Card.Body>
<Card.Footer>
<Link to={"/article/" + article.id}>Selengkapnya</Link>
</Card.Footer>
</Card>
)
}
const KumpulanArtikel = () => {
const [page, setPage] = useState(1)
const { status, data, refetch } = useQuery(["artikel-edukasi", page], () =>
getListArtikelEdukasi(page)
)
const articles = status === "success" ? data.data.results : []
const firstRowArticles = articles.slice(0, 3)
const secondRowArticles = articles.slice(3, 6)
const paginationItemCount = 5
const countPerPage = 6
const pageCount = data ? Math.ceil(data.data.count / countPerPage) : 0
const pagination = paginationArray(page, pageCount, paginationItemCount)
return (
<Layout navbar>
<SEO title="Kumpulan Artikel" />
<h2 className="text-red text-center mb-4">
<strong>Kumpulan Artikel</strong>
</h2>
<CardDeck className="mb-3">
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_52683-35468.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_52683-35467.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This card has supporting text below as a natural lead-in to
additional content.{" "}
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_23-2148491706.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
</CardDeck>
<CardDeck className="mb-5">
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_52683-35467.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_23-2148491706.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This card has supporting text below as a natural lead-in to
additional content.{" "}
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
<Card>
<Card.Img
variant="top"
src="https://image.freepik.com/free-vector/people-wearing-medical-mask_52683-35468.jpg"
/>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text className="article">
This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.
</Card.Text>
</Card.Body>
<Card.Footer>
<a href="#">Selengkapnya</a>
</Card.Footer>
</Card>
</CardDeck>
{status === "loading" ? (
<Spinner />
) : status === "error" ? (
<ErrorRetry retry={refetch} />
) : (
<>
<CardDeck className="mb-3">
{firstRowArticles.map(renderArtikelCard)}
</CardDeck>
<CardDeck className="mb-3">
{secondRowArticles.map(renderArtikelCard)}
</CardDeck>
</>
)}
<ul className="pagination d-flex justify-content-center">
<li className="page-item">
<span className="page-link">
«<span className="sr-only">Halaman sebelumnya riwayat donor</span>
</span>
</li>
<li className="page-item">
<span className="page-link">
1<span className="sr-only">Halaman 1 riwayat donor</span>
</span>
</li>
<li className="page-item">
<span className="page-link">
2<span className="sr-only">Halaman 2 riwayat donor</span>
</span>
</li>
<li className="page-item">
<li
className={`page-item ${page === 1 ? "disabled" : ""}`}
onClick={() => page > 1 && setPage(p => p - 1)}
>
<span className="page-link">
3<span className="sr-only">Halaman 3 riwayat donor</span>
«
<span className="sr-only">Halaman sebelumnya kumpulan artikel</span>
</span>
</li>
<li className="page-item">
{pagination.map(val => (
<li
className={`page-item ${page === val ? "active" : ""}`}
onClick={() => setPage(val)}
key={val}
>
<span className="page-link">
{val}
<span className="sr-only">{`Halaman ${val} kumpulan artikel`}</span>
</span>
</li>
))}
<li
className={`page-item ${page === pageCount ? "disabled" : ""}`}
onClick={() => page < pageCount && setPage(p => p + 1)}
>
<span className="page-link">
»<span className="sr-only">Halaman selanjutnya riwayat donor</span>
»
<span className="sr-only">
Halaman selanjutnya kumpulan artikel
</span>
</span>
</li>
</ul>
......
import React from "react"
import { render } from "../utils/test-util"
import KumpulanArtikel from "./kumpulan-artikel"
import { getListArtikelEdukasi } from "../api"
import { artikelEdukasiFactory } from "../components/artikel-edukasi.factory"
import { screen, fireEvent } from "@testing-library/react"
describe("Kumpulan Artikel", () => {
it("renders properly", () => {
const { container } = render(<KumpulanArtikel />)
expect(container).toHaveTextContent("Kumpulan Artikel")
})
it("shows artikel from backend", async () => {
const testTitle = "PMI D'Blood Si Nomor 1"
getListArtikelEdukasi.mockResolvedValueOnce({
data: {
count: 7,
results: [
artikelEdukasiFactory({ title: testTitle }),
artikelEdukasiFactory(),
artikelEdukasiFactory(),
artikelEdukasiFactory(),
artikelEdukasiFactory(),
artikelEdukasiFactory(),
],
},
})
render(<KumpulanArtikel />)
expect(await screen.findByText(testTitle)).toBeInTheDocument()
fireEvent.click(screen.getByText("Halaman selanjutnya kumpulan artikel"))
fireEvent.click(screen.getByText("Halaman sebelumnya kumpulan artikel"))
fireEvent.click(screen.getByText("Halaman 2 kumpulan artikel"))
})
})
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