Deni Setiawan Blog Note

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?

Halo temen-temen, untuk implementasi dari custom hook yang sudah dibuat pada part 7 akan dibahas pada part ini, sudah siap untuk tempur ngoding lagi? Langkah pertama, ubah file pages/_app.js agar bisa akses useAuth hooks. Ini memakai konsep HOC yang merupakan singkatan dari High Order Component. Tentunya konsep ini tidak akan dibahas disini, jika ingin dibahas boleh comment yaa.. Buka file pages/login.tsx lalu import useAuth dan seperti yang kita lihat, sekarang bisa akses semua function dari useAuth hooks Lalu ubah seperti dibawah ini Pastikan sudah jalankan npm run dev di console, dan akses login page, lalu login. Tentunya akan muncul alert error auth/configuration-not-found karena belum turn on authentication di firebase  Masuk ke halaman Authentication di console.firebase dan klik Get Started Klik email & password untuk metode login yang kita gunakan Enable toggle email/password dan klik save Pastikan status nya enable Refresh login page, isi email dan password dan klik but

Sekarang kita akan lanjutkan membuat custom hooks. Sebagai bahan pemahaman, bisa baca tentang react custom hooks pada link ini yaa  https://id.reactjs.org/docs/hooks-custom.html .Gimana paham? langsung mulai ke langkah pertama.. Buat folder hooks di project kita, lalu buat file baru di folder tersebut dengan nama useAuth.tsx , setelah itu import beberapa function dari firebase/auth, next/router, react dan firebase yang akan digunakan nanti Ada beberapa langkah untuk membaut  asynchronous signUp  function. Function Ini akan menerima email dan password sebagai parameter bertipe data string Buat state loading, yang akan digunakan sebagai loading indicator Di dalam function signUp hal pertama yang dilakukan adalah set loading state menjadi true , untuk menandakan bahwa prosess dimulai Gunakan function createUserWithEmailAndPassword yang di import dari firebase/auth. Function ini menerima parameter  Auth (no.2, di import dari file firebase.ts)  Email Password Lalu setUser , state ini bert

Di part sebelumnya, tampilan halaman login sudah selesai, saatnya membuat fungsi login. Ada satu library bagus yang bisa dipakai untuk mempermudah membuat function form login, Namanya react-hook-form   bisa diakses langsung dan mencoba demo nya langsung di https://react-hook-form.com/ . Yukk langsung coba install ke project netflix kita. Copy code npm install react-hook-form ke cmd dan tunggu sampai proses nya selesai Jika sudah selesai, buka buka file pages/login.tsx , kita akan gunakan useform dan SubmitHandler dari react-hook-form Pada tag form tambahkan onSubmit Dibawah ini muncul suggestion “email” dan “password” , kenapa? Karena kita sudah mendefinisikan type di   interface Inputs Karena keduanya harus di isi, tambahkan required true Hapus watch karena tidak dibutuhkan, saat klik button Sign In seharusnya function  onSubmit di jalankan dan akan menampilkan data yang di ketik pada console browser Yukk kita coba ketikkan email dan password lalu klik Sign in, jangan lupa buka conso