1 00:00:00,360 --> 00:00:01,180 Beautiful job. 2 00:00:01,200 --> 00:00:09,270 Our initial setup looks pretty cool, so we have one column layout on a small screen and as the screen 3 00:00:09,270 --> 00:00:14,730 size increases also, so does the amount of columns that we're displaying. 4 00:00:14,970 --> 00:00:18,320 And eventually, again, we have this main two column layout. 5 00:00:18,330 --> 00:00:24,330 And then inside of the product list, we have this three column layout for all our products. 6 00:00:24,330 --> 00:00:31,590 But I also would want to set up the list for you where if the user wants your she can change to this 7 00:00:31,590 --> 00:00:31,920 list. 8 00:00:31,920 --> 00:00:39,090 Vilayat, where we have one column layout all the way from the small screen to the big screen. 9 00:00:39,330 --> 00:00:44,010 And now eventually we will change this dynamically, of course, but for the time being. 10 00:00:44,940 --> 00:00:51,210 I would just want a hard code where in the state, in a filter context, I'll set up some kind of property 11 00:00:51,660 --> 00:00:53,780 and initial value will be false. 12 00:00:54,060 --> 00:00:56,150 So the grid view will be false. 13 00:00:56,160 --> 00:00:59,310 And that's why we will display the list to you. 14 00:00:59,640 --> 00:01:05,340 And then eventually, once we work on it, of course, we'll add functionality where the user can control. 15 00:01:05,370 --> 00:01:08,160 Which view are we displaying? 16 00:01:08,580 --> 00:01:14,640 So what I would want right now is go back to the filter context and then in the state after the all 17 00:01:14,640 --> 00:01:18,750 product, I'm going to go with Grid Underscore and then you. 18 00:01:19,260 --> 00:01:26,070 Now, eventually this will be true because that is my preference to showcase the grid layout by default. 19 00:01:26,370 --> 00:01:31,440 But for the time being, just because I would want to set up the list for you, I'll set it up as. 20 00:01:31,770 --> 00:01:36,030 Now we're already passing in the state, so we don't need to worry about that. 21 00:01:36,330 --> 00:01:40,350 And now we would want to go back to the product list. 22 00:01:40,590 --> 00:01:41,550 So not the grid view. 23 00:01:41,550 --> 00:01:42,590 We're done with grid view. 24 00:01:43,410 --> 00:01:45,210 We're going back to the product list. 25 00:01:45,690 --> 00:01:49,440 And then not only we're getting the product from our context. 26 00:01:49,710 --> 00:01:57,750 I also would want to get grid underscore view property and then I would want to set up one return if 27 00:01:57,900 --> 00:02:03,780 I don't have any product, which at the moment we would need to change the values in a state in order 28 00:02:03,780 --> 00:02:04,230 to see it. 29 00:02:04,560 --> 00:02:05,760 And I'm not going to do that. 30 00:02:06,150 --> 00:02:10,530 Just remember that as we're going to be filtering eventually, there's going to be the case where this 31 00:02:10,530 --> 00:02:14,120 filtered product is going to be empty. 32 00:02:14,550 --> 00:02:17,640 So if that is the case, then I would want to display some kind of text. 33 00:02:18,030 --> 00:02:23,310 And if it's not a case, then of course, I'm going to go with either great view or I'm going to go 34 00:02:23,310 --> 00:02:23,840 with listing. 35 00:02:24,330 --> 00:02:24,960 So in here. 36 00:02:25,830 --> 00:02:35,310 Let's say if a product is having a length of less than one, so if my filter product array is filtered 37 00:02:35,310 --> 00:02:41,430 down to an empty array, then I would just want to return adding five and I'll cheat a little bit here 38 00:02:41,430 --> 00:02:43,480 since I don't want to set up the stall component. 39 00:02:43,800 --> 00:02:50,340 I'm just going to go with inline style and I'll say text transform none because my default on my headings 40 00:02:50,700 --> 00:02:56,820 of the text transform of capitalized, I believe, and I'm just going to cheat a little bit and the 41 00:02:56,850 --> 00:03:03,360 inline style where I wouldn't want to capitalize this one and I'll just say sorry, no products matched 42 00:03:03,930 --> 00:03:08,640 your search search like so and we can have three dots if we want. 43 00:03:09,000 --> 00:03:11,970 So of course this is going to be the case if we have empty right now. 44 00:03:12,540 --> 00:03:15,490 I messed up a little bit and I didn't set up to return. 45 00:03:15,810 --> 00:03:16,940 Now everything is correct. 46 00:03:16,950 --> 00:03:22,350 Again, if you want to start out, navigate to filter reducer. 47 00:03:23,530 --> 00:03:29,200 And just make sure that filter product is always going to be empty right now, by the way, there is 48 00:03:29,200 --> 00:03:30,980 a faster way I can do something like this. 49 00:03:31,360 --> 00:03:34,750 So once the products are changed, I'm not dispatching the action notice. 50 00:03:35,140 --> 00:03:41,620 So if that is the case, sorry, no products matched your search because by default, of course, the 51 00:03:41,620 --> 00:03:43,540 filter product is an empty array. 52 00:03:43,960 --> 00:03:45,040 So I'll go back. 53 00:03:45,400 --> 00:03:50,230 And of course, how uncommon that one am in the product list. 54 00:03:50,530 --> 00:03:54,460 I would want to set up one more if statement where I'm going to go. 55 00:03:54,470 --> 00:04:01,300 If the grid view, which again eventually will be controlled dynamically, is equal to false. 56 00:04:01,540 --> 00:04:06,530 Of course, what I would want is to return a list view instead. 57 00:04:07,090 --> 00:04:11,860 Now, if that is not the case, if it's going to be true, which eventually will be my default value, 58 00:04:12,160 --> 00:04:14,560 then of course I'll be displaying the grid view. 59 00:04:14,860 --> 00:04:18,960 So we go here with a list view and again we pass in the product. 60 00:04:19,150 --> 00:04:26,020 So there's going to be a product prop equal to the product that I'm getting from my filter context. 61 00:04:26,350 --> 00:04:28,740 And at the moment, notice nothing is there. 62 00:04:28,840 --> 00:04:34,570 And since the grid view is false, we are displaying the list, your component and of course we just 63 00:04:34,570 --> 00:04:36,110 need to set up our return. 64 00:04:36,430 --> 00:04:42,760 So in the list view, I would want to access my product, the prop that I'm putting in. 65 00:04:43,270 --> 00:04:49,110 And the case here is going to be that the product is going to look a little bit different. 66 00:04:49,570 --> 00:04:53,680 So that's why I'm not going to grab the product component that I used in my grid. 67 00:04:54,040 --> 00:04:56,410 I'm just going to set up a separate return. 68 00:04:57,500 --> 00:05:05,480 So we'll go here with a rapper and then instead of this rapper will iterate over the products so products 69 00:05:05,480 --> 00:05:12,790 online map, dot map and for every product I would want to return a item. 70 00:05:13,130 --> 00:05:20,080 So I'll name the object to be product in my area and all the structures and properties out of it. 71 00:05:20,090 --> 00:05:26,960 I'm going to say the image name price and then the description description. 72 00:05:27,350 --> 00:05:33,830 So think of it as we're constructing another product component, however, the style is going to be 73 00:05:33,830 --> 00:05:34,760 a bit different. 74 00:05:35,010 --> 00:05:36,820 So I'm getting this out of this product. 75 00:05:37,040 --> 00:05:43,730 And then for every product in my aura, I would want to return an article right away, a key, and that 76 00:05:43,730 --> 00:05:47,480 one will be equal to my body and inside of this article. 77 00:05:48,350 --> 00:05:53,470 We're going to go with the image that will be equal to an image and then as far as the name, while 78 00:05:53,510 --> 00:05:57,720 we're getting the name from the product, correct. 79 00:05:58,010 --> 00:05:58,820 So say it. 80 00:05:58,970 --> 00:06:05,380 We should have this type of look where we have one column and then we just need to add other info. 81 00:06:05,660 --> 00:06:13,700 So I have the idea right next to the ideal place, my div with a heading for of name name over here. 82 00:06:14,280 --> 00:06:21,560 And there's also going to be earning five five and then instead of the starting five, let's just format 83 00:06:21,560 --> 00:06:22,480 the price right away. 84 00:06:22,820 --> 00:06:31,160 So our class name here and I'll set it equal to price and we'll go with format price and pass in the 85 00:06:31,160 --> 00:06:32,590 price at Syrett. 86 00:06:33,630 --> 00:06:39,210 We should see the name as well as the price, and then there's two more things, there's description 87 00:06:39,750 --> 00:06:44,800 and there's also a link, of course, to the single product page. 88 00:06:45,220 --> 00:06:50,880 Notice if we take a look at the complete project, we have the description and we'll do a little bit 89 00:06:50,880 --> 00:06:56,250 of trickery over here because notice we're not displaying the whole thing and then also link to the 90 00:06:56,250 --> 00:06:57,050 single product. 91 00:06:57,300 --> 00:07:04,500 So the same like we had with a product component where we had a link here as an icon. 92 00:07:04,770 --> 00:07:08,800 Now, of course, I'm just setting up a button, but the idea is exactly the same. 93 00:07:09,240 --> 00:07:13,950 So right after the heading five, there's going to be a description and I'll do that trickery a little 94 00:07:13,950 --> 00:07:14,460 bit later. 95 00:07:14,580 --> 00:07:16,930 So for now, we'll just say a description. 96 00:07:17,190 --> 00:07:19,440 So this is going to be, of course, the full description. 97 00:07:19,710 --> 00:07:23,820 And then right after this paragraph, we're just going to go with link to. 98 00:07:24,060 --> 00:07:26,520 And now remember, we need to set this up dynamically. 99 00:07:26,520 --> 00:07:26,940 Correct. 100 00:07:27,150 --> 00:07:30,770 So we have the link component from the reactor down. 101 00:07:31,920 --> 00:07:38,550 And then this will be navigating to the products of forward slash product and then whatever it is that 102 00:07:38,550 --> 00:07:40,790 ID, whatever is the product. 103 00:07:41,430 --> 00:07:46,890 Now, in order to add a little bit of styling, we're going to go with class name and not beaten. 104 00:07:46,890 --> 00:07:51,990 And then sort of it was just type of details like so details. 105 00:07:52,350 --> 00:07:57,810 And then the last thing is the description, because I would want to make it shorter. 106 00:07:58,270 --> 00:08:05,340 And JavaScript, the string property that we're looking for is the substring, which essentially just 107 00:08:05,340 --> 00:08:07,020 returns a new string. 108 00:08:07,290 --> 00:08:09,410 And what we're looking for is substring. 109 00:08:09,630 --> 00:08:13,650 So we have the string, we invoke the method substring method. 110 00:08:13,860 --> 00:08:19,230 And in here we just need to say, well, how many characters I would want to get on my case. 111 00:08:19,240 --> 00:08:20,280 I'm going to start with zero. 112 00:08:20,610 --> 00:08:26,400 So I'm going to start with the first character and all the way two hundred and fifty characters. 113 00:08:26,700 --> 00:08:29,360 And then we'll just add a dot, dot, dot, dot. 114 00:08:29,410 --> 00:08:29,990 So one. 115 00:08:30,480 --> 00:08:38,710 And if we navigate to our current project, I have my list view as well. 116 00:08:39,000 --> 00:08:45,090 So I'm going to navigate through the filter context and I'll start Ekert false because or I'm sorry. 117 00:08:45,160 --> 00:08:45,410 True. 118 00:08:46,170 --> 00:08:53,650 So I'll set it equal to zero and then once we set up, sort of course we'll control this dynamically. 119 00:08:53,940 --> 00:08:57,690 So once the user presses on the list here, he or she sees the list. 120 00:08:57,740 --> 00:09:01,620 You once he or she presses on a grid view, you get the point. 121 00:09:01,650 --> 00:09:04,050 You can see the column layout.