Skip to content

Commit

Permalink
Merge pull request #37 from 2308-Bread/api/new_data_structure
Browse files Browse the repository at this point in the history
Api/new data structure
  • Loading branch information
dsstevens authored Feb 10, 2024
2 parents a0b9e5a + 7b95022 commit 4425bc2
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 167 deletions.
209 changes: 105 additions & 104 deletions cypress/fixtures/mock-country.json
Original file line number Diff line number Diff line change
@@ -1,106 +1,107 @@
{
"country": {
"data": {
"id": "3",
"type": "country",
"attributes": {
"name": "Brazil",
"description": "Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight."
},
"relationships": {
"breads": {
"data": [
{
"id": "13",
"type": "bread"
},
{
"id": "14",
"type": "bread"
},
{
"id": "15",
"type": "bread"
},
{
"id": "16",
"type": "bread"
}
]
}
}
}
},
"breads": {
"data": [
{
"id": "13",
"type": "bread",
"attributes": {
"name": "Pão de Queijo",
"description": "Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight.",
"recipe": "Ingredients: 500g tapioca flour 250ml milk 125g butter 10g salt 2 eggs 200g grated cheese Instructions: Boil milk with butter and salt. Pour over tapioca flour and mix. Let it cool, then add eggs and cheese. Form small balls and bake at 375°F (190°C) for 15-20 minutes."
},
"relationships": {
"country": {
"data": {
"id": "3",
"type": "country"
}
}
}
},
{
"id": "14",
"type": "bread",
"attributes": {
"name": "Beiju",
"description": "Beiju is a traditional Brazilian flatbread made from tapioca flour. It's thin, crispy, and versatile, often served with sweet or savory toppings.",
"recipe": "Ingredients: Tapioca flour Water Salt Toppings of choice Instructions: Mix tapioca flour with water and a pinch of salt. Cook the mixture on a hot griddle until it forms a thin, crispy layer. Add your favorite toppings and enjoy!"
},
"relationships": {
"country": {
"data": {
"id": "3",
"type": "country"
}
}
}
},
{
"id": "15",
"type": "bread",
"attributes": {
"name": "Bolo de Milho",
"description": "Bolo de milho, or cornbread, is a popular Brazilian treat. It's sweet, moist, and often enjoyed with a cup of coffee or as a dessert.",
"recipe": "Ingredients: 250g cornmeal 250ml milk 2 eggs 100g sugar 50g butter 1 tsp baking powder Instructions: Mix cornmeal, sugar, and baking powder. Add eggs, milk, and melted butter. Bake in a greased pan at 350°F (180°C) for 30-35 minutes."
},
"relationships": {
"country": {
"data": {
"id": "3",
"type": "country"
}
}
}
},
{
"id": "16",
"type": "bread",
"attributes": {
"name": "Broa",
"description": "Broa is a traditional Brazilian cornbread made with a mix of cornmeal and wheat flour. It has a dense texture and is commonly served with savory dishes.",
"recipe": "Ingredients: 300g cornmeal 200g wheat flour 250ml milk 100g sugar 50g butter 1 tsp baking powder Instructions: Mix cornmeal, wheat flour, sugar, and baking powder. Add melted butter and milk. Bake in a greased pan at 350°F (180°C) for 25-30 minutes."
},
"relationships": {
"country": {
"data": {
"id": "3",
"type": "country"
}
}
}
}
]
}
"country": {
"data": {
"id": 3,
"attributes": {
"name": "Brazil",
"overview": "Brazil, the largest country in South America, is known for its vibrant culture, diverse ecosystems, and passionate people. Famous for the Amazon Rainforest, it boasts a wealth of biodiversity. Rio de Janeiro and São Paulo are bustling cities with iconic landmarks, and Brazil is celebrated for its lively festivals, including Carnival. With a rich blend of indigenous, African, and European influences, Brazil offers a unique fusion of music, dance, and cuisine.",
"culinary": "Brazil's culinary history is a vibrant tapestry of flavors, influenced by indigenous, African, and Portuguese traditions. Feijoada, a hearty black bean stew with meat, is a national dish symbolizing the cultural blend. Churrasco, or barbecue, showcases Brazil's love for grilled meats, while tropical fruits like açaí and passion fruit contribute to refreshing desserts. The country's diverse regions contribute to a rich gastronomic landscape, making Brazilian cuisine a dynamic and delicious fusion.",
"imageUrl": "https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1200px-Flag_of_Brazil.svg.png"
}
}
},
"breads": {
"data": [
{
"id": 13,
"attributes": {
"name": "Pão de Queijo",
"description": "Pão de queijo is a famous Brazilian cheese bread made with cassava flour and cheese, resulting in a chewy and cheesy delight.",
"imageUrl": "https://www.elmundoeats.com/wp-content/uploads/2023/07/Brazilian-cheese-bread-2.jpg",
"recipe": {
"ingredients": [
"500g tapioca flour",
"250ml milk",
"125g butter",
"10g salt",
"2 eggs",
"200g grated cheese"
],
"instructions": [
"Boil milk with butter and salt.",
"Pour over tapioca flour and mix.",
"Let it cool, then add eggs and cheese.",
"Form small balls and bake at 375°F (190°C) for 15-20 minutes."
]
}
}
},
{
"id": 14,
"attributes": {
"name": "Beiju",
"description": "Beiju is a traditional Brazilian flatbread made from tapioca flour. It's thin, crispy, and versatile, often served with sweet or savory toppings.",
"imageUrl": "https://www.saborbrasil.it/wp-content/uploads/2021/06/Beiju-de-tapioca-1024x768.jpg",
"recipe": {
"ingredients": [
"Tapioca flour",
"Water",
"Salt",
"Toppings of choice"
],
"instructions": [
"Mix tapioca flour with water and a pinch of salt.",
"Cook the mixture on a hot griddle until it forms a thin, crispy layer.",
"Add your favorite toppings and enjoy!"
]
}
}
},
{
"id": 15,
"attributes": {
"name": "Bolo de Milho",
"description": "Bolo de milho, or cornbread, is a popular Brazilian treat. It's sweet, moist, and often enjoyed with a cup of coffee or as a dessert.",
"imageUrl": "https://www.essenciastudio.com.br/wp-content/uploads/2024/01/bolo-de-milho.jpg",
"recipe": {
"ingredients": [
"250g cornmeal",
"250ml milk",
"2 eggs",
"100g sugar",
"50g butter",
"1 tsp baking powder"
],
"instructions": [
"Mix cornmeal, sugar, and baking powder.",
"t"
]
}
}
},
{
"id": 16,
"attributes": {
"name": "Broa",
"description": "Broa is a traditional Brazilian cornbread made with a mix of cornmeal and wheat flour. It has a dense texture and is commonly served with savory dishes.",
"imageUrl": "https://www.continente.pt/dw/image/v2/BDVS_PRD/on/demandware.static/-/Sites-col-master-catalog/default/dwb3524f22/images/col/737/7371247-frente.jpg?sw=2000&sh=2000",
"recipe": {
"ingredients": [
"300g cornmeal",
"200g wheat flour",
"250ml milk",
"100g sugar",
"50g butter",
"1 tsp baking powder"
],
"instructions": [
"Mix cornmeal, wheat flour, sugar, and baking powder.",
"Add melted butter and milk.",
"Bake in a greased pan at 350°F (180°C) for 25-30 minutes."
]
}
}
}
]
}
}
15 changes: 9 additions & 6 deletions src/apiTypes.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// Define a structure for the attributes of bread and country
export interface Recipe {
ingredients: string[];
instructions: string[];
}

export interface BreadAttributes {
name: string;
description: string;
recipe: string;
name: string;
description: string;
imageUrl: string;
recipe: Recipe;
}

export interface CountryAttributes {
name: string;
description: string;
}

// Define the main data structure for both bread and country
export interface BreadData {
id: string;
type: string;
Expand All @@ -23,7 +27,6 @@ export interface CountryData {
attributes: CountryAttributes;
}

// Define the top-level structure of the API response
export interface ApiResponse {
country: {
data: CountryData;
Expand Down
30 changes: 19 additions & 11 deletions src/components/BreadDetail/BreadDetail.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*SMALL BREAKPOINT */
.BreadDetail {
margin-top: 1rem;
margin-top: 3rem;
text-align: center;
font-family: 'Abel', sans-serif;
margin-bottom: 1rem;
Expand All @@ -9,13 +9,14 @@
.BreadDetail > h2 {
margin-bottom: 1rem;
font-family: 'Satisfy', cursive;
font-size: 3rem;
font-size: 2rem;
}

.BreadDetail h3 {
margin-bottom: 3rem;
font-size: 1.5rem;
margin-bottom: 1.5rem;
font-size: 1rem;
}


.BreadDetail p {
margin-bottom: 3rem;
Expand All @@ -40,21 +41,28 @@
.recipeDetail {
background-color: rgba(231, 171, 134, 0.7);
font-family: 'Abel', sans-serif;
height: 80%;
width: 80%;
display: flex;
align-items: center;
font-size: x-large;
height: 80%;
padding: 1.5rem;
border-radius: 65px;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
font-size: large;
padding-top: 2rem;
}

.recipeDetail > p {
padding-top: 4rem;
}

.breadImage {
max-width: 75%;
height: auto;
}

/* SMALL - MEDIUM BREAKPOINT */
@media screen and (min-width: 470px) and (max-width: 700) and (orientation: portrait){
.BreadDetail {
Expand Down Expand Up @@ -105,10 +113,10 @@
}
}

/* IPAD BREAKPOINT:: needs refactor, breaking change for small breakpoint for iphone*/
/* IPAD BREAKPOINT */
@media screen and (min-width: 750px) and (max-width: 1400px ) and (orientation: portrait) {
.BreadDetail {
margin-top: 1rem;
margin-top: 3rem;
text-align: center;
font-family: 'Abel', sans-serif;
margin-bottom: 1rem;
Expand All @@ -126,7 +134,7 @@
/* LARGE BREAKPOINT */
@media screen and (min-width: 1025px) {
.BreadDetail {
margin-top: 8rem;
margin-top: 4rem;
text-align: center;
font-family: 'Abel', sans-serif;
margin-bottom: 1rem;
Expand Down
Loading

0 comments on commit 4425bc2

Please sign in to comment.