Netflix Clone Menggunakan NextJs dan Tailwind | Part 7

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 bertipe User(firebase User) dengan default null

  • Lalu redirect ke home page dan setLoading false pertanda bahwa proses telah selesai
  • Jika ada error, baris code catch akan dijalankan dan menampilkan alert pesan error
  • setLoading false di baris code finally
Untuk function signIn, bisa copy paste code signUp, hanya ubah nama function dari createUserWithEmailAndPassword jadi signInWithEmailAndPassword
Function logout memakai fungsi signOut dari firebase/auth, saat logout kita harus setUser kembali ke nilai default
Semua function yang dibutuhkan untuk Authentication sudah dibuat, sekarang kita akan membuat function ini bisa di akses oleh component child dengan memanfaatkan useContext dan useMemo. Jika ingin mempelajari konsep penggunaan nya lebih lanjut, bisa baca artikel ini https://reactjs.org/docs/hooks-reference.html

Pertama, buat interface IAuth sebagai type AuthContext. Seperti yang kita lihat, Ketika createContext, type argument tidak boleh kosong. Simple nya Interface IAuth itu mendefinisikan type
  • user bertipe User(firebase) atau null (nilai default)
  • signUp & signIn adalah sebuah function yang menerima email dan password bertipe data string, dan Promise yang berarti function ini melakukan operasi asynchronous
  • logout juga merupakan sebuah function yang melakukan operasi asynchronous
AuthContext itu bertipe IAuth, maka dengan mudah kalian bisa melihat suggestion(Ctrl+space) karena sudah memakai IAuth sebagai type
Dibawah ini adalah code lengkap AuthContext dan buat satu interface AuthProvideProps
React.ReactNode yang ada di interface AuthProviderProps itu bisa bertipe string, number, Boolean, dll, dan dipakai sebagai type AuthProvider
Satu lagi function yang harus kita punya, yaitu function yang berfungsi untuk melakukan pengecekan apabila user telah login dan melakukan refresh halaman, seharusnya user tidak logout. Maka dari itu harus cek apakah user exist? Jika tidak, maka harus di redirect kembali untuk login ulang. Memanfaatkan useEffect dan menggunakan onAuthStateChanged dari firebase/Auth
Dibawah function logout, buat const memoedValue yang memuat useMemo. useMemo hanya akan menghitung ulang nilai memo ketika salah satu telah berubah. 
Set memoed value ke AuthContext.Provider agar children bisa akses, sebelum return children component, lakukan pengecekan initialLoading terlebih dahulu, jika false maka tampikan component children
Terakhir, export useAuth

Custom hooks siap digunakan, implementasi penggunaan custom hook ini akan di jelaskan di part 8. Jangan lupa untuk comment jika ada yang kurang dipahamišŸ˜‰




0 comments: