MENAMPILKAN CATATAN HAPI FRAMEWORK

 Menampilkan Catatan

Kita beranjak ke kriteria kedua, yakni menampilkan seluruh atau secara spesifik catatan yang disimpan pada server. Sepertinya kriteria ini akan lebih mudah dari kriteria sebelumnya. Kalau begitu kita langsung saja yah.

1. Pertama, kita buat konfigurasi route terlebih dahulu pada berkas routes.js. Tetapkan path dengan nilai ‘/notes’ dan method dengan nilai ‘GET’. Untuk handler, kita berikan dulu fungsi kosong.
   

   const routes = [
     {
       method: 'POST',
       path: '/notes',
       handler: addNoteHandler,
     },
     {
       method: 'GET',
       path: '/notes',
       handler: () => {},
     },
   ];

   
   
   
2. Lanjut kita buat fungsi handler-nya pada berkas handler.js. Buat fungsi dengan nama getAllNotesHandler dan kembalikan data dengan nilai notes di dalamnya.
   

   const getAllNotesHandler = () => ({
     status: 'success',
     data: {
       notes,
     },
   });

   Yap! Semudah itu untuk handler mendapatkan seluruh catatan. Anda juga tidak perlu menuliskan parameter request dan h karena ia tidak digunakan.
   
   
3. Jangan lupa untuk ekspor nilai getAllNotesHandler agar dapat digunakan di routes.js
   

   const getAllNotesHandler = () => ({
     status: 'success',
     data: {
       notes,
     },
   });
    
   module.exports = { addNoteHandler, getAllNotesHandler };

   
   
   
4. Kembali ke berkas routes.js. Gunakan fungsi handler tersebut pada konfigurasi route.
   

    {
       method: 'GET',
       path: '/notes',
       handler: getAllNotesHandler,
    },

   
   
   
5. Jangan lupa untuk mengimpornya yah.
   

   const { addNoteHandler, getAllNotesHandler } = require('./handler');

   
   
   
6. Simpan seluruh perubahan yang ada, dan coba kembali buka aplikasi client.
   
   
   
   
   source image: https://dicoding.com
   
   
7. Wah ada pesan baru. “Please try to add some note(s)”. Sepertinya ini akan berhasil, silakan coba masukan note baru.
   
   Voila! Akhirnya catatan yang kita masukkan tampak yah.
   
   
   
   source image: https://dicoding.com
   
   
8. Coba masuk ke halaman detail dengan memilih catatan tersebut. 
   
   
   
   source image: https://dicoding.com
   
   

   Yah, error lagi. Tentu, karena kita belum membuat route untuk mendapatkan catatan secara spesifik. Ayo kita selesaikan.
   
   
9. Kembali ke berkas routes.js, kemudian tambahkan route dengan path ‘/notes/{id}’ dan method ‘GET’. Untuk handler isi dengan fungsi kosong dulu.
   

   const routes = [
     {
       method: 'POST',
       path: '/notes',
       handler: addNoteHandler,
     },
     {
       method: 'GET',
       path: '/notes',
       handler: getAllNotesHandler,
     },
     {
       method: 'GET',
       path: '/notes/{id}',
       handler: () => {},
     },
   ];

   
   
   
10. Lanjut kita buat fungsi handler-nya. Buka berkas handler.js, lalu buat fungsi dengan nama getNoteByIdHandler.
    

    const getNoteByIdHandler = (request, h) => {
      
    };

    
    Di dalam fungsi ini kita harus mengembalikan objek catatan secara spesifik berdasarkan id yang digunakan oleh path parameter.
    
    
11. Pertama, kita dapatkan dulu nilai id dari request.params.
    

    const getNoteByIdHandler = (request, h) => {
      const { id } = request.params;
    };

    
    
12. Setelah mendapatkan nilai id, dapatkan objek note dengan id tersebut dari objek array notes. Manfaatkan method array filter() untuk mendapatkan objeknya.
    

    const getNoteByIdHandler = (request, h) => {
      const { id } = request.params;
     
      const note = notes.filter((n) => n.id === id)[0];
    };

    
    
13. Kita kembalikan fungsi handler dengan data beserta objek note di dalamnya. Namun sebelum itu, pastikan dulu objek note tidak bernilai undefined. Bila undefined, kembalikan dengan respons gagal.
    

    const getNoteByIdHandler = (request, h) => {
      const { id } = request.params;
     
      const note = notes.filter((n) => n.id === id)[0];
     
    if (note !== undefined) {
        return {
          status: 'success',
          data: {
            note,
          },
        };
      }
     
      const response = h.response({
        status: 'fail',
        message: 'Catatan tidak ditemukan',
      });
      response.code(404);
      return response;
    };

    
    
    
14. Fungsi handler selesai! Jangan lupa ekspor fungsinya.
    

    const getNoteByIdHandler = (request, h) => {
      const { id } = request.params;
     
      const note = notes.filter((n) => n.id === id)[0];
     
      if (note !== undefined) {
        return {
          status: 'success',
          data: {
            note,
          },
        };
      }
     
      const response = h.response({
        status: 'fail',
        message: 'Catatan tidak ditemukan',
      });
      response.code(404);
      return response;
    };
     
    module.exports = { addNoteHandler, getAllNotesHandler, getNoteByIdHandler };

    
    
    
15. Lanjut gunakan fungsi tersebut pada konfigurasi route di berkas routes.js.
    

    {
      method: 'GET',
      path: '/notes/{id}',
      handler: getNoteByIdHandler,
    },

    
    
    
16. Jangan lupa untuk impor juga yah.
    

    const { addNoteHandler, getAllNotesHandler, getNoteByIdHandler } = require('./handler');

    
    
    
17. Simpan seluruh perubahan yang ada dan coba kembali aplikasi client-nya.
    Dalam mencobanya, mungkin Anda perlu menambahkan kembali notes karena kita hanya menyimpannya di array. Di mana data tersebut akan hilang setiap kali server dijalankan ulang oleh nodemon.
    
    
    
    source image: https://dicoding.com
    
    

    Well done! Sekarang aplikasi sudah bisa menampilkan detail catatan. Di mana di halaman ini ada tombol "Edit Note". Bila menekan tombol tersebut, kita akan diarahkan ke halaman edit note. Tapi halaman tersebut masih belum berfungsi. Nah, pada materi selanjutnya kita akan buat halaman tersebut berfungsi yah.