feat: Completed Work in Forkify App Second Section

Author: ralvarezdev

10-forkify/src/js/controller.js

@@ -2,10 +2,12 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import * as model from './model.js';
+import { getHash } from './helpers.js';
 import recipeView from './views/recipeView.js';
 import searchView from './views/searchView.js';
 import resultsView from './views/resultsView.js';
 import paginationView from './views/paginationView.js';
+import bookmarksView from './views/bookmarksView.js';
 
 // https://forkify-api.herokuapp.com/v2
 
@@ -15,14 +17,18 @@ const controlRecipe = async function ()
 {
   try
   {
-    // Get Hash
-    const id = window.location.hash.slice(1);
+    const id = getHash();
 
     if (!id) return;
 
     // Render Spinner while the Data is being Fetched
     recipeView.renderSpinner();
 
+    // Update Selected Recipe from Search Results
+    resultsView.update(model.getSearchResultsPage());
+    // Update Bookmarks
+    bookmarksView.update(model.state.bookmarks);
+
     // Fetching Data
     await model.loadRecipe(id);
     const { recipe } = model.state;
@@ -41,6 +47,9 @@ const controlSearchResults = async function ()
 {
   try
   {
+    // Render Spinner while the Search is being Fetched
+    resultsView.renderSpinner();
+
     // Get Search Query
     const query = searchView.getQuery();
 
@@ -51,7 +60,7 @@ const controlSearchResults = async function ()
     console.log(model.state.search);
 
     // Render Search Results
-    resultsView.render(model.getSearchResultsPage(1));
+    resultsView.render(model.getSearchResultsPage());
     // Render Initial Pagination Buttons
     paginationView.render(model.state.search);
   }
@@ -70,9 +79,45 @@ const controlPagination = function (goToPage)
   paginationView.render(model.state.search);
 };
 
+const controlServings = function (newServings)
+{
+  // Update Recipe Servings
+  model.updateServings(newServings);
+
+  // Update Recipe
+  recipeView.update(model.state.recipe);
+};
+
+const controlBookmark = function ()
+{
+  // Add/Remove Bookmark
+  model.state.recipe.bookmarked ? model.delBookmark(model.state.recipe.id) : model.addBookmark(model.state.recipe);
+
+  // Update Recipe
+  console.log(model.state.recipe);
+  recipeView.update(model.state.recipe);
+
+  // Render Bookmarks
+  bookmarksView.render(model.state.bookmarks);
+};
+
+const controlInitBookmarks = function ()
+{
+  bookmarksView.render(model.state.bookmarks);
+};
+
+const clearBookmarks = function ()
+{
+  localStorage.clear('bookmarks');
+};
+// clearBookmarks()
+
 const init = function ()
 {
+  bookmarksView.addHandlerRender(controlInitBookmarks);
   recipeView.addHandlerRender(controlRecipe);
+  recipeView.addHandlerUpdateServings(controlServings);
+  recipeView.addHandlerBookmark(controlBookmark);
   searchView.addHandlerSearch(controlSearchResults);
   paginationView.addHandlerPagination(controlPagination);
 };

10-forkify/src/js/helpers.js

@@ -11,6 +11,13 @@ export const timeout = function (s)
   });
 };
 
+
+export const getHash = function ()
+{
+  // Get Hash ID
+  return window.location.hash.slice(1);
+};
+
 export const getJSON = async function (url)
 {
   try

10-forkify/src/js/model.js

@@ -4,12 +4,12 @@ import { API_URL, RESULTS_PER_PAGE } from './config';
 import { getJSON } from './helpers.js';
 
 export const state = {
+  bookmarks: [],
   recipe: {},
   search: {
     query: '',
     results: [],
     resultsPerPage: RESULTS_PER_PAGE,
-    page: 1
   }
 };
 
@@ -34,6 +34,9 @@ export const loadRecipe = async function (id)
       cookingTime: recipe.cooking_time,
       ingredients: recipe.ingredients
     };
+
+    state.recipe.bookmarked = state.bookmarks.some(bookmark => bookmark.id === id);
+
     console.log(state.recipe);
   }
   catch (err)
@@ -48,6 +51,7 @@ export const loadSearchResults = async function (query)
   try
   {
     const data = await getJSON(`${ API_URL }?search=${ query }`);
+    state.search.page = 1;
 
     state.search.query = query;
     state.search.results = data.data.recipes.map(recipe =>
@@ -75,4 +79,55 @@ export const getSearchResultsPage = function (page = state.search.page)
   const end = page * state.search.resultsPerPage;
 
   return state.search.results.slice(start, end);
-};
+};
+
+export const updateServings = function (newServings)
+{
+  const oldServings = state.recipe.servings;
+  state.recipe.ingredients.map(ing =>
+  {
+    ing.quantity = ing.quantity * newServings / oldServings;
+  });
+
+  state.recipe.servings = newServings;
+};
+
+const storeBookmarks = function ()
+{
+  localStorage.setItem('bookmarks', JSON.stringify(state.bookmarks));
+};
+
+export const addBookmark = function (recipe)
+{
+  // Add Bookmark
+  state.bookmarks.push(recipe);
+
+  // Mark Current Recipe as Bookmarked
+  if (recipe.id !== state.recipe.id) return;
+
+  state.recipe.bookmarked = true;
+  storeBookmarks();
+};
+
+export const delBookmark = function (id)
+{
+  // Delete Bookmark
+  const index = state.bookmarks.findIndex(bookmark => bookmark.id === id);
+  state.bookmarks.splice(index, 1);
+
+  // Mark Current Recipe as Not Bookmarked
+  if (id !== state.recipe.id) return;
+
+  state.recipe.bookmarked = false;
+  storeBookmarks();
+};
+
+const init = function ()
+{
+  const storage = localStorage.getItem('bookmarks');
+
+  if (!storage) return;
+
+  state.bookmarks = JSON.parse(storage);
+};
+init();

10-forkify/src/js/views/bookmarksView.js

@@ -0,0 +1,20 @@
+import PreviewView from "./previewView.js";
+
+class BookmarksView extends PreviewView
+{
+  _parentElement = document.querySelector('.bookmarks__list');
+  _errorMessage = 'No bookmarks yet, Find a nice bookmark and bookmark it';
+  _successMessage = '';
+
+  addHandlerRender (handler)
+  {
+    window.addEventListener('load', handler);
+  }
+
+  _generateMarkup ()
+  {
+    return this._data.map(preview => this._generateMarkupPreview(preview)).join('\n');
+  }
+}
+
+export default new BookmarksView();

10-forkify/src/js/views/previewView.js

@@ -0,0 +1,25 @@
+import View from "./view";
+
+import { getHash } from "../helpers";
+
+export default class PreviewView extends View
+{
+  _generateMarkupPreview (preview)
+  {
+    const id = getHash();
+
+    return `
+    <li class="preview">
+      <a class="preview__link ${ preview.id === id ? 'preview__link--active' : '' }" href="#${ preview.id }">
+        <figure class="preview__fig">
+          <img src="${ preview.image }" alt="${ preview.title }" />
+        </figure>
+        <div class="preview__data">
+          <h4 class="preview__title">${ preview.title }</h4>
+          <p class="preview__publisher">${ preview.publisher }</p>
+        </div>
+      </a>
+    </li>
+    `;
+  }
+}

10-forkify/src/js/views/recipeView.js

@@ -15,6 +15,31 @@ class RecipeView extends View
     ['hashchange', 'load'].forEach(eventName => window.addEventListener(eventName, handler));
   }
 
+  addHandlerUpdateServings (handler)
+  {
+    this._parentElement.addEventListener('click', event =>
+    {
+      const btn = event.target.closest('.btn--update-servings');
+
+      if (!btn) return;
+
+      const updateTo = +btn.dataset.update;
+      if (updateTo > 0) handler(updateTo);
+    });
+  }
+
+  addHandlerBookmark (handler)
+  {
+    this._parentElement.addEventListener('click', event =>
+    {
+      const btn = event.target.closest('.btn--bookmark');
+
+      if (!btn) return;
+
+      handler();
+    });
+  }
+
   _generateMarkupIngredient (ing)
   {
     return `
@@ -57,12 +82,12 @@ class RecipeView extends View
         <span class="recipe__info-text">servings</span>
 
         <div class="recipe__info-buttons">
-          <button class="btn--tiny btn--increase-servings">
+          <button data-update="${ this._data.servings - 1 }" class="btn--tiny btn--update-servings">
             <svg>
               <use href="${ icons }#icon-minus-circle"></use>
             </svg>
           </button>
-          <button class="btn--tiny btn--increase-servings">
+          <button data-update="${ this._data.servings + 1 }" class="btn--tiny btn--update-servings">
             <svg>
               <use href="${ icons }#icon-plus-circle"></use>
             </svg>
@@ -72,9 +97,9 @@ class RecipeView extends View
 
       <div class="recipe__user-generated">
       </div>
-      <button class="btn--round">
+      <button class="btn--round btn--bookmark">
         <svg class="">
-          <use href="${ icons }#icon-bookmark-fill"></use>
+          <use href="${ icons }#icon-bookmark${ this._data.bookmarked ? '-fill' : '' }"></use>
         </svg>
       </button>
     </div>

10-forkify/src/js/views/resultsView.js

@@ -1,8 +1,8 @@
-import View from './view';
+import PreviewView from './previewView.js';
 
 import icons from 'url:../../img/icons.svg';
 
-class ResultsView extends View
+class ResultsView extends PreviewView
 {
   _parentElement = document.querySelector('.results');
   _errorMessage = 'No recipes found that matched your query';
@@ -12,23 +12,6 @@ class ResultsView extends View
   {
     return this._data.map(preview => this._generateMarkupPreview(preview)).join('\n');
   }
-
-  _generateMarkupPreview (preview)
-  {
-    return `
-    <li class="preview">
-      <a class="preview__link" href="#${ preview.id }">
-        <figure class="preview__fig">
-          <img src="${ preview.image }" alt="Test" />
-        </figure>
-        <div class="preview__data">
-          <h4 class="preview__title">${ preview.title }</h4>
-          <p class="preview__publisher">${ preview.publisher }</p>
-        </div>
-      </a>
-    </li>
-    `;
-  }
 }
 
 export default new ResultsView();

10-forkify/src/js/views/view.js

@@ -10,10 +10,39 @@ export default class View
 
     this._data = data;
     const markup = this._generateMarkup();
+
     this._clear();
     this._parentElement.insertAdjacentHTML('afterbegin', markup);
   }
 
+  update (data)
+  {
+    // if (!data || (Array.isArray(data) && data.length === 0)) return this.renderError();
+
+    this._data = data;
+    const newMarkup = this._generateMarkup();
+
+    const newDOM = document.createRange().createContextualFragment(newMarkup);
+    const newElements = Array.from(newDOM.querySelectorAll('*'));
+    const currElements = Array.from(this._parentElement.querySelectorAll('*'));
+
+    newElements.forEach((newEl, i) =>
+    {
+      const currEl = currElements.at(i);
+
+      // Checks if Nodes are Different from Each Other
+      if (newEl.isEqualNode(currEl)) return;
+
+      // Checks if it's First Child is Text
+      if (newEl.firstChild?.nodeValue.trim() !== '')
+        // Update Changed Text
+        currEl.textContent = newEl.textContent;
+
+      // Update Node Attributes
+      Array.from(newEl.attributes).forEach(atr => currEl.setAttribute(atr.name, atr.value));
+    });
+  }
+
   _clear ()
   {
     this._parentElement.innerHTML = '';