Add files via upload

Author: daveodipo

View.js

@@ -0,0 +1,65 @@
+import icons from 'url:../../img/icons.svg';
+
+export default class View {
+  // we won't create any instance of this view
+  // we'll only use it as a parent class of the other child views
+  _data;
+
+  render(data) {
+    if (!data || (Array.isArray(data) && data.length === 0))
+      return this.renderError();
+
+    //this is part of the public API
+    this._data = data;
+    const markup = this._generateMarkup();// every view that renders something to the UI needs this method
+    this._clear();
+    this._parentElement.insertAdjacentHTML('afterbegin', markup);
+  }
+  // the two properties and the render method are something that all the views will have in common
+  _clear() {
+    // this method will be available for all views with #parentElement
+    this._parentElement.innerHTML = ''; //get rid of existing content
+  }
+
+  renderSpinner() {
+    //  this will be a public method that the controller can call as it starts fetching data
+    const markup = `
+        <div class="spinner">
+                <svg>
+                  <use href="${icons}#icon-loader"></use>
+                </svg>
+              </div>
+              `;
+    this._clear();
+    this._parentElement.insertAdjacentHTML('afterbegin', markup);
+  }
+  renderError(message = this._errorMessage) {
+    const markup = `
+        <div class="error">
+            <div>
+              <svg>
+                <use href="${icons}#icon-alert-triangle"></use>
+              </svg>
+            </div>
+            <p>${message}</p>
+        </div>`;
+
+    this._clear();
+    this._parentElement.insertAdjacentHTML('afterbegin', markup);
+  }
+  // implement a method for success messages; we don't need it yet
+  renderMessage(message = this._message) {
+    const markup = `
+        <div class="message">
+            <div>
+              <svg>
+                <use href="${icons}#icon-smile"></use>
+              </svg>
+            </div>
+            <p>${message}</p>
+        </div>`;
+
+    this._clear();
+    this._parentElement.insertAdjacentHTML('afterbegin', markup);
+  }
+}

config.js

@@ -0,0 +1,6 @@
+// here we'll put all the variables that should be constants and reused across the project
+// this will allow us to easily configure our project by simply changing some of the data in this file
+// we'll only put variables that are important for defining some important data about the application e.g., API url when getting search data and when uploading a recipe to the server
+export const API_URL = 'https://forkify-api.herokuapp.com/api/v2/recipes/';// uppercase as this is a constant that will esssentially never change
+export const TIMEOUT_SEC = 10;
+export const RES_PER_PAGE = 10;

controller.js

@@ -0,0 +1,106 @@
+import * as model from './model.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';
+
+// to make sure our app is supported by old browsers:
+import 'core-js/stable'; // polyfill everything else
+import 'regenerator-runtime/runtime'; //polyfill async await
+// import recipeView from './views/recipeView.js';
+
+// if (module.hot) {
+//   module.hot.accept();
+// }
+
+const controlRecipes = async function () {
+  try {
+    // id
+    const id = window.location.hash.slice();
+
+    // guard clause
+    if (!id) return;
+    // listen for the event of the entire page loading
+    // render spinner
+    recipeView.renderSpinner(); //you can do this with all other views
+
+    // load recipe
+    await model.loadRecipe(id); //1. we receive data here
+    //  loadRecipe is an async function and will return a promise; we thus have to await that promise before we can move on to execution
+    // this is an example of one async function calling another async function
+    // const recipe = model.state.recipe
+
+    // console.log(recipe);
+    // 2) Rendering recipe
+    recipeView.render(model.state.recipe); // 2. we render data here
+    // 'render' is a very common name for render e.g., in React
+    // const recipeView = new recipeView(model.state.recipe)// also possible
+    // render method will accept the data from recipe and store it in recipeView object
+
+    // TEST
+    controlServings()
+  } catch (err) {
+    recipeView.renderError();
+  }
+};
+
+const controlSearchResulsts = async () => {
+  try {
+    resultsView.renderSpinner();
+    console.log(resultsView);
+    // 1) Get search query
+    const query = searchView.getQuery();
+    if (!query) return;
+
+    // 2) Load search results
+    await model.loadSearchResults(query);
+
+    // 3) Render results
+    // resultsView.render(model.state.search.results)
+    resultsView.render(model.getSearchResultsPage());
+
+    // 4) Render initial pagination buttons
+    paginationView.render(model.state.search); // pass in the whole object
+    // console.log(model.getSearchResultsPage(1));
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+// Publisher-subscriber pattern in practice
+// init function is called when the program starts which immediately calls the addHandlerRender function from the view
+// this is possible because the controller does in fact import both the view and the model
+// as we call addHandlerRender, we pass in controlRecipes as an argument
+// essentially, we subscribe controlRecipes to addHandlerRender
+// at this point, the two functions are essentially finally connected
+// addHandlerRender thus listens for events (addEventListener), and uses controlRecipes as a callback
+// as soon as the publisher publishes an event, the subscriber will get called
+// this will allow keeping the handler in the controller and the listener in the view
+
+// analyze controlSearchResulsts and controlPagination; they're quite similar and inter-twined
+
+const controlPagination = goToPage => {
+  // 1) Render new results
+    // resultsView.render(model.state.search.results)
+    resultsView.render(model.getSearchResultsPage(goToPage));
+    //this works because render will overwrite the markup that was there previously; because of the clear() method
+
+    // 2) Render new pagination buttons
+    paginationView.render(model.state.search);
+};
+
+const controlServings = () => {
+  // update the recipe servings (in state)
+  model.updateServings(8)
+  // update the recipe view; we'll simply re-render the recipe instead of manually changing the quantitity elements
+  recipeView.render(model.state.recipe);
+}
+
+const init = () => {
+  recipeView.addHandlerRender(controlRecipes);
+  
+  // the event is listened for in addHandlerRender but handled here
+  searchView.addHandlerSearch(controlSearchResulsts);
+  paginationView.addHandlerclick(controlPagination);
+};
+init();

helpers.js

@@ -0,0 +1,26 @@
+// this will contain functions that we reuse over and over again in our project
+import { TIMEOUT_SEC } from "./config";
+
+const timeout = function (s) {
+  return new Promise(function (_, reject) {
+    setTimeout(function () {
+      reject(new Error(`Request took too long! Timeout after ${s} second`));
+    }, s * 1000);
+  });
+};
+
+export const getJSON = async url => {
+  try {// will do fetching and converting to JSON all in one step
+  const res = await Promise.race([fetch(url), timeout(TIMEOUT_SEC)]);// there'll be a race between this fetch function and the timeout function
+  // as soon as a promise in the race rejects or fulfills, that promise becomes the winner
+  const data = await res.json(); // json returns another promise which we would have to await again
+
+  if (!res.ok) throw new Error(`${data.message} (${res.status})`);
+  return data;//data will be the resolved value of the promise that getJSON returns
+  } catch(err) {
+    // rethrow the error to catch it somewhere else
+    throw err;
+    // now the promise that's being returned from getJSON will reject
+    // we've propagated the error down from one async function to the other by rethrowing the error 
+  }
+};