[REFACTOR] integrate with backend

backend/main/paginations.py

@@ -6,4 +6,4 @@ class ExtraSmallResultsSetPagination(PageNumberPagination):
 
 
 class SmallResultsSetPagination(PageNumberPagination):
-    page_size = 5
+    page_size = 6

frontend/src/pages/kumpulan-artikel.js

-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>

frontend/src/pages/kumpulan-artikel.test.js

 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"))
+  })
 })