1 00:00:00,420 --> 00:00:03,820 Whether you're planning to deploy your application or not. 2 00:00:03,920 --> 00:00:08,970 There's one more fix that I would like to do before we even start working with the images. 3 00:00:09,090 --> 00:00:10,680 And what is that issue. 4 00:00:10,680 --> 00:00:16,620 Well if I'm gonna check the product details I'm going to see that I'm looking for the URL so that is 5 00:00:16,620 --> 00:00:22,680 gonna be the first place where in fact I'm accessing the image and the second place is obviously also 6 00:00:22,680 --> 00:00:24,390 going to be the product. 7 00:00:24,390 --> 00:00:29,340 So if we're gonna head over to the product then we have the product and what am I doing here. 8 00:00:29,340 --> 00:00:31,890 Well I'm assigning to some kind of your URL. 9 00:00:32,460 --> 00:00:35,650 And even though you might look at it and you'll be like well what is the big deal. 10 00:00:35,650 --> 00:00:36,950 Well think about it. 11 00:00:37,050 --> 00:00:43,110 Now once we need to make our fix then we need to start again hopping around our application and look 12 00:00:43,110 --> 00:00:47,490 for specific places where we have those particular hours. 13 00:00:47,550 --> 00:00:51,780 So wouldn't it make sense to create a flattened function more essentially. 14 00:00:51,780 --> 00:00:55,510 I know that I'm getting my data within the product context. 15 00:00:55,620 --> 00:01:00,210 I know that that data has some issues as far as images meaning I need to flattening out. 16 00:01:00,570 --> 00:01:05,870 So wouldn't it be better if the same how we had such feature function the helper function. 17 00:01:05,970 --> 00:01:08,680 We're also going to do the same thing with the product. 18 00:01:08,700 --> 00:01:14,060 So before we set our product we're gonna pass it through the flattening function. 19 00:01:14,310 --> 00:01:16,060 And this is exactly what we're gonna do. 20 00:01:16,470 --> 00:01:20,990 So now we're gonna head over to our helpers and see where our helpers are. 21 00:01:21,240 --> 00:01:25,820 And then we're going to need our URL and that is gonna be for the local folks. 22 00:01:25,830 --> 00:01:29,460 In fact when you're setting up the cloud in their account you're not going to need it. 23 00:01:29,460 --> 00:01:31,590 But don't worry we're going to leave comments. 24 00:01:31,590 --> 00:01:36,510 I'm gonna probably repeat 77 times which one is for which use case. 25 00:01:36,510 --> 00:01:40,950 So we're gonna get there first of all let's import our new URL knowledge. 26 00:01:40,960 --> 00:01:42,670 Do you import your URL. 27 00:01:42,810 --> 00:01:49,050 And then of course it is within the same folder so we can just look for the URL once we have the URL 28 00:01:49,490 --> 00:01:51,860 then we're gonna have a flattened function. 29 00:01:52,050 --> 00:01:57,410 So let's call this Latin function and as far as the function we're going to export it right away. 30 00:01:57,720 --> 00:02:03,720 So let me first close the sidebar then we're gonna write the function and the name is gonna be flatten. 31 00:02:04,990 --> 00:02:12,670 Products like so now this function is gonna get data so essentially data that we have within the product. 32 00:02:12,670 --> 00:02:18,370 So again if I'm gonna head over back to my product context we know that of course we're fetching product. 33 00:02:18,400 --> 00:02:24,910 So we're getting back the data we're getting back the response that data and this is where our products 34 00:02:24,910 --> 00:02:25,090 are. 35 00:02:25,420 --> 00:02:29,210 So that is what we're gonna passing within our flattened product. 36 00:02:29,230 --> 00:02:33,230 And since it is a parameter I'm just going to name this data. 37 00:02:33,250 --> 00:02:35,080 So what we're going gonna do with the data. 38 00:02:35,170 --> 00:02:38,050 Well I know that my response is gonna be forward correct. 39 00:02:38,380 --> 00:02:40,030 So this is the response that I'm getting back. 40 00:02:40,030 --> 00:02:45,040 Again it is an array then each and every object is in fact the product. 41 00:02:45,100 --> 00:02:52,000 And what I'm looking for I would like to extract this URL and set it separately right away in the image 42 00:02:52,000 --> 00:02:52,710 property. 43 00:02:52,840 --> 00:02:58,230 So that way again I don't need to Hopper on my application and do it manually each and every time I'd 44 00:02:58,240 --> 00:02:59,550 want to access the image. 45 00:02:59,620 --> 00:03:05,290 I know that once I pass my data through flattened product it is always gonna be the image and that way 46 00:03:05,320 --> 00:03:11,350 if I need to change something about my URL I can do it in one place not try to remember each and every 47 00:03:11,350 --> 00:03:13,530 time I try to access the image. 48 00:03:13,600 --> 00:03:16,710 So let's do it let's return a new array. 49 00:03:16,720 --> 00:03:21,820 So we're going to use data map and then we're gonna go for item course within our callback function 50 00:03:22,140 --> 00:03:25,280 which we're going to access each and every item that we have in there. 51 00:03:25,600 --> 00:03:29,090 And then like I said there's gonna be two options that we're gonna have. 52 00:03:29,110 --> 00:03:32,190 So the first one is once we set up the cloud entry. 53 00:03:32,320 --> 00:03:39,160 So let me throw this cloud the Neri like so and that option is gonna be very simple where each and every 54 00:03:39,160 --> 00:03:41,920 item of course is going to have the image correct. 55 00:03:41,920 --> 00:03:47,780 And now I need to show you my API and then the actual images within the url. 56 00:03:47,830 --> 00:03:54,040 So I'm just going to create a new variable and I'm gonna sign it to image and then the euro. 57 00:03:54,040 --> 00:04:01,900 Mark so that's gonna be the easy option where there's gonna be a new image property image property and 58 00:04:01,900 --> 00:04:05,210 that is equal to item each and every item has it. 59 00:04:05,290 --> 00:04:08,290 And then the actual image is sitting within the euro. 60 00:04:08,290 --> 00:04:10,220 So that's gonna be the simple one. 61 00:04:10,690 --> 00:04:14,500 Then the second one is gonna be for the local deployment. 62 00:04:14,560 --> 00:04:20,650 So again that assumes that you're not going to deploy our application because if you do then essentially 63 00:04:20,650 --> 00:04:25,230 you need to set up the cloud area anyway because again with Heroku it's not going to work. 64 00:04:25,270 --> 00:04:30,670 And once I have my image I'm just going to return a new object. 65 00:04:30,670 --> 00:04:34,810 So I'm iterating over a each and every item is an object. 66 00:04:34,810 --> 00:04:40,600 So I'm going to copy all the properties again from the object and I'm just gonna overwrite that big 67 00:04:40,630 --> 00:04:43,390 image object with just a simple image. 68 00:04:43,390 --> 00:04:47,090 So I know I have the image property and I'm just overwriting that. 69 00:04:47,110 --> 00:04:51,120 So let's first save it and again currently it's not gonna work. 70 00:04:51,130 --> 00:04:55,900 We're not going to be able to see the images that way at least we don't need access all the time that 71 00:04:55,900 --> 00:04:56,650 your URL. 72 00:04:56,770 --> 00:05:03,100 We're just gonna be able to access our image then we're gonna head over to our product context like 73 00:05:03,100 --> 00:05:05,430 so and then we have the featured ones. 74 00:05:05,830 --> 00:05:06,310 Awesome. 75 00:05:06,550 --> 00:05:12,820 But I also can have the product and again since it is within a function I can just use the same name 76 00:05:13,230 --> 00:05:16,830 where I'm going gonna use a product is equal. 77 00:05:16,840 --> 00:05:24,550 Now we need to import not feature products but in fact Latin product that is in fact our function. 78 00:05:24,550 --> 00:05:32,260 Let's save it then we have our product and that of course is not equal to set product response data. 79 00:05:32,350 --> 00:05:35,230 In fact it's gonna be equal to our flattened product. 80 00:05:35,380 --> 00:05:40,820 So we're gonna say products then we're gonna write flattened products and then again we're gonna pass 81 00:05:40,820 --> 00:05:47,380 in response data like so and then instead of setting our products to response data. 82 00:05:47,710 --> 00:05:52,570 So on flattened data we're gonna pass in our product. 83 00:05:52,570 --> 00:05:59,380 Now we're gonna say products like so and once we pass it where we should have the errors because again 84 00:05:59,470 --> 00:06:04,750 within the you are aisles we're not going to be able to access it meaning within the product details 85 00:06:05,050 --> 00:06:06,940 as well as the actual product. 86 00:06:06,940 --> 00:06:10,530 Well there is no anymore the image that you URL is. 87 00:06:10,630 --> 00:06:17,820 Remember when we flatten our product within the helpers it is just simply an image and that's all it 88 00:06:17,830 --> 00:06:18,350 is. 89 00:06:18,370 --> 00:06:21,230 There is no anymore the image you are. 90 00:06:21,280 --> 00:06:27,350 So we're going to head over to a product details for now and then remember we were looking for the URL. 91 00:06:27,470 --> 00:06:28,910 What we're not doing that anymore. 92 00:06:28,990 --> 00:06:29,970 We don't need it. 93 00:06:30,070 --> 00:06:31,330 We just need an image. 94 00:06:31,390 --> 00:06:35,010 And of course we need to change this data around like so. 95 00:06:35,090 --> 00:06:38,140 And the same works for the individual product. 96 00:06:38,140 --> 00:06:43,400 Let me open up the sidebar and let's see let's see let's see where we have it. 97 00:06:43,400 --> 00:06:46,400 We have the product somewhere like so. 98 00:06:46,430 --> 00:06:53,180 And then again instead of looking for the image URL that property doesn't exist anymore so we can directly 99 00:06:53,180 --> 00:06:56,110 get an image so I can just get her off the URL. 100 00:06:56,150 --> 00:07:01,050 And again this is just to show you when we are using data already in multiple places. 101 00:07:01,220 --> 00:07:07,280 It does make sense set up some kind of helper function that just flattens out the data first and let's 102 00:07:07,280 --> 00:07:08,790 just change it around to an image. 103 00:07:08,840 --> 00:07:12,040 And again initially it is not going to work. 104 00:07:12,050 --> 00:07:17,580 Now why it's not working because the data that we're getting back is not right away are your url. 105 00:07:17,690 --> 00:07:18,740 It's this one. 106 00:07:18,830 --> 00:07:21,820 It is the you are all or we have forward slash. 107 00:07:21,830 --> 00:07:23,210 And then we have the upload. 108 00:07:23,390 --> 00:07:27,790 So now let me show you a setup for the local deployment. 109 00:07:27,830 --> 00:07:32,570 So essentially if you're not planning to deploy the application if you're just happy with the way it 110 00:07:32,570 --> 00:07:33,070 is. 111 00:07:33,180 --> 00:07:34,610 Here's the simple fix. 112 00:07:34,610 --> 00:07:38,630 We're going to head over to our helpers let's hurry over to our helpers. 113 00:07:39,000 --> 00:07:42,110 And then remember what is the you are all. 114 00:07:42,270 --> 00:07:44,520 While we have the euro of local host right. 115 00:07:44,910 --> 00:07:53,040 So I'm just gonna come and the South has a cloud Nouri and then we're gonna say local setup no deployment 116 00:07:53,340 --> 00:07:59,450 like so just so we for sure all are on the same page and the fix is following. 117 00:07:59,550 --> 00:08:02,000 Again I'm gonna have the image. 118 00:08:02,100 --> 00:08:05,670 However in this case I need to construct my property correct. 119 00:08:05,670 --> 00:08:07,090 I need to have the local host. 120 00:08:07,230 --> 00:08:11,360 Then forward slash and then whatever you are all is here. 121 00:08:11,400 --> 00:08:15,090 So we're gonna set that up by first having a template string. 122 00:08:15,280 --> 00:08:20,430 Then we're going to access the URL and then we're gonna look for that particular property which is within 123 00:08:20,430 --> 00:08:23,350 the item then within the image currently. 124 00:08:23,430 --> 00:08:24,900 And then of course the url. 125 00:08:24,930 --> 00:08:26,960 So again item image. 126 00:08:27,000 --> 00:08:28,200 And then the euro. 127 00:08:28,270 --> 00:08:29,630 That's what we're looking for. 128 00:08:29,640 --> 00:08:35,640 So let's access one more variable in this case we're gonna access each and every item then within the 129 00:08:35,640 --> 00:08:37,160 item there is image property. 130 00:08:37,270 --> 00:08:40,690 And since it has an object we are looking for the euro. 131 00:08:40,800 --> 00:08:44,040 And once we set up our image with a proper value. 132 00:08:44,040 --> 00:08:51,120 So the URL item image you URL then if we're gonna head over to a product you can see all the products 133 00:08:51,600 --> 00:08:56,610 as well as if we navigate to a single product then our images are gonna be displayed. 134 00:08:56,640 --> 00:09:00,940 However we're still gonna have issue with a feature product. 135 00:09:00,940 --> 00:09:07,080 And now let's think about it why do we have an issue where I'm looking at the data correct but are we 136 00:09:07,080 --> 00:09:09,180 adding a proper image now. 137 00:09:09,260 --> 00:09:10,210 No we're not. 138 00:09:10,230 --> 00:09:12,320 So we're gonna have to head over to our products. 139 00:09:12,390 --> 00:09:17,610 And by the way there's two ways you could just copy and paste these lines of code here and just set 140 00:09:17,610 --> 00:09:18,630 it up this way. 141 00:09:18,630 --> 00:09:23,820 We're essentially not only we're filtering but before that we're going so kind of map over it. 142 00:09:23,850 --> 00:09:25,280 That is also an option. 143 00:09:25,450 --> 00:09:31,770 But in my case we're gonna head over to a context and then we have feature product as well as flatten. 144 00:09:31,800 --> 00:09:36,510 So what if we would do it this way whereas since our flattened product is going to return. 145 00:09:36,610 --> 00:09:37,010 All right. 146 00:09:37,020 --> 00:09:43,230 Anyway while we can just instead of passing the response data I can just say here flattened product 147 00:09:43,650 --> 00:09:47,460 and then passing the response and data. 148 00:09:47,460 --> 00:09:52,760 So this way I'm gonna get a new array and then of course my feature product is going to work as well. 149 00:09:52,770 --> 00:09:58,570 So essentially I'm gonna pipe my array through both of my helper functions The first one just gonna 150 00:09:58,720 --> 00:09:59,750 flatten products. 151 00:09:59,880 --> 00:10:02,320 And the second one is gonna be feature products. 152 00:10:02,340 --> 00:10:05,010 So that's how we can set up the images. 153 00:10:05,010 --> 00:10:08,170 If we're not planning on deploying our application. 154 00:10:08,250 --> 00:10:13,530 So if it's just gonna be for our local environment and next we're going to take a look at how we can 155 00:10:13,530 --> 00:10:20,150 set up the cloud in our account and in fact have our images directly pointing to a cloud. 156 00:10:20,150 --> 00:10:20,460 Mary.