Netflix Clone Menggunakan NextJs dan Tailwind | Part 9

Untuk membantu pengembangan aplikasi, install state management library yang Namanya Recoil dengan mengetikkan perintah npm install recoil pada console (pastikan berada di lokasi folder project Netflix clone kita ya).  Untuk membaca dokumentasi lebih lanjut bisa akses link ini https://recoiljs.org/docs/introduction/getting-started

Tunggu proses install selesai

Jika proses install recoil sudah selesai, kita akan gunakan  component modal dari MUI (Material UI), pertama-tama copy
npm install @mui/material @emotion/react @emotion/styled 
paste di console. Saat seri tutorial ini dibuat, menggunakan MUI versi 5.8.7
Contoh modal yang akan dipakai, bisa dilihat di link berikut https://mui.com/material-ui/react-modal/

Saat mengembangkan aplikasi di nextjs, terkadang kita butuh memakai state yang sama di component yang berbeda. Cara pertama yang bisa dilakukan yaitu dengan mengirim state dari satu component ke child component yang lain. Tapi bagaimana jika component bukan merupakan child nya? Recoil akan membantu kita melakukan hal ini

Sebelum itu, kita akan menambahkan indikator loading di file pages/index.tsx
Jika state loading bernilai true, akan return null yang berarti tampilan halaman nya akan kosong (atau bisa juga menambahkan loading gif). Dicoba yaa..
Buat const showModal dengan value useRecoilValue, custom hooks ini menerima recoilValue sebagai parameter yang merupakan atom. Sebuah atom mewakili bagian dari state. Atom dapat dibaca dari dan ditulis dari komponen manapun. 
Saat ini kita akan buat modal atom yang akan digunakan sebagai parameter useRecoilValue
  1. Buat folder atoms  dan file modalAtom.ts
  2. Import DocumentData, atom, dan Movie seperti yang ditandai no 2
  3. Buat modalState dengan nilai default false
  4. movieState dengan provide tipe Movie atau DocumentData atau bisa juga bernilai null
Buka file index.tsx tambahkan modalState di useRecoilValue sebagai parameter. Dan auto import dari atoms/modalAtom
Buat component Modal di folder components dengan nama file Modal.tsx
Di file pages/index.tsx, kita akan memunculkan modal hanya saat status showModal bernilai true. Tambahkan baris code seperti dibawah ini, jangan lupa untuk import component modal  dari file component/Modal.tsx (jangan dari mui)
Ubah file components/Modal.tsx seperti dibawah ini
Lalu ubah juga file pages/_app.js, kita wrap seluruh component nya dengan RecoilRoot agar bisa menggunakan recoil state
Selanjutnya kita akan buat action click di button more info agar bisa menampilkan modal, dengan menambahkan useRecoilState
Dan juga action onClick di button more info, saat click button terjadi 2 proses, pertama setCurrentMovie dan setShowModal true
Modal berhasil muncul, saatnya kita bekerja di file components/Modal.tsx untuk membuat tampilan modal yang bagus
Pada file components/Modal.tsx tambahkan button close, dan juga tambahkan css modalButton di file styles/global.css

Button close sudah selesai dibuat

Dalam fungsi useEffect, kita akan panggil api tmdb movie untuk mendapatkan link trailer yang nantinya trailer tersebut akan ditampilkan di modal, proses yang terjadi di dalam useEffect adalah sebagai berikut

  • Baris if akan melakukan pengecekan terhadap value movie, jika movie kosong/undefined, maka proses berakhir (return)
  • Jika movie tidak undefined, panggil API https://api.themoviedb.org
  • Di baris then, response di return dalam bentuk json
  • Console data untuk melihat response
Refresh page, jika muncul data pada console, maka proses berhasil
Ubah juga file components/Thumbnail.tsx agar Ketika click thumbnail movie muncul modal. Hanya perlu menambahkan action onClick seperti button More Info

Jika ada yang tidak dimegerti, jangan sungkan untuk komentar yaa,,, ditunggu part selanjutnya!
Link github : Netflix clone part 9












0 comments: