LidiaIvanova
commented
1 year ago Why is this code bad? What principles does it violate? What can the existence of such code lead to? 0,8
Open yFaizuS opened 1 year ago
LidiaIvanova
commented
1 year ago Why is this code bad? What principles does it violate? What can the existence of such code lead to? 0,8
item.js
```javascript for (let i = 1; i <= a.length; i++) { const a = $(`#star${i}`); a.on('click', () => { const rate = i; const data = {}; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ajaxRequest( `api/dish/${idParams}/rating?ratingScore=${i}`, 'POST', JSON.stringify(data), function (response) { alert("Berhasil Memberi Rate"); }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { alert("Berhasil Memberi Rate"); window.location.href = "order.html"; } else { alert("Gagal Memberi Rate"); } }, headers ); }); } ``` the code snippet above shows a code duplication during rating, it duplicates the AJAX request and its callback for each stars. We could refactor it by adding a function to the duplicated logic to avoid repeating the AJAX request and callback
Details
```javascript ... const getCart = () => { const data = ""; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ... const getPurchaseAjax = () => { const data = { deliveryTime: $("#date").val(), address: $("#address").val(), email: $("#email").val(), phoneNumber: $("#phoneNumber").val() } const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ``` the headers objects are defined 2 times. we could add an extra function to declare the header for example `getHeaders()`
cart.js
`getCartAjax()` function ```javascript const getCartAjax = () => { const data = ""; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ``` `addCart()` function ```javascript const addCart = (id) => { const data = ""; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; // Fungsi untuk menambahkan cart dengan endpoint POST pada halaman menu ajaxRequest( `api/basket/dish/${id}`, 'POST', JSON.stringify(data), function (response) { alert("Berhasil menambahkan ke cart") }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { getCartAjax() } else { alert("Gagal menambahkan ke cart") } }, headers ); } ``` `removeCart()` function ```javascript const removeCart = (id, bool) => { const data = ""; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; // Fungsi untuk menghapus cart dengan menggunakan endpoint DELETE ajaxRequest( `api/basket/dish/${id}?increase=${bool}`, 'DELETE', JSON.stringify(data), function (response) { getCartAjax() alert("asu") }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { getCartAjax() if (bool == false) { alert("berhasil mengahapus dari cart") } } else { alert("gagal mengahapus dari cart") } }, headers ); } ``` All three functions have the same header. it is better to add a function like `getHeaders()` for ease of use and not retyping the header configuration. The Ajax request configuration is duplicated in all the functions.