180 Forkify: Shopping List (Data) Model

- Added 7.7.12 named as "Building the Shopping List (Data) Model Using uniqid"

Author: Ch-sriram

Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/package-lock.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.8.3",
     "axios": "^0.19.2",
-    "fractional": "^1.0.0"
+    "fractional": "^1.0.0",
+    "uniqid": "^5.2.0"
   }
 }

Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/package.json

@@ -1,22 +1,28 @@
 /********************************************************************************************************************
  * What we'll learn:
  * ----------------
- * 1. Another way of implementing event delegation using matches() method.
+ * 1. How and why to create unique IDs using an external package called 'uniqid'.
+ * 2. Difference between Array.slice() and Array.splice() methods.
+ * 3. More use cases for Array.findIndex() and Array.find() methods.
+ * 
+ * We make a new model which is the List Model which handles the data for the Shopping List. Check out the List 
+ * Module at ./src/js/models/List.js. One thing to note is that we generate unique ID's for each item inside the List
+ * Module using a 3rd party API known as 'uniqid' which we install using npm by the command: 'npm i uniqid --save' in
+ * the project directory. And then we can import it inside the List Model Module. Note that we can import the package
+ * because it is not a dev dependency but it is a code dependency. Therefore, we can go ahead and import the code
+ * related to 'uniqid' package.
  * 
- * We will implement the functionality to change the ingredient quantities depending on the number of servings.
- * Therefore, we give the functionality of increasing/decreasing the number of servings for every recipe.
- * This functionality is given in the Recipe Model Module where we define a method called updateServings().
- * Again, we will be handling the button clicks in this file as index.js is the controller. We have to apply
- * event delegation for the .recipe class' element and catch the event at the element that has the .recipe class
- * applied to it. Right at the bottom of this file, we can see that the .recipe class' button click event is handled.
- * Consequently, we will update the UI using the updateServingsAndIngredients() method written in recipeView module.
  */
-
+// Import Data Models
 import Search from './models/Search';
 import Recipe from './models/Recipe';
+import List from './models/List';
+
+// Import Front-End Views
 import * as searchView from './views/searchView';
 import * as recipeView from './views/recipeView';
 
+// Import Common Code Base
 import { elements, renderLoader, clearLoader, elementStrings } from './views/base';    
 
 /**
@@ -168,4 +174,10 @@ elements.recipe.addEventListener('click', event => {
 
     recipeView.updateServingsAndIngredients(state.recipe);
     //console.log(state.recipe);  // TESTING
-});
+});
+
+
+// SHOPPING LIST CONTROLLER
+
+// TEST CODE
+window.l = new List();

Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/src/js/index.js

@@ -0,0 +1,63 @@
+import uniqid from 'uniqid';
+
+export default class List {
+    constructor() {
+    /** Array Version */
+        // this.items = [];
+        // Instead of using an array, we can simply use a Map
+
+    /** Map Version */
+        this.items = new Map();
+    }
+
+    addItem(count, unit, ingredient) {
+    /** Array Version */
+        // const item = {
+        //     id: uniqid(),
+        //     count, unit, ingredient
+        // };
+        // this.items.push(item);
+        // return item;
+
+    /** Map Version */
+        const id = uniqid();    
+        this.items.set(id, { count, unit, ingredient });
+        return this.items.get(id);
+    }
+
+    deleteItem(id) {
+        // we use the splice() method to delete the item from the this.items[]. 
+        // Syntax of splice(): Array.splice(starting_index, no_of_elements_to_delete) where the deletion in the 
+        // referenced Array begins from starting_index and the number of elements deleted from there onwards are 
+        // mentioned in no_of_elements_to_delete. 
+        // Ex: const list = [100, 200, 300, 400, 500, 600];
+        //     const list2 = list.splice(2, 3); // list2 is now [300, 400, 500] and list is [100, 200, 600]
+        // We can see that splice() cuts the referenced array and then mutates it, the mutated part is returned by
+        // the method as an array.
+
+        // Array.slice() works differently where the syntax is: Array.slice(start_index, last_index) where we return
+        // the array elements from start_index to last_index-1 and we don't mutate the referenced Array.
+        // Ex: const list = [100, 200, 300, 400, 500, 600];
+        //     const list2 = list.slice(2, 3);  // list2 is now [300] & list is still [100, 200, 300, 400, 500, 600]
+
+    /** Array Version */
+        // const index = this.items.findIndex(el => el.id === id);
+        // this.items.splice(index, 1);
+
+    /** Map Version */
+        if (this.items.has(id))
+            this.items.delete(id);
+    }
+
+    // Update the quantity of the ingredient in the Shopping List
+    updateCount(id, newCount) {
+    /** Array Version */
+        // this.items.find(el => el.id === id).count = newCount;
+
+    /** Map Version */
+        this.items.get(id).count = newCount;
+    }
+
+
+
+}