Skip to content

Commit

Permalink
✅ implementing bookmarks 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@shuvo18103107
shuvo18103107 committed Sep 9, 2021
1 parent 40c0c05 commit 45a516c
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 10 deletions.
47 changes: 42 additions & 5 deletions dist/index.436439df.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,9 +486,7 @@ const controlRecipes = async function() {
console.log(_recipeViewDefault.default);
//1.loading recipe
await _model.loadRecipe(id);
//as we call a async function that returns a promise so we have to await if we declare any async function
//2. rendering recipe
_recipeViewDefault.default.render(_model.state.recipe);
// console.log(model.state.bookMarks);
} catch (err) {
_recipeViewDefault.default.renderError();
// alert(err.message);
Expand Down Expand Up @@ -526,10 +524,18 @@ const controlServings = function(newServing) {
_recipeViewDefault.default.update(_model.state.recipe);
//update the view
};
const controlAddBookmarks = function() {
if (!_model.state.recipe.bookMarked) _model.adBookMark(_model.state.recipe);
else _model.deleteBookMark(_model.state.recipe.id);
// console.log(model.state.recipe);
// console.log(model.state);
_recipeViewDefault.default.update(_model.state.recipe);
};
//Event handlers technique in MVC using publisher subscriber design pattern
const init = function() {
_recipeViewDefault.default.adhandlerRender(controlRecipes);
_recipeViewDefault.default.adhandlerUpdateServings(controlServings);
_recipeViewDefault.default.addHandlerAddBookmark(controlAddBookmarks);
//ekhane call dile undefined hobe cg ekhono api theke data ase nai
// controlServings()
_searchViewDefault.default.adhandlerSearch(controlSearchResults);
Expand All @@ -550,6 +556,10 @@ parcelHelpers.export(exports, "getSearchResultPage", ()=>getSearchResultPage
);
parcelHelpers.export(exports, "updateServings", ()=>updateServings
);
parcelHelpers.export(exports, "adBookMark", ()=>adBookMark
);
parcelHelpers.export(exports, "deleteBookMark", ()=>deleteBookMark
);
var _regeneratorRuntime = require("regenerator-runtime");
var _config = require("./config");
var _helpers = require("./helpers");
Expand All @@ -561,7 +571,8 @@ const state = {
results: [],
page: 1,
resultPerPage: _config.RES_PER_PAGE
}
},
bookMarks: []
};
const loadRecipe = async function(id) {
try {
Expand All @@ -579,6 +590,10 @@ const loadRecipe = async function(id) {
cookingTime: recipe.cooking_time,
ingredients: recipe.ingredients
};
//click korar por load hole to bookmark thake na new object set hoi tai jate bookmark identify kora jai tai array te check diye true kore dibo
if (state.bookMarks.some((bookmark)=>bookmark.id === id
)) state.recipe.bookMarked = true;
else state.recipe.bookMarked = false;
console.log(state.recipe);
} catch (err) {
//Temp Error Handling
Expand All @@ -599,6 +614,7 @@ const loadSearchResult = async function(query) {
title: ing.title
};
});
state.search.page = 1;
} catch (err) {
throw err;
}
Expand All @@ -616,6 +632,20 @@ const updateServings = function(newServings) {
});
state.recipe.servings = newServings;
};
const adBookMark = function(recipe) {
//Add recipe object - adding bookmark
state.bookMarks.push(recipe);
//Mark current recipe as bookmark
if (recipe.id === state.recipe.id) state.recipe.bookMarked = true;
};
const deleteBookMark = function(id) {
//delete bookmark
const index = state.bookMarks.findIndex((el)=>el.id === id
);
state.bookMarks.splice(index, 1);
//Mark current recipe as not bookmarked
if (id === state.recipe.id) state.recipe.bookMarked = false;
};

},{"regenerator-runtime":"cH8Iq","./config":"beA2m","./helpers":"9l3Yy","@parcel/transformer-js/src/esmodule-helpers.js":"JacNc"}],"cH8Iq":[function(require,module,exports) {
/**
Expand Down Expand Up @@ -1289,7 +1319,7 @@ class ReciepView extends _viewDefault.default {
_errorMessage = 'We could not find that recipe. Please try another one!';
_message = '';
_generatedMarkup() {
return `<figure class="recipe__fig">\n <img src="${this._data.image}" alt="${this._data.title}" crossorigin="anonymous" class="recipe__img"></img> \n <h1 class="recipe__title">\n <span>${this._data.title}</span>\n </h1>\n </figure>\n\n <div class="recipe__details">\n <div class="recipe__info">\n <svg class="recipe__info-icon">\n <use href="${_iconsSvgDefault.default}#icon-clock"></use>\n </svg>\n <span class="recipe__info-data recipe__info-data--minutes">${this._data.cookingTime}</span>\n <span class="recipe__info-text">minutes</span>\n </div>\n <div class="recipe__info">\n <svg class="recipe__info-icon">\n <use href="${_iconsSvgDefault.default}#icon-users"></use>\n </svg>\n <span class="recipe__info-data recipe__info-data--people">${this._data.servings}</span>\n <span class="recipe__info-text">servings</span>\n\n <div class="recipe__info-buttons">\n <button data-update-to="${this._data.servings - 1}" class="btn--tiny btn--update-servings">\n <svg>\n <use href="${_iconsSvgDefault.default}#icon-minus-circle"></use>\n </svg>\n </button>\n <button data-update-to="${this._data.servings + 1}" class="btn--tiny btn--update-servings">\n <svg>\n <use href="${_iconsSvgDefault.default}#icon-plus-circle"></use>\n </svg>\n </button>\n </div>\n </div>\n\n <div class="recipe__user-generated">\n \n </div>\n <button class="btn--round">\n <svg class="">\n <use href="${_iconsSvgDefault.default}#icon-bookmark-fill"></use>\n </svg>\n </button>\n </div>\n\n <div class="recipe__ingredients">\n <h2 class="heading--2">Recipe ingredients</h2>\n <ul class="recipe__ingredient-list">\n ${this._data.ingredients.map((ing)=>this._generateMarkUpIngredient(ing)
return `<figure class="recipe__fig">\n <img src="${this._data.image}" alt="${this._data.title}" crossorigin="anonymous" class="recipe__img"></img> \n <h1 class="recipe__title">\n <span>${this._data.title}</span>\n </h1>\n </figure>\n\n <div class="recipe__details">\n <div class="recipe__info">\n <svg class="recipe__info-icon">\n <use href="${_iconsSvgDefault.default}#icon-clock"></use>\n </svg>\n <span class="recipe__info-data recipe__info-data--minutes">${this._data.cookingTime}</span>\n <span class="recipe__info-text">minutes</span>\n </div>\n <div class="recipe__info">\n <svg class="recipe__info-icon">\n <use href="${_iconsSvgDefault.default}#icon-users"></use>\n </svg>\n <span class="recipe__info-data recipe__info-data--people">${this._data.servings}</span>\n <span class="recipe__info-text">servings</span>\n\n <div class="recipe__info-buttons">\n <button data-update-to="${this._data.servings - 1}" class="btn--tiny btn--update-servings">\n <svg>\n <use href="${_iconsSvgDefault.default}#icon-minus-circle"></use>\n </svg>\n </button>\n <button data-update-to="${this._data.servings + 1}" class="btn--tiny btn--update-servings">\n <svg>\n <use href="${_iconsSvgDefault.default}#icon-plus-circle"></use>\n </svg>\n </button>\n </div>\n </div>\n\n <div class="recipe__user-generated">\n \n </div>\n <button class="btn--round btn--bookmark">\n <svg class="">\n <use href="${_iconsSvgDefault.default}#icon-bookmark${this._data.bookMarked ? '-fill' : ''}"></use>\n </svg>\n </button>\n </div>\n\n <div class="recipe__ingredients">\n <h2 class="heading--2">Recipe ingredients</h2>\n <ul class="recipe__ingredient-list">\n ${this._data.ingredients.map((ing)=>this._generateMarkUpIngredient(ing)
).join('')}\n\n </ul>\n </div>\n\n <div class="recipe__directions">\n <h2 class="heading--2">How to cook it</h2>\n <p class="recipe__directions-text">\n This recipe was carefully designed and tested by\n <span class="recipe__publisher">${this._data.publisher}</span>. Please check out\n directions at their website.\n </p>\n <a\n class="btn--small recipe__btn"\n href="${this._data.sourceUrl}"\n target="_blank"\n >\n <span>Directions</span>\n <svg class="search__icon">\n <use href="${_iconsSvgDefault.default}#icon-arrow-right"></use>\n </svg>\n </a>\n </div>`;
}
//handling event in mvc architecture-> publisher
Expand All @@ -1313,6 +1343,13 @@ class ReciepView extends _viewDefault.default {
_generateMarkUpIngredient(ing) {
return `<li class="recipe__ingredient">\n <svg class="recipe__icon">\n <use href="${_iconsSvgDefault.default}#icon-check"></use>\n </svg>\n <div class="recipe__quantity">${ing.quantity ? new _fractional.Fraction(ing.quantity).toString() : ''}</div>\n <div class="recipe__description">\n <span class="recipe__unit">${ing.unit}</span>\n ${ing.description}\n </div>\n </li>`;
}
addHandlerAddBookmark(handler) {
this._parentElement.addEventListener('click', function(e) {
const btn = e.target.closest('.btn--bookmark');
if (!btn) return;
handler();
});
}
}
exports.default = new ReciepView();

Expand Down
2 changes: 1 addition & 1 deletion dist/index.436439df.js.map
View file

Large diffs are not rendered by default.

14 changes: 13 additions & 1 deletion src/js/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ const controlRecipes = async function () {
//as we call a async function that returns a promise so we have to await if we declare any async function

//2. rendering recipe
recipeView.render(model.state.recipe);
recipeVie
// console.log(model.state.bookMarks);
} catch (err) {
recipeView.renderError();
// alert(err.message);
Expand Down Expand Up @@ -77,10 +78,21 @@ const controlServings = function (newServing) {

//update the view
};

const controlAddBookmarks = function () {
if (!model.state.recipe.bookMarked)
model.adBookMark(model.state.recipe);
else model.deleteBookMark(model.state.recipe.id)
// console.log(model.state.recipe);
// console.log(model.state);
recipeView.update(model.state.recipe);

}
//Event handlers technique in MVC using publisher subscriber design pattern
const init = function () {
recipeView.adhandlerRender(controlRecipes);
recipeView.adhandlerUpdateServings(controlServings);
recipeView.addHandlerAddBookmark(controlAddBookmarks);
//ekhane call dile undefined hobe cg ekhono api theke data ase nai
// controlServings()
searchView.adhandlerSearch(controlSearchResults);
Expand Down
30 changes: 30 additions & 0 deletions src/js/model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const state = {
page: 1,
resultPerPage: RES_PER_PAGE,
},
bookMarks: [],
};

export const loadRecipe = async function (id) {
Expand All @@ -30,6 +31,12 @@ export const loadRecipe = async function (id) {
cookingTime: recipe.cooking_time,
ingredients: recipe.ingredients,
};
//click korar por load hole to bookmark thake na new object set hoi tai jate bookmark identify kora jai tai array te check diye true kore dibo
if (state.bookMarks.some(bookmark => bookmark.id === id)) {
state.recipe.bookMarked = true;
} else {
state.recipe.bookMarked = false;
}
console.log(state.recipe);
} catch (err) {
//Temp Error Handling
Expand All @@ -51,6 +58,8 @@ export const loadSearchResult = async function (query) {
title: ing.title,
};
});

state.search.page = 1;
} catch (err) {
throw err;
}
Expand All @@ -70,3 +79,24 @@ export const updateServings = function (newServings) {
});
state.recipe.servings = newServings;
};

export const adBookMark = function (recipe) {
//Add recipe object - adding bookmark
state.bookMarks.push(recipe);

//Mark current recipe as bookmark
if (recipe.id === state.recipe.id) {
state.recipe.bookMarked = true;
}
};

export const deleteBookMark = function (id) {
//delete bookmark
const index = state.bookMarks.findIndex(el => el.id === id);
state.bookMarks.splice(index, 1);
//Mark current recipe as not bookmarked
if (id === state.recipe.id) {
state.recipe.bookMarked = false;
}

}
15 changes: 12 additions & 3 deletions src/js/views/recipeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ class ReciepView 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>
Expand Down Expand Up @@ -112,9 +112,10 @@ class ReciepView extends View {
})

}
_generateMarkUpIngredient(ing) {



_generateMarkUpIngredient(ing) {
return `<li class="recipe__ingredient">
<svg class="recipe__icon">
<use href="${icons}#icon-check"></use>
Expand All @@ -127,6 +128,14 @@ class ReciepView extends View {
</div>
</li>`;
}
addHandlerAddBookmark(handler) {
this._parentElement.addEventListener('click', function (e) {
const btn = e.target.closest('.btn--bookmark');
if (!btn) return;
handler()
})

}
}

export default new ReciepView();

0 comments on commit 45a516c

Please sign in to comment.