Now the recipes of course should be rendered on the category meals screen which is the screen we're loading
when we selected a category
and obviously, to render any recipes, we need them,
we need recipes for meals as I also call them here and I will start by adding a new model, meal.js
where I define how a meal should look like in this app.
Now this extra definition is optional
but I think it makes a bit easier to reason about our data and its structure.
So I'll set up a class here and export it
and in that class, add a constructor that allows us to create new preconfigured meals based on the structure
we're about to set up here.
Now a meal will be more complex than a category,
it will have an ID
but it also will have some category IDs to which it belongs,
so multiple categories to which a meal can belong.
It will have a title,
so a name
and then it will have some extra fields like the affordability of a meal,
so is it pricey, is it cheap?
The complexity, so how complex it is to make that dish based on that recipe. An imageUrl
which point at an image on the web where we have a nice picture of that meal. The
duration it takes in minutes to create that meal, also the ingredients which should be an array,
the steps we need to take to make that meal, so the instructions and then four fields which help us filter -
isGlutenFree which marks whether this is gluten free or not, so this will be a boolean, isVegan, isVegetarian
and isLactoseFree,
these are the four fields which I'll use in this app.
Now all of that data we're getting here will then be stored in properties,
so here I'll set this ID equal to ID, this category ID equal to category
ID, this title equal to title, this imageUrl equal to imageUrl and so on of course,
so just store all the arguments we're getting in properties of that, object in the end will be
created based on the class.
So we'll also get our steps here of course, we'll store the duration, we'll store the complexity, we'll
store the affordability here of course in a property, we'll store whether this is gluten free and also
all the other filters of course,
so isVegan, this is vegetarian should also be stored of course and isLactoseFree,
that will also be stored and yes
with that, I'm storing all that data.
Now we can add some dummy data, some dummy meals and of course, you'll find those attached again.
All you need to do in a dummy-data.js file is import meal from the models folder and there, from meal.js
or just from meal like this and now attached in the Javascript file you find attached, you also
find that meals array which you can add here and that is now just a bunch of recipes I prepared for you
which uses or which use all the fields we set up in our model.
Now that's dummy data we work with,
now let's start working with that and let's render a list of these meals on the category meals screen.
Of course, only meals that fit into the category we selected, so that have our category ID.