add lesson 6 solution

06_PATCH_and_DELETE_Requests/assets/db.json

@@ -3,7 +3,7 @@
     {
       "id": 1,
       "body": "some comment",
-      "likes": 8
+      "likes": 34
     }
   ]
 }

06_PATCH_and_DELETE_Requests/assets/slides.md

@@ -74,18 +74,21 @@ function renderComment(comment) {
   const likeBtn = document.createElement('button');
   likeBtn.textContent = `${comment.likes} like${comment.likes === 1 ? '' : 's'}`
   li.append(likeBtn);
-  likeBtn.addEventListener('click', (e) => addLike(comment));
+  likeBtn.addEventListener('click', (e) => {
+    addLike(comment)
+  });
   commentList.append(li);
 }
 
 function addLike(comment) {
-  // const currentCommentCount = parseInt(document.querySelector('li[data-comment-id="1"] button').textContent.split(' ')[0])
+  const btn = document.querySelector(`#comments li[data-comment-id="${comment.id}"] button`);
+  const currentCommentCount = parseInt(btn.textContent.split(' ')[0])
   fetch(`http://localhost:3000/comments/${comment.id}`, {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json"
     },
-    body: JSON.stringify({likes: comment.likes + 1})
+    body: JSON.stringify({likes: currentCommentCount + 1})
   })
     .then(res => res.json())
     .then(comment => {

06_PATCH_and_DELETE_Requests/db.json

@@ -4,15 +4,15 @@
       "id": 1,
       "location": "Seattle",
       "address": "333 st ne Seattle wa 99999",
-      "number": 9999999999,
+      "number": "9999999999",
       "name": "Easley's Technical Books",
       "hours": "Monday - Friday 9am - 6pm"
     },
     {
       "id": 2,
       "location": "New York",
       "address": "555 pl sw NY 10099",
-      "number": 1110009999,
+      "number": "1110009999",
       "name": "Coding Books and more!",
       "hours": "Monday - Friday 10am - 9pm"
     },
@@ -37,7 +37,7 @@
           "content": "Good book, but not great for new coders"
         }
       ],
-      "inventory": "15",
+      "inventory": 17,
       "imageUrl": "https://images-na.ssl-images-amazon.com/images/I/51IKycqTPUL._SX218_BO1,204,203,200_QL40_FMwebp_.jpg"
     },
     {
@@ -51,7 +51,7 @@
           "content": "good way to learn JQuery"
         }
       ],
-      "inventory": 2,
+      "inventory": 4,
       "imageUrl": "https://images-na.ssl-images-amazon.com/images/I/31SRWF+LkKL._SX398_BO1,204,203,200_.jpg"
     },
     {

06_PATCH_and_DELETE_Requests/src/index.js

@@ -52,6 +52,7 @@ function addSelectOptionForStore(store) {
 // appends the li to the ul#book-list in the DOM
 function renderBook(book) {
   const li = document.createElement('li');
+  li.dataset.bookId = book.id;
   li.className = 'list-li';
 
   const h3 = document.createElement('h3');
@@ -68,6 +69,36 @@ function renderBook(book) {
   inventoryInput.className = 'inventory-input';
   inventoryInput.value = book.inventory;
   inventoryInput.min = 0;
+
+  inventoryInput.addEventListener('change', (e) => {
+    console.log('new value', e.target.value);
+    // update the value of the book's inventory in the database:
+    fetch(`http://localhost:3000/books/${book.id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      }, 
+      body: JSON.stringify({ inventory: parseInt(e.target.value) })
+    })
+      .then(res => {
+        console.log('got a response');
+        if (res.ok) {
+          return res.json();
+        } else{ 
+          renderError(res.statusCode);
+        }
+      })
+      .then(updatedBook => {
+        if (updatedBook.inventory === 0) {
+          pStock.textContent = "Out of stock";
+        } else if (updatedBook.inventory < 3) {
+          pStock.textContent = "Only a few left!";
+        } else {
+          pStock.textContent = "In stock"
+        }
+      })
+      .catch(renderError)
+  })
 
   const pStock = document.createElement('p');
   pStock.className = "grey";
@@ -85,9 +116,25 @@ function renderBook(book) {
 
   const btn = document.createElement('button');
   btn.textContent = 'Delete';
+  // alternatively we can store data in the DOM
+  // btn.dataset.bookId = book.id;
 
   btn.addEventListener('click', (e) => {
-    li.remove();
+    fetch(`http://localhost:3000/books/${book.id}`, {
+      method: "DELETE"
+    })
+      .then(res => {
+        if (res.ok) { // pessimistic because we wait to know that the book was successfully deleted
+          li.remove(); // before removing it from the DOM
+        }
+      })
+
+    // optimistic version
+    // fetch(`http://localhost:3000/books/${book.id}`, {
+    //   method: "DELETE"
+    // })
+
+    // li.remove(); // don't wait for server before removing book from the DOM
   })
 
   li.append(h3, pAuthor, pPrice, inventoryInput, pStock, img, btn);
@@ -114,6 +161,7 @@ function renderError(error) {
 // New Function to populate the store form with a store's data to update 
 function populateStoreEditForm(store) {
   const form = document.querySelector('#store-form');
+  form.dataset.storeId = store.id;
   form.name.value = store.name;
   form.location.value = store.location;
   form.address.value = store.address;
@@ -237,7 +285,23 @@ storeForm.addEventListener('submit', (e) => {
   //   },
   if (storeEditMode) {
     // ✅ write code for updating the store here
-
+    fetch(`http://localhost:3000/stores/${e.target.dataset.storeId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(store)
+    })
+      .then(res => res.json())
+      .then(store => {
+        renderHeader(store);
+        renderFooter(store);
+        return getJSON('http://localhost:3000/stores') // update the selection options for all stores after we've updated this store
+      })
+       .then((stores) => {
+        // this populates a select tag with options so we can switch between stores on our web page
+        renderStoreSelectionOptions(stores);
+      })
     hideStoreForm()
   } else {
     postJSON("http://localhost:3000/stores", store)
@@ -262,7 +326,6 @@ editStoreBtn.addEventListener('click', (e) => {
 // Communicating with the Server
 ////////////////////////////////
 
-
 getJSON('http://localhost:3000/stores')
   .then((stores) => {
     // this populates a select tag with options so we can switch between stores on our web page