mirror of
https://github.com/array-in-a-matrix/foodie.git
synced 2025-04-02 10:32:08 -04:00
get recipes from db then display them in cards
This commit is contained in:
parent
d63f17f57a
commit
d60ae44a31
1 changed files with 36 additions and 7 deletions
|
@ -1,9 +1,38 @@
|
||||||
function Bookmark() {
|
let numberOfBookmarks = 10; // TODO: this is a hardcoded value. Should fetched from database?
|
||||||
return <section>
|
const recipes = [];
|
||||||
<h1>Bookmark</h1>
|
|
||||||
|
|
||||||
</section>;
|
fetch("https://htv7-96f00-default-rtdb.firebaseio.com/recipe.json")
|
||||||
|
.then((response) => {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
|
||||||
|
for (const key in data) {
|
||||||
|
const recipe = {
|
||||||
|
id: key,
|
||||||
|
...data[key],
|
||||||
|
};
|
||||||
|
recipes.push(recipe);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function Bookmark() {
|
||||||
|
let recipeList = [];
|
||||||
|
for (let i = 0; i < recipes.length; i++) {
|
||||||
|
recipeList.push(
|
||||||
|
<div>
|
||||||
|
<img src={recipes[i].pic} width='33%'/> {/* //? image of recipe */}
|
||||||
|
<div>
|
||||||
|
<h2>{recipes[i].name}</h2> {/* //? name of recipe */}
|
||||||
|
<p>{recipes[i].discription}</p> {/* //? small discription of the recipe */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
return <section>
|
||||||
export default Bookmark;
|
<h1>Bookmark recipes</h1>
|
||||||
|
{recipeList}
|
||||||
|
</section>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Bookmark;
|
Loading…
Add table
Reference in a new issue