From 7a6399637672a42b7db1c6bad0a8ef6dd803f162 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 17 Aug 2023 11:42:17 +0700 Subject: [PATCH] Finish Project --- index.html | 12 +++--- src/js/config.js | 2 + src/js/controller.js | 32 +++++++++++++-- src/js/helpers.js | 14 ++++++- src/js/model.js | 74 ++++++++++++++++++++++++++--------- src/js/views/View.js | 16 ++++++++ src/js/views/addRecipeView.js | 1 + src/js/views/previewView.js | 9 ++++- src/js/views/recipeView.js | 5 ++- 9 files changed, 135 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index d10becb..b8b46a1 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,9 @@
- +

Recipe data

- + - + - + - + diff --git a/src/js/config.js b/src/js/config.js index 2f8e4c6..ee4c693 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -1,3 +1,5 @@ export const API_URL = 'https://forkify-api.herokuapp.com/api/v2/recipes'; export const TIMEOUT_SEC = 10; export const RES_PER_PAGE = 10; +export const API_KEY = 'aa3a2565-6eea-42a4-bf0a-cb0077fce6cc'; +export const MODAL_CLOSE_SEC = 2.5; diff --git a/src/js/controller.js b/src/js/controller.js index 890d3e2..3e3c7ee 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -1,4 +1,5 @@ import * as model from './model.js'; +import { MODAL_CLOSE_SEC } from './config.js'; import recipeView from './views/recipeView.js'; import searchView from './views/searchView.js'; import resultsView from './views/resultsView.js'; @@ -90,10 +91,35 @@ const controlBookmarks = function () { bookmarksView.render(model.state.bookmarks); }; -const controlAddRecipe = function (newRecipe) { - console.log(newRecipe); +const controlAddRecipe = async function (newRecipe) { + try { + // Show loading spinner + addRecipeView.renderSpinner(); - // Upload the new recipe data + // Upload the new recipe data + await model.uploadRecipe(newRecipe); + console.log(model.state.recipe); + + // Render recipe + recipeView.render(model.state.recipe); + + // Success message + addRecipeView.renderMessage(); + + // Render bookmark view + bookmarksView.render(model.state.bookmarks); + + // Change ID in URL + window.history.pushState(null, '', `#${model.state.recipe.id}`); + + // Close form window + setTimeout(function () { + addRecipeView.toogleWindow(); + }, MODAL_CLOSE_SEC * 1000); + } catch (err) { + console.error('💥', err); + addRecipeView.renderError(err.message); + } }; const init = function () { diff --git a/src/js/helpers.js b/src/js/helpers.js index 15e7232..455c435 100644 --- a/src/js/helpers.js +++ b/src/js/helpers.js @@ -9,9 +9,19 @@ const timeout = function (s) { }); }; -export const getJSON = async function (url) { +export const AJAX = async function (url, uploadData = undefined) { try { - const res = await Promise.race([fetch(url), timeout(TIMEOUT_SEC)]); + const fetchPro = uploadData + ? fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(uploadData), + }) + : fetch(url); + + const res = await Promise.race([fetchPro, timeout(TIMEOUT_SEC)]); const data = await res.json(); if (!res.ok) throw new Error(`${data.message} (${res.status})`); diff --git a/src/js/model.js b/src/js/model.js index 187b588..391617b 100644 --- a/src/js/model.js +++ b/src/js/model.js @@ -1,6 +1,6 @@ import { async } from 'regenerator-runtime'; -import { API_URL, RES_PER_PAGE } from './config'; -import { getJSON } from './helpers'; +import { API_URL, RES_PER_PAGE, API_KEY } from './config'; +import { AJAX } from './helpers'; export const state = { recipe: {}, @@ -13,22 +13,25 @@ export const state = { bookmarks: [], }; +const createRecipeObject = function (data) { + const { recipe } = data.data; + return { + id: recipe.id, + title: recipe.title, + publisher: recipe.publisher, + sourceUrl: recipe.source_url, + image: recipe.image_url, + servings: recipe.servings, + cookingTime: recipe.cooking_time, + ingredients: recipe.ingredients, + ...(recipe.key && { key: recipe.key }), + }; +}; + export const loadRecipe = async function (id) { try { - const data = await getJSON(`${API_URL}/${id}`); - - const { recipe } = data.data; - - state.recipe = { - id: recipe.id, - title: recipe.title, - publisher: recipe.publisher, - sourceUrl: recipe.source_url, - image: recipe.image_url, - servings: recipe.servings, - cookingTime: recipe.cooking_time, - ingredients: recipe.ingredients, - }; + const data = await AJAX(`${API_URL}/${id}?key=${API_KEY}`); + state.recipe = createRecipeObject(data); if (state.bookmarks.some(bookmark => bookmark.id === id)) state.recipe.bookmarked = true; @@ -42,7 +45,7 @@ export const loadSearchResults = async function (query) { try { state.search.query = query; - const data = await getJSON(`${API_URL}?search=${query}`); + const data = await AJAX(`${API_URL}?search=${query}&key=${API_KEY}`); state.search.results = data.data.recipes.map(rec => { return { @@ -50,6 +53,7 @@ export const loadSearchResults = async function (query) { title: rec.title, publisher: rec.publisher, image: rec.image_url, + ...(rec.key && { key: rec.key }), }; }); state.search.page = 1; @@ -107,4 +111,38 @@ const init = function () { }; init(); -console.log(state.bookmarks); + +export const uploadRecipe = async function (newRecipe) { + try { + const ingredients = Object.entries(newRecipe) + .filter(entry => entry[0].startsWith('ingredient') && entry[1] !== '') + .map(ing => { + const ingArr = ing[1].split(',').map(el => el.trim()); + if (ingArr.length !== 3) + throw new Error( + 'Wrong ingredient format! Please use the correct format!' + ); + + const [quantity, unit, description] = ingArr; + + return { quantity: quantity ? +quantity : null, unit, description }; + }); + + const recipe = { + title: newRecipe.title, + source_url: newRecipe.sourceUrl, + image_url: newRecipe.image, + publisher: newRecipe.publisher, + cooking_time: +newRecipe.cookingTime, + servings: +newRecipe.servings, + ingredients, + }; + + console.log(recipe); + const data = await AJAX(`${API_URL}?key=${API_KEY}`, recipe); + state.recipe = createRecipeObject(data); + addBookmark(state.recipe); + } catch (err) { + throw err; + } +}; diff --git a/src/js/views/View.js b/src/js/views/View.js index ca34071..8535122 100644 --- a/src/js/views/View.js +++ b/src/js/views/View.js @@ -75,4 +75,20 @@ export default class View { this._clear(); this._parentElement.insertAdjacentHTML('afterbegin', markup); } + + renderMessage(message = this._message) { + const markup = ` +
+
+ + + +
+

${message}

+
+ `; + + this._clear(); + this._parentElement.insertAdjacentHTML('afterbegin', markup); + } } diff --git a/src/js/views/addRecipeView.js b/src/js/views/addRecipeView.js index 7d4cae5..bff5564 100644 --- a/src/js/views/addRecipeView.js +++ b/src/js/views/addRecipeView.js @@ -3,6 +3,7 @@ import icons from '../../img/icons.svg'; class AddRecipeView extends View { _parentElement = document.querySelector('.upload'); + _message = 'Recipe was successfully uploaded.'; _window = document.querySelector('.add-recipe-window'); _overlay = document.querySelector('.overlay'); diff --git a/src/js/views/previewView.js b/src/js/views/previewView.js index eddd9ec..c95e3ac 100644 --- a/src/js/views/previewView.js +++ b/src/js/views/previewView.js @@ -15,9 +15,16 @@ class PreviewView extends View {
${this._data.title}
-
+

${this._data.title}

${this._data.publisher}

+
+ + + +
diff --git a/src/js/views/recipeView.js b/src/js/views/recipeView.js index 35705a7..d68f5a4 100644 --- a/src/js/views/recipeView.js +++ b/src/js/views/recipeView.js @@ -76,7 +76,10 @@ class RecipeView extends View {
-
+
+ + +