Untuk exercise kali ini, silakan teman-teman buka file src\App.js
, jangan lupa untuk menjalankan pnpm start
untuk menjalankan server Reactnya.
Untuk menjalankan test-casenya, selain bisa menggunakan grader-cli test
, teman-teman juga bisa menggunakan pnpm test
.
Gunakan Chakra-UI, disarankan bermain-main dengan komponen-komponen menarik Chakra UI di sini. Diperbolehkan juga mengganti warna. Mari jadikan web kamu menarik :D
Kita memiliki 3 halaman:
Component: src/Home.js
Homepage hanya berisi tulisan Welcome!
Component: src/PokemonList.js
Halaman ini berisi list pokemon yang diambil dari API pokeapi. Di halaman ini ditampilkan 20 pokemon per halaman.
Di bagian atas, ada button navigasi:
- Prev: untuk berpindah ke halaman sebelumnya
- Next: untuk berpindah ke halaman selanjutnya
Jika halaman sebelumnya tidak ada (halaman ke 0), maka button Prev akan disabled.
Perpindahan halaman dilakukan dengan mengubah query parameter page
di URL:
/pokemon?page=2
Khusus untuk halaman satu, query parameter page
tidak perlu ditampilkan:
/pokemon
sama dengan /pokemon?page=1
Masing-masing pokemon ditampilkan dalam bentuk Card, jika di klik, maka akan menuju ke halaman detail pokemon terkait.
Untuk masing-masing Cardnya, tampilkan:
- Nama pokemon
- Gambar pokemon (
front_default
,back_default
,front_shiny
,back_shiny
). Untuk masing-masing gambar, tambahkanalt
attribute sebagai berikut:Front Default
,Back Default
,Front Shiny
,Back Shiny
- Pokemon Types
Component: src/PokemonDetail.js
Halaman ini berisi detail dari pokemon yang dipilih.
Detail yang perlu ditampilkan field:
name
type.name
height
weight
abilities
stats
Component: src/Legend.js
dan src/ProtectedRoute.js
Ini adalah halaman rahasia! :D
Untuk masuk ke halaman ini, kita perlu menambahakan query parameter password dengan value secret
di URL:
/legend?password=secret
Jika password salah, atau tidak ada query parameter password, maka akan diredirect ke /unauthorized
.
Pssst, a little secret between us: halaman ini bisa dibuka juga dengan double click menu "Legend":
Component: src/Unauthorized.js
Halaman ini hanya menampilkan text You are not authorized to open this page