Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
2020
PPL-C
Diskominfo-D'Blood
Mantan Aab-D Blood
Commits
1f07e733
Commit
1f07e733
authored
Jun 02, 2020
by
Muhammad Fairuzi Teguh
Browse files
[REFACTOR] integrate with backend
parent
743ac2f3
Pipeline
#48743
passed with stages
in 1 minute and 48 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
backend/main/paginations.py
View file @
1f07e733
...
...
@@ -6,4 +6,4 @@ class ExtraSmallResultsSetPagination(PageNumberPagination):
class
SmallResultsSetPagination
(
PageNumberPagination
):
page_size
=
5
page_size
=
6
frontend/src/pages/kumpulan-artikel.js
View file @
1f07e733
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
View file @
1f07e733
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
"
))
})
})
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment