Merge pull request #88 from akhilome/gh-pages

Update Frontend to consume delete /menu/:id endpoint
akhilome · Oct 19, 2018 · 53fc895 · 53fc895
2 parents 688af54 + f44d795
commit 53fc895
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 40 deletions.
diff --git a/ui/admin-menu.html b/ui/admin-menu.html
@@ -28,44 +28,7 @@ <h2><a href="index.html">Kiakia Food</a></h2>
   <div class="wrapper">
     <h2>Your Offerings</h2>
     <section class="container admin-menu">
-      <div class="food-card">
-        <img class="food-image" src="https://i.imgur.com/Bfn1CxC.jpg" alt="Turkey Wings">
-        <div class="food-details">
-          <div data-foodid="2" class="food-details__legend">
-            <h4>Turkey Wings</h4>
-            <p>₦1,000</p>
-          </div>
-          <div class="food-details__action">
-            <button>delete</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="food-card">
-        <img class="food-image" src="https://i.imgur.com/z490cis.jpg" alt="Chicken Wings">
-        <div class="food-details">
-          <div data-foodid="3" class="food-details__legend">
-            <h4>Chicken Wings</h4>
-            <p>₦1,200</p>
-          </div>
-          <div class="food-details__action">
-            <button>delete</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="food-card">
-        <img class="food-image" src="https://i.imgur.com/mTHYwlc.jpg" alt="Tasty Prawns">
-        <div class="food-details">
-          <div data-foodid="4" class="food-details__legend">
-            <h4>Tasty Prawns</h4>
-            <p>₦2,200</p>
-          </div>
-          <div class="food-details__action">
-            <button>delete</button>
-          </div>
-        </div>
-      </div>
+      <div>Loading menu ...</div>
     </section>
     <a href="add-food.html"><button class="btn-primary">Add New Item</button></a>
   </div>
@@ -80,5 +43,7 @@ <h4>Tasty Prawns</h4>
   </footer>
 
   <script src="assets/main.js"></script>
+  <script src="assets/js/menu.js"></script>
+  <script src="assets/js/deleteFood.js"></script>
 </body>
 </html>
diff --git a/ui/assets/js/deleteFood.js b/ui/assets/js/deleteFood.js
@@ -0,0 +1,26 @@
+function deleteFoodItem(e) {
+  if (!e.target.matches('.food-details__action > button')) return;
+  flashMessage('deleting selected item ...');
+
+  const foodCard = e.target.parentNode.parentNode.parentNode;
+  const foodId = Number(e.target.parentNode.previousElementSibling.dataset.foodid);
+
+  fetch(`https://kiakiafood.herokuapp.com/api/v1/menu/${foodId}`, {
+    method: 'DELETE',
+    headers: { 'x-auth': token },
+  }).then(data => data.json())
+    .then((response) => {
+      if (response.status !== 'success') {
+        flashMessage(response.message, 'error');
+        return;
+      }
+      foodCard.remove();
+      flashMessage('food item removed', 'success');
+    })
+    .catch((error) => {
+      console.error(error);
+      flashMessage('an error occured while removing that food item', 'error');
+    });
+}
+
+document.querySelector('.admin-menu').addEventListener('click', deleteFoodItem);
diff --git a/ui/assets/js/menu.js b/ui/assets/js/menu.js
@@ -1,3 +1,13 @@
+// Confirm which user is accessing the page
+let isAdmin;
+try {
+  const authToken = localStorage.getItem('kiakiafoodToken');
+  const { userStatus } = (jwt_decode(authToken));
+  isAdmin = userStatus === 'admin';
+} catch (error) {
+  console.error(error.message);
+}
+
 function foodCardBlueprint(id, foodName, foodImage, foodPrice) {
   return `
   <div class="food-card">
@@ -8,7 +18,7 @@ function foodCardBlueprint(id, foodName, foodImage, foodPrice) {
         <p>₦${foodPrice.toLocaleString()}</p>
       </div>
       <div class="food-details__action">
-        <button>buy</button>
+        <button>${isAdmin ? 'delete' : 'buy'}</button>
       </div>
     </div>
   </div>
@@ -24,7 +34,7 @@ fetch(source)
       .map(food => foodCardBlueprint(food.id, food.food_name, food.food_image, food.price))
       .join('');
 
-    document.querySelector('section.food-menu').innerHTML = foodItems;
+    document.querySelector('.container').innerHTML = foodItems;
   })
   .catch((error) => {
     document.querySelector('section.food-menu').innerHTML = '';