Di Bagian 3(a) kami membuat permintaan GET untuk menanyakan API kami. Di sini, di Bagian 3(b), kita akan menanyakan data yang disimpan secara lokal di mesin kita dan menggunakan data tersebut untuk mengisi drop down. Untuk bagian ini kita akan mengedit backend kita menggunakan Express untuk mengatur rute dan middleware untuk melakukan tugas pada rute tersebut.
Sebelum kita memulai, kita perlu menyimpan beberapa data ke mesin lokal Anda. Di folder aset buat folder bernama data. Di folder data ini buat file bernama kategori.json. Dalam file ini, deklarasikan variabel bernama kategori dan tetapkan ke objek. Objek ini akan diisi dengan array string. Setiap string akan menjadi kategorinya sendiri. Anda dapat menyalin daftar kategori dari repo saya atau menggunakan milik Anda sendiri.
Sekarang, mari edit komponen kita di frontend. Dalam status SearchBar.jsx, deklarasikan kunci bernama “topCatArray” dan tetapkan ke array kosong. Di sinilah kami akan menyimpan serangkaian opsi kategori yang dapat dipilih pengguna.
Kemudian, deklarasikan fungsi yang disebut “getDropDown”. Fungsi ini akan melakukan permintaan GET ke jalur yang kita buat, dan menyimpan respons dari permintaan tersebut ke status.
Di getDropDown, gunakan aksio untuk mendeklarasikan permintaan GET. Berikan jalur sebagai parameter ke permintaan. Kami akan memberi nama jalurnya '/ kategori'. Kami nanti akan menyiapkan rute untuk jalur ini di file server kami.
Menggunakan janji mendeklarasikan variabel untuk menyimpan respons yang kita dapatkan dari permintaan kita. Kami akan memanggil variabel "topCatData". Kemudian, perbarui status dengan nilai variabel baru ini.
Karena kita ingin fungsi ini dijalankan segera setelah halaman dimuat (sehingga drop down akan langsung terisi), kita akan memanggil fungsi ini menggunakan fungsi “ComponentWillMount” di React.
Sekarang, mari buat rute untuk jalur ke '/ kategori' yang kita buat di permintaan GET “getDropDown” kita.
Dalam file server.js kami, deklarasikan rute yang, untuk saat ini, merespons dengan status 200. Anda selalu perlu merespons permintaan. Meskipun Anda tidak memiliki data untuk ditanggapi, Anda dapat merespons dengan status. Lihat di sini untuk semua kode status.
Selanjutnya, kita perlu membuat fungsi pengontrol untuk membantu kita mendapatkan data dari file kategori.json. Pengontrol adalah middleware (fungsi) yang melakukan tugas pada suatu rute. Dalam hal ini, tugasnya adalah mendapatkan data yang diminta (daftar kategori) dan mengembalikan data tersebut sebagai objek respons
Buat folder di folder Server bernama "Pengontrol". Di folder Controllers, buat file bernama “categoriesController.js”. Dalam file kategoriController.js, deklarasikan variabel bernama “categoriesController” yang ditugaskan ke objek kosong. Setiap pengontrol yang kita buat di file ini akan ditambahkan sebagai kunci ke objek kategoriController ini. Kami akan mengekspor seluruh objek ini.
Buat kunci bernama “getCategories”, tetapkan kunci ini ke fungsi panah dengan req, res, dan next sebagai parameter (masing-masing mewakili objek permintaan, objek respons, dan fungsi berikutnya).
Dalam fungsi ini, destrukturisasi objek kategori dari file kategori.json. Gunakan metode “fs.ReadFileSync” untuk mendapatkan data dari file tersebut. Pastikan untuk mengurai data dari file tersebut menggunakan metode JSON.parse.
Simpan objek respons kategori yang Anda dapatkan dari file kategori.json ke res.locals. Lalu, kembali lagi berikutnya. Anda juga dapat menambahkan kondisi untuk memunculkan kesalahan jika objek kategori kosong.
**Catatan: Res.locals adalah objek yang berisi variabel lokal respons yang tercakup dalam permintaan. Nilainya hanya tersedia selama siklus permintaan/respons tersebut.**
**Catatan: Mengembalikan data respons perpindahan berikutnya dari satu pengontrol ke pengontrol berikutnya (jika ada) dan kemudian kembali ke rute. Tanpa kembali lagi berikutnya, Anda tidak akan pernah meninggalkan fungsi pengontrol.**
Tambahkan pengontrol ke rute '/categories' di file server.js.
Setelah data dari file kategori.json disimpan ke res.locals, Anda dapat mengubah rute untuk merespons dengan data tersebut selain status.
Sekarang permintaan GET kita ke '/categories' di SearchBar.jsx dapat diselesaikan. Kami sekarang menanyakan data yang disimpan secara lokal di komputer kami!
Selanjutnya, kami akhirnya dapat merender hasil kueri kami ke halaman tersebut. Lihat Bagian 3(c) untuk menyelesaikan fungsi pencarian. Tapi pertama-tama, beri tepuk tangan pada diri Anda sendiri. Kamu hampir selesai!
