Extract APIs to independent JS file

apis.js

@@ -0,0 +1,44 @@
+const DB_HOST = 'http://localhost:8080';
+
+class Api {
+    // Products
+    async listProducts() {
+        return fetch(`${DB_HOST}/products`).then(res => res.json());
+    }
+    async getProductById(id) {
+        return fetch(`${DB_HOST}/products/${id}`).then(res => res.json());
+    }
+
+    // Cart
+    async listCart() {
+        return fetch(`${DB_HOST}/cart`).then(res => res.json());
+    }
+    async addProductToCart(name, color, capacity, quantity) {
+        return fetch(`${DB_HOST}/cart`, {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json'
+            },
+            body: JSON.stringify({ name, color, capacity, quantity }),
+        })
+    }
+    async updateProductInCart(id, name, color, capacity, quantity) {
+        return fetch(`${DB_HOST}/cart/${id}`, {
+            method: 'PUT',
+            headers: {
+                'content-type': 'application/json'
+            },
+            body: JSON.stringify({
+                name,
+                color,
+                capacity,
+                quantity,
+            })
+        })
+    }
+    async deleteProductFromCart(id) {
+        return fetch(`${DB_HOST}/cart/${id}`, {
+            method: 'DELETE'
+        });
+    }
+}

cart.html

@@ -36,28 +36,17 @@ <h1 class="mb-3 d-flex align-items-center">
         </table>
     </section>
     <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script src="./apis.js"></script>
     <script>
+        const api = new Api();
         const deleteCart = id => {
-            fetch(`http://localhost:8080/cart/${id}`, {
-                method: 'DELETE'
-            })
+            api.deleteProductFromCart(id);
         }
         const updateCart = (id, name, color, capacity) => {
             const newQuantity = Number(document.getElementById(`cart-${id}`).value)
-            fetch(`http://localhost:8080/cart/${id}`, {
-                method: 'PUT',
-                headers: {
-                    'content-type': 'application/json'
-                },
-                body: JSON.stringify({
-                    name,
-                    color,
-                    capacity,
-                    quantity: newQuantity
-                })
-            })
+            api.updateProductInCart(id, name, color, capacity, newQuantity);
         }
-        fetch(`http://localhost:8080/cart`).then(res => res.json()).then(cart => {
+        api.listCart().then(cart => {
             cart.forEach((cartProduct, idx) => {
                 document.getElementById('cart').insertAdjacentHTML('beforeend', `
                     <tr>

index.html

@@ -21,9 +21,11 @@ <h1 class="mb-3 d-flex align-items-center">
     </section>
     <section id="section-products" class="py-3 container">
     </section>
+    <script src="./apis.js"></script>
     <script>
+        const api = new Api();
         const $productsSection = document.querySelector('#section-products')
-        fetch('http://localhost:8080/products').then(res => res.json()).then(products => {
+        api.listProducts().then(products => {
             products.forEach(product => {
                 $productsSection.insertAdjacentHTML('beforeend', `
                 <a href="/product.html?id=${product.id}">

product.html

@@ -45,11 +45,12 @@ <h1 class="mb-3 d-flex align-items-center">
 
     </section>
     <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+    <script src="./apis.js"></script>
     <script>
+        const api = new Api();
         const searchParams = new URLSearchParams(window.location.search)
         const id = searchParams.get('id')
-        let selectedColor, selectedCapacity
-        fetch(`http://localhost:8080/products/${id}`).then(res => res.json()).then(product => {
+        api.getProductById(id).then(product => {
             document.getElementById('product-name').innerHTML = product.name
             const colors = _.uniq(product.variants.map(variant => variant.color))
             const capacitirs = _.uniq(product.variants.map(variant => variant.capacity))
@@ -72,13 +73,7 @@ <h1 class="mb-3 d-flex align-items-center">
             const color = document.querySelector('input[name="color"]:checked').value
             const capacity = document.querySelector('input[name="capacity"]:checked').value
             const quantity = Number(document.querySelector('input[name="quantity"]').value)
-            fetch('http://localhost:8080/cart', {
-                method: 'POST',
-                body: JSON.stringify({ name, color, capacity, quantity }),
-                headers: {
-                    'content-type': 'application/json'
-                }
-            })
+            api.addProductToCart(name, color, capacity, quantity);
         }
     </script>
 </body>