shopping list added

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "fractional": "^1.0.0",
-    "git": "^0.1.5"
+    "git": "^0.1.5",
+    "uniqid": "^5.2.0"
   }
 }

src/js/index.js

@@ -1,7 +1,11 @@
 import Search from './models/Search';
 import Recipe from './models/Recipe';
+import List from './models/List';
+
 import * as searchView from './views/searchView';
 import * as recipeView from './views/recipeView';
+import * as listView from './views/listView';
+
 import { elements, renderLoader, clearLoader } from './views/base';
 
 /* Global state of the app
@@ -12,10 +16,13 @@ import { elements, renderLoader, clearLoader } from './views/base';
  */
 const state = {}
 
+
+//SEARCH CONTROLLER
 const controlSearch = async () => {
     //1) Get query from view
     const query = searchView.getInput(); //TODO
     console.log(query);
+
     if(query){
         //2) New search object and add to state
         state.search = new Search(query);
@@ -55,6 +62,8 @@ elements.searchResPages.addEventListener('click', e => {
     }
 });
 
+
+//RECIPE CONTROLLER
 const controlRecipe = async () => {
     // Get ID from url
     const id = window.location.hash.replace('#', '');
@@ -94,6 +103,38 @@ const controlRecipe = async () => {
 
 ['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe));
 
+//LIST CONTROLLER
+const controlList = () => {
+    // Create a new list IF there in none yet
+    if (!state.list) state.list = new List();
+
+    // Add each ingredient to the list and UI
+    state.recipe.ingredients.forEach(el => {
+        const item = state.list.addItem(el.count, el.unit, el.ingredient);
+        listView.renderItem(item);
+    });
+}
+
+// Handle delete and update list item events
+elements.shopping.addEventListener('click', e => {
+    const id = e.target.closest('.shopping__item').dataset.itemid;
+
+    // Handle the delete button
+    if (e.target.matches('.shopping__delete, .shopping__delete *')) {
+        // Delete from state
+        state.list.deleteItem(id);
+
+        // Delete from UI
+        listView.deleteItem(id);
+
+    // Handle the count update
+    } else if (e.target.matches('.shopping__count-value')) {
+        const val = parseFloat(e.target.value, 10);
+        state.list.updateCount(id, val);
+    }
+});
+
+
 // Handling recipe button clicks
 elements.recipe.addEventListener('click', e => {
     if (e.target.matches('.btn-decrease, .btn-decrease *')) {

src/js/models/List.js

@@ -0,0 +1,29 @@
+import uniqid from 'uniqid';
+
+export default class List {
+    constructor() {
+        this.items = [];
+    }
+
+    addItem(count, unit, ingredient) {
+        const item = {
+            id: uniqid(),
+            count,
+            unit,
+            ingredient
+        }
+        this.items.push(item);
+        return item;
+    }
+
+    deleteItem(id) {
+        const index = this.items.findIndex(el => el.id === id);
+        // [2,4,8] splice(1, 2) -> returns [4, 8], original array is [2]
+        // [2,4,8] slice(1, 2) -> returns 4, original array is [2,4,8]
+        this.items.splice(index, 1);
+    }
+
+    updateCount(id, newCount) {
+        this.items.find(el => el.id === id).count = newCount;
+    }
+}

src/js/views/listView.js

@@ -0,0 +1,24 @@
+import { elements } from './base';
+
+export const renderItem = item => {
+    const markup = `
+        <li class="shopping__item" data-itemid=${item.id}>
+            <div class="shopping__count">
+                <input type="number" value="${item.count}" step="${item.count}" class="shopping__count-value">
+                <p>${item.unit}</p>
+            </div>
+            <p class="shopping__description">${item.ingredient}</p>
+            <button class="shopping__delete btn-tiny">
+                <svg>
+                    <use href="img/icons.svg#icon-circle-with-cross"></use>
+                </svg>
+            </button>
+        </li>
+    `;
+    elements.shopping.insertAdjacentHTML('beforeend', markup);
+};
+
+export const deleteItem = id => {
+    const item = document.querySelector(`[data-itemid="${id}"]`);
+    if (item) item.parentElement.removeChild(item);
+};