Berikut adalah pembahasan atau 'bedah' code React Hooks dari FreeCodeCamp tulisan Mohammad Iqbal. Bedah ini adalah satu teknik dari latihan pembelajaran programming saya. Code React Hooks yang dibahas adalah code frontend untuk blog sederhana dengan fitur authentication dan form. Code aslinya dapat dilihat di situs web FreeCodeCamp.
ACTION_TYPES.JS
- action_types.js memuat semua variable yang nanti akan dipakai ulang sebagai property callback function untuk function reducer, mungkin juga untuk function setState, useEffect, context.
- Variable yang dicantumkan di sini adalah variable yang menindaklanjuti input dari user, yaitu SUCCESS, FAILURE, LOGIN_FAILURE, ADD_PROFILE, USER_INPUT_CHANGE, USER_INPUT_SUBMIT
ACTIONS.JS
- Memuat object actions yang mengandung type dari variable di action_types.js. Type yang dimaksud adalah property dari object-object actions.
- Penulisan object actions dilakukan memakai huruf kecil, misalnya login_success, login_failure, dan sebagainya. Ini berbeda dengan penulisan variable di file action_types yang menakai huruf besar semua.
AUTH_REDUCER.JS
- Adalah tempat function AuthReducer yang berfungsi mengoldah data authentication. AuthReducer nantinya akan dipakai di global_state_config.js.
- Di global_state_config.js, AuthReducer akan mendapat data soal authentication. Data ini akan dipakai untuk mengubah state, secara lebih spesifik adalah property is_authenticated dan profile.
- property is_authenticated diambil jadi property authState yang dipakai untuk authentication.
- authState tidak dideklarasikan di code. Mungkin property itu ada dari library authentication.
- Pengolahan data dari global_state_config.js itu berupa, misalnya, login success, login failure, add profile, remove profile.
FORM_REDUCER.JS
- Memuat function untuk mengolah data input user ke form.
- Datanya berupa perubahan (change) dan submit.
- Datanya akan dimasukkan ke property user_textChange dan user_textSubmit di state object.
- Data user_textChange dan user_textSubmit ini akan ditampilkan di halaman depan lewat komponen Context.Provider.
PLAIN_REDUCER.JS
- Kabarnya ini adalah boilerplate untuk membuat reducer-reducer baru.
- Formatnya standar. Ada initialState yang mengandung property.
- Lalu ada function Reducer1 yang mengolah data dari luar untuk nantinya mengubah property dari initialState di atas. Propertynya itu dalam hal ini adalah stateprop.
Reducer-reducer di atas selain dibuat di file tersendiri juga dipanggil di global_state_context.js dengan function useReducer yang mengandung function dispatch. useReducer ini mengambil initialState dari reducer-reducer di atas lalu mengubah property dari initialState tersebut.
CONTEXT.JS
- Isinya hanya instansiasi object Context. Ini diexport ke context_state_config.js.
CONTEXT_STATE_CONFIG.JS
- Di sini ada component ContextState yang pada dasarnya mencakup interface semua fungsi.
- ContexState ini nanti dipanggil di App.js.
- Di ContextState ada semua reducer, yaitu Plain Reducer, Auth Reducer, Form Reducer.
- Di ContextState ada return component Context.Provider. Object Context akan diinisiasi di file lain. Berarti di sini ContextState me-return Context yang diinisiasi di file lain lalu di ambil propertynya yaitu Provider.
- Tiap reducer ada function handle sesuai input user dengan memanfaatkan function useReducer dan dispatch untuk mengolah data input user.
- useReducer ini memakai input initial state dari property reducer di file masing-masing reducer.
- Jadi di useReducer ini, function handle akan mengambil data dari user, lalu diubah menjadi variable.
- Variable ini akan diteruskan ke file reducer masing-masing.
- Pernyataan component Context.Provider diisi oleh property value yang berisi statement-statement yang mengambil data dari input user.
- Context.Provider sendiri berisi value hasil input user, tapi elemen ini tidak menampilkan html yang akan ditampilkan ke user.
- Elemen HTML yang akan ditampilkan ke user itu dimuat di component lain seperti Home, HooksContainer1 dan Header.
- Context.Provider cuma menampung value dari component lain.
- HooksContainer, Home dan Header tidak langsung dipanggil di Context.Provider biarpun Context.Provider yang pertama dipanggil di App.js.
- Route akan dipanggil di Context.Provider.
- Di sini juga ada bagian handleAuthentication. handleAuth di declare di file auth.js. authObj dipakai di authcheck.js.
- Perlu diingat lagi, bagian Context.Provider ini hanya menyimpan value dan melakukan fungsi awal dalam pengolahan data input. Tampilan HTML diatur di component lain. Data selanjutnya diolah di masing-masing file reducer.
AUTH.JS
- File ini mengurus masalah authentication. Pemakaian library auth0-js ada di sini.
- Pertama di sini dibuat class Auth dan diatur property-propertynya.
- Lalu ada object userProfile yang masih null.
- Ada function login. Ini semua sepertinya ada di aturan library auth0.
- Ada object localStorage yang tidak diinisiasi di mana-mana. Ini sepertinya dari library. accessToken juga seperti ini.
- Di dalam component ini ada function-function getAccessToken, getProfile, login, logout, isAuthenticated yang sepertinya merupakan code boilerplate yang bisa ditemukan di documentation auth0.
- Yang perlu diperhatikan adalah bahwa di sini ada pemakaian library history.
- Ada juga method stringify dan parse JSON, dan juga ada pengaturan expiresAt yang kemungkinan besar mengatur sampai kapan akun kita dibiarkan aktif sebelum terlogout.
AUTHCHECK.JS
- Di sini dilakukan pengecekan authObj apakah sudah login atau belum. Sebelumnya authObj didapat dari memakai methot useContext.
- Bila authObj ter-authenticated, maka ada function-function yang mengikutinya, yaitu handleUserLogin, handleUserAddProfile, dan history.replace.
- history.replace ini mengubah route jadi laman home.
- Component AuthCheck dipanggil dari Auth, secara spesifik yaitu dari handleAuth-nya.
Perihal login, jadi login dimulai dari header.js, di mana di situ ada deklarasi tombol login. Tombol login akan mengaktifkan function login dari instantiasi authObj dari library auth0.
Login dimulai di header.js Ketika tombol login diklik, dia akan meninstansiasi authObj. authObj punya property salah satunya adalah lokasi callback. Website akan mengarahkan ke route /callback. Saat pengarahan route ke callback akan terpanggil pula function handleAuth yang dibawa lewat object Context. Nah, pemanggilan handleAuth ini dikumpulkan bersama authObj di context_state_config.js. Di situ mereka memanggil function handleAuthentication. Di handleAuthentication akan dipanggil function dari library auth0, yaitu auth.handleAuth. Ini beda dari function handleAuth dari route. auth.handleAuth akan menghasilkan token yang nantinya akan menghasilkan data profile dan function atau variable isAuthenticated. auth.handleAuth akan redirect ke route /authcheck. Di route /authcheck ini nilai isAuthenticated akan dicek untuk kemudian diputuskan untuk memanggil function-function yang sesuai, misalnya handleUserLogin, handleUserAddProfile, atau handleUserLogout. Nah, function handleUserLogin dan sebagainya itu kembali ke context_state_config.js untuk kemudian diteruskan nilainya ke component AuthReducer.
Di AuthReducer, data dari component Auth tadi akan disimpan ke dalam state di AuthReducer. State di dalam AuthReducer yang sudah dimodifikasi akan dipanggil lagi di context_state_config.js dalam bentuk authState.
Data di authState ini nantinya akan menentukan data apa yang akan ditampilkan di route /PrivateRoute.
Setelah selesai authentication, lebih spesifik setelah route authcheck, user akan dibawa lagi ke route home (“/”) dengan header yang memiliki link aktif ke PrivateRoute.
Kita asumsikan proses logoutnya sama hanya ke arah berlawanan ya.
CALLBACK.JS
- Callback ini adalah route yang dibuat untuk mengolah authentication. Jadinya ia dibiarkan kosong.
HEADER.JS
- Header adalah component yang menampilkan header.
- Di sini ada kumpulan link seperti misalnya HOme, Profile, Hooks Form, Hooks Container, Private Route.
- Selain itu ada tombol login atau logout yang muncul sesuai kondisi authentication.
HOME.JS
- Home dibiarkan kosong.
HOOKS1.JS
- Di dalam hooks1.js ada component HooksContainer1.
- HooksContainer1 me-return elemen html dari website.
- Di sini juga ada beberapa function increment dan dispatch.
- Di sini ada beberapa button yang bisa increment. Tapi fungsinya belum dikembangkan seara maksimal.
HOOKS_FORM1.JS
- Component ini berisi formulir.
- Bagian html form ditulis di bagian return component ini.
- Ada 3 form yang merepresentasikan method yang berbeda, yaitu useState, useContext, dan useReducer.
- Tiap form ada function handle masing-masing yang menangkap event dari html.
- Di awal code sudah ada statement use dengan dispatch dan set dilengkapi dengan initialValue.
- Nanti function handle akan menangkap event lalu dipakai untuk mengubah initialValue tiap method use.
- Data useState dari html dikirim ke function handleuseStateChange. Function ini mengubah initialState dari valueChange. Hal yang serupa terjadi di valueSubmit juga.
- Data useReducer dari html dikirim ke handleuseReducerChange. Di function ini ACIONS.user_input_change dipanggil lewat method dispatch. Sepertinya value berupa text dari html dimasukkan ke variable ini. Hal serupa terjadi dengan handleuseReducerSubmit. Cuma bedanya di parameter user_input_submit itu dimasukkan event.target.useReducer.value.
- Sepertinya bagian submit menaruh value dari input user ke Reducer atau State. Tanpa method use, data hanya disimpan di variable local untuk ditampilkan di HTML di bagian paragraf. Kalau sudah di-submit, data akan disimpan di variable di Reducer, lalu setelah itu baru ditampilkan di paragraf bagian submit.
- Sedangkan untuk form useContext, dia tidak ada fungsi khusus di file ini, hanya ada instansiasi context. Hanya menaruh di variable context.useContextChange.
- Perihal data di method state, dia hanya disimpan di variable local, yaitu di hooks_form1.js. Dia tidak diteruskan ke context_state_config.js.
- Untuk useReducer, valuenya diteruskan ke context_state_config.js. Valuenya masuk ke FormReducer.
- Sebelum masuk ke function di Form Reducer, sepertinya value dari hooks_form1.js ini dimasukkan ke value di Context.Provider dulu, baru diteruskan ke FormReducer. Di situ ada variable yang menyimpan value dari hooks_form1.js. Value ini kemudian balik ditampilkan di hooks_form1.js.
- useContext tidak diolah di function di file yang sama melainkan diolah di context_state_config.js.
- useContext diolah di context_state_config.js lalu diteruskan di FormReducer. Bedanya dengan useReducer adalah bahwa variable di useContext ini terikat dengan Context. Ketika akan diambil untuk ditampilkan di HTML, di harus melalui context_state_config.js lagi. Kalau useReducer dia langsung ambil dari FormReducer.
- Apakah hasil tampilan dari value di useReducer akan sama dengan value dari useContext? Sepertinya beda karena useContext memakai variable tambahan, yaitu variable stateFormReducer untuk menyimpan value.
PRIVATECOMPONENT.JS
- Tadi sempat dibahas. Dia adalah componet buat user yang logged in. Saat ini dibiarkan kosong. URLnya disesuaikan dengan nama user.
PROFILE.JS
- Componentnya namanya RenderProfile. Dia pake props yang isinya bersambung dengan Context, yaitu context.authObj.userProfile.
- Property userProfile ini ditambahkan di component Auth. Ditambahkan ke context lewat function handleUserAddProfile dan handleAddProfile di context_state_config.js.
- Segala property dari object profile tersebut dijabarkan di RenderProfile.
HISTORY.JS
- File ini berisi pemakaian library history lalu pemanggilan method createCrowserHistory() yang sepertinya memunculkan data soal history browser.
ROUTES.JS
- Isinya daftar route.
- Component Routes ini dipakai di bagian return di context_state_config di akhir Context.Provider.
- Dia mendefinisikan component PrivateRoute. Di dalam deklarasi PrivateRoute terdapat pengaturan memakai keyword component yang kemungkinan berasal dari library.
- Di sini ada pemakaian component Router dengan property history. Router ini adalah component dari library package.
- Selanjutnya ada fungsi switch antara berbagai route, yaitu misalnya home, hooksform, profile, hookscontainer, authcheck, privateroute, profile, callback.
- Ada pemakaian keyword yang pasti dari library, tapi tidak diketahui library yang mana. Mungkin dari react-router.
APP.JS
- App.js berisi satu component, yaitu ContextState.
Comments