Netflix Clone Menggunakan NextJs dan Tailwind | Part 6

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 console di browser yaa
Dan selanjutnya, kita buat error handling dengan memanfaatkan object errors
Jika errors.email / errors.password bernilai true maka tampilkan pesan error
Ingat di function onSubmit kita hanya console data email dan password? Console tersebut akan dihapus dan di dalam function ini kita akan menggunakan custom hooks yang nanti akan dibuat bersama sama.
Buat state, yang berguna sebagai variable penentu, apakah user menekan Sign In atau Sign Up
Saat user menekan button Sign In, akan set login state menjadi true, dan jika menekan button Sign Up, set login state menjadi false
Ubah function onSubmit, jika state login bernilai true maka jalankan fungsi signIn, jika false jalankan fungsi signUp. Kedua fungsi signIn dan signUp ini berasal dari custom hooks yang akan kita buat di part selanjutnya..

Lanjut part 7😎










0 comments: