1 00:00:02,390 --> 00:00:08,050 Now the recipes of course should be rendered on the category meals screen which is the screen we're loading 2 00:00:08,050 --> 00:00:09,850 when we selected a category 3 00:00:09,920 --> 00:00:14,030 and obviously, to render any recipes, we need them, 4 00:00:14,030 --> 00:00:20,930 we need recipes for meals as I also call them here and I will start by adding a new model, meal.js 5 00:00:20,960 --> 00:00:23,880 where I define how a meal should look like in this app. 6 00:00:23,890 --> 00:00:25,840 Now this extra definition is optional 7 00:00:25,850 --> 00:00:30,060 but I think it makes a bit easier to reason about our data and its structure. 8 00:00:30,230 --> 00:00:32,540 So I'll set up a class here and export it 9 00:00:32,690 --> 00:00:39,110 and in that class, add a constructor that allows us to create new preconfigured meals based on the structure 10 00:00:39,110 --> 00:00:41,090 we're about to set up here. 11 00:00:41,090 --> 00:00:44,540 Now a meal will be more complex than a category, 12 00:00:44,540 --> 00:00:45,710 it will have an ID 13 00:00:46,100 --> 00:00:49,550 but it also will have some category IDs to which it belongs, 14 00:00:49,550 --> 00:00:52,890 so multiple categories to which a meal can belong. 15 00:00:52,970 --> 00:00:54,380 It will have a title, 16 00:00:54,380 --> 00:00:55,280 so a name 17 00:00:55,280 --> 00:00:59,750 and then it will have some extra fields like the affordability of a meal, 18 00:01:00,200 --> 00:01:02,890 so is it pricey, is it cheap? 19 00:01:03,290 --> 00:01:09,990 The complexity, so how complex it is to make that dish based on that recipe. An imageUrl 20 00:01:10,000 --> 00:01:15,950 which point at an image on the web where we have a nice picture of that meal. The 21 00:01:15,950 --> 00:01:23,470 duration it takes in minutes to create that meal, also the ingredients which should be an array, 22 00:01:23,570 --> 00:01:31,220 the steps we need to take to make that meal, so the instructions and then four fields which help us filter - 23 00:01:31,820 --> 00:01:40,520 isGlutenFree which marks whether this is gluten free or not, so this will be a boolean, isVegan, isVegetarian 24 00:01:42,620 --> 00:01:44,240 and isLactoseFree, 25 00:01:44,240 --> 00:01:48,590 these are the four fields which I'll use in this app. 26 00:01:48,590 --> 00:01:53,350 Now all of that data we're getting here will then be stored in properties, 27 00:01:53,390 --> 00:02:02,000 so here I'll set this ID equal to ID, this category ID equal to category 28 00:02:02,000 --> 00:02:09,860 ID, this title equal to title, this imageUrl equal to imageUrl and so on of course, 29 00:02:09,890 --> 00:02:16,850 so just store all the arguments we're getting in properties of that, object in the end will be 30 00:02:16,850 --> 00:02:18,850 created based on the class. 31 00:02:18,920 --> 00:02:28,250 So we'll also get our steps here of course, we'll store the duration, we'll store the complexity, we'll 32 00:02:28,250 --> 00:02:36,260 store the affordability here of course in a property, we'll store whether this is gluten free and also 33 00:02:36,260 --> 00:02:38,990 all the other filters of course, 34 00:02:38,990 --> 00:02:48,770 so isVegan, this is vegetarian should also be stored of course and isLactoseFree, 35 00:02:48,770 --> 00:02:52,150 that will also be stored and yes 36 00:02:52,170 --> 00:02:54,450 with that, I'm storing all that data. 37 00:02:54,450 --> 00:03:00,890 Now we can add some dummy data, some dummy meals and of course, you'll find those attached again. 38 00:03:01,020 --> 00:03:10,090 All you need to do in a dummy-data.js file is import meal from the models folder and there, from meal.js 39 00:03:10,110 --> 00:03:16,320 or just from meal like this and now attached in the Javascript file you find attached, you also 40 00:03:16,320 --> 00:03:24,270 find that meals array which you can add here and that is now just a bunch of recipes I prepared for you 41 00:03:24,480 --> 00:03:29,290 which uses or which use all the fields we set up in our model. 42 00:03:29,340 --> 00:03:31,510 Now that's dummy data we work with, 43 00:03:31,530 --> 00:03:37,470 now let's start working with that and let's render a list of these meals on the category meals screen. 44 00:03:37,470 --> 00:03:43,860 Of course, only meals that fit into the category we selected, so that have our category ID.