1 00:00:00,210 --> 00:00:00,790 Great. 2 00:00:00,810 --> 00:00:07,110 Once we add more fields and populate our API with more products our products page in our application 3 00:00:07,410 --> 00:00:12,000 should look something like this where we have a bunch of products. 4 00:00:12,000 --> 00:00:18,330 And even though it doesn't look bad you could probably see that even if we would add a simplified dimension 5 00:00:18,690 --> 00:00:25,470 it would look a bit better where all our products are not stuffed in one page and we're going to do 6 00:00:25,470 --> 00:00:27,860 that by setting up first our context. 7 00:00:27,870 --> 00:00:30,420 So I'm going to navigate back to our project. 8 00:00:30,420 --> 00:00:37,210 We're going to look for the context folder or directory and then we're looking for the product genius 9 00:00:37,360 --> 00:00:39,100 and that's where we would like to work. 10 00:00:39,330 --> 00:00:42,050 And then we still have the comments from the previous setup. 11 00:00:42,480 --> 00:00:47,450 So I guess since we have code use effect quite a few times I think I can delete that. 12 00:00:47,460 --> 00:00:50,160 Same goes for the product consumer. 13 00:00:50,160 --> 00:00:52,770 And we're going to add some more state values. 14 00:00:52,800 --> 00:00:58,710 Now I'm also going to collapse the use effect because we already have it and it's just taking up a bit 15 00:00:58,710 --> 00:00:59,380 more space. 16 00:00:59,670 --> 00:01:05,730 I'm gonna add some comments that these are gonna be extra stage values or whatever stage values so extra 17 00:01:06,390 --> 00:01:08,580 state values. 18 00:01:08,580 --> 00:01:11,670 And again we're gonna use used state. 19 00:01:11,670 --> 00:01:17,080 We're going to start by adding these sorted and set sorted which is gonna be all right. 20 00:01:17,520 --> 00:01:23,040 If you covered the previous projects where we covered filtering this should look very familiar where 21 00:01:23,040 --> 00:01:28,310 we have the product but since we're going to set up the filtering as well as page nation well sorted 22 00:01:28,410 --> 00:01:34,020 is going to serve as our main products and only when we would want to go back to default then we're 23 00:01:34,020 --> 00:01:38,170 going to use the product again that should be something very similar to what we did before. 24 00:01:38,190 --> 00:01:44,370 So we're gonna go with set sorted and of course we're going to use used state but we're gonna start 25 00:01:44,370 --> 00:01:50,160 with an empty array that's gonna be our initial setup and we're also going to have a page and set page 26 00:01:50,160 --> 00:01:50,910 value. 27 00:01:50,910 --> 00:01:56,950 So const the value name is going to be page but the function name is gonna be set page that is gonna 28 00:01:56,970 --> 00:02:03,330 be used for passive nation so react use state and initial value is gonna be zero. 29 00:02:03,330 --> 00:02:09,270 So we're always gonna start with a page of zero and also we would want to work with filters because 30 00:02:09,270 --> 00:02:14,670 eventually we're gonna have some voters here notice we're gonna have the item or the input as well as 31 00:02:14,670 --> 00:02:19,410 the Select and also the checkbox and also the radio button. 32 00:02:19,410 --> 00:02:24,540 So that's the reason why we're gonna set up our filters and this is just gonna be an object with some 33 00:02:24,600 --> 00:02:25,440 empty values. 34 00:02:25,800 --> 00:02:33,210 So cost then the name is going to be filters or you can call it filter set filters is the function and 35 00:02:33,210 --> 00:02:39,490 then we're using react use state and then like I said we're gonna use an empty object where we're going 36 00:02:39,490 --> 00:02:43,950 to passing the empty object and then within the object we're gonna have the values. 37 00:02:43,950 --> 00:02:49,050 Now why I'm setting this up as an object because technically you could say well we could set up each 38 00:02:49,050 --> 00:02:54,930 and every individual item here as the state value and we definitely could have done that but the reason 39 00:02:54,930 --> 00:03:00,000 why I was doing it because later we're gonna set up a function and I just find it easier if we have 40 00:03:00,000 --> 00:03:02,180 one function that deals with all of them. 41 00:03:02,250 --> 00:03:05,830 That's the reason why I did that and I'm going to go with search. 42 00:03:05,940 --> 00:03:10,710 My initial search value's just gonna be an empty string then I'm going to have the category. 43 00:03:10,980 --> 00:03:14,440 So there is gonna be phone radio or the computer. 44 00:03:14,460 --> 00:03:16,300 And for now I'm just gonna say all. 45 00:03:16,530 --> 00:03:18,230 So show me all categories. 46 00:03:18,450 --> 00:03:22,890 Then also shipping whether shipping is free initially is just gonna be false. 47 00:03:22,890 --> 00:03:30,150 I'm gonna avoid shipping equal to False and last price I'm just gonna say that for the time being all 48 00:03:30,150 --> 00:03:35,190 the prices should be shown as you can see that's my initial radio button and then eventually we have 49 00:03:35,190 --> 00:03:39,610 zero to 300 and then 300 to 650 and over 650. 50 00:03:39,780 --> 00:03:42,050 So we're just gonna start with all. 51 00:03:42,060 --> 00:03:45,270 So show me all prices we're going to save that. 52 00:03:45,270 --> 00:03:49,260 And I have the error because I didn't use the react since I didn't import it. 53 00:03:49,260 --> 00:03:51,840 So let's go with the react use state. 54 00:03:51,840 --> 00:03:52,560 We're going to save it. 55 00:03:52,560 --> 00:03:54,480 Everything is fine. 56 00:03:54,480 --> 00:03:57,350 We're gonna set up to place holders for a function. 57 00:03:57,480 --> 00:03:59,560 One is gonna be change page. 58 00:03:59,640 --> 00:04:04,580 Now it's gonna be used when we're doing pageant action and the other one is gonna be update filters. 59 00:04:04,650 --> 00:04:07,230 Now update filters we're and run on change. 60 00:04:07,230 --> 00:04:12,810 So each and every time we're going to do something with our radio buttons or I don't know with our select 61 00:04:13,200 --> 00:04:19,230 line of course we're going to run the on change and we're going to run our update filters for now we're 62 00:04:19,230 --> 00:04:25,850 just going to set them up as placeholders so cost change page is gonna be equal to an index. 63 00:04:25,860 --> 00:04:29,010 So we're gonna pass the index and then from this function. 64 00:04:29,040 --> 00:04:33,320 I don't know for the time being we're just gonna console log the index log. 65 00:04:33,430 --> 00:04:39,990 Now we're going to go with index then another place holder is gonna be our update filters so const update 66 00:04:41,300 --> 00:04:43,970 filters function as a parameter. 67 00:04:43,970 --> 00:04:49,160 We're to pass in the event object and again for the time being we're just giving console logs something. 68 00:04:49,250 --> 00:04:51,780 So let's go log on. 69 00:04:51,800 --> 00:04:52,160 I don't know. 70 00:04:52,190 --> 00:04:58,700 Let's console log our event once I have my state values as well as my place holders for the functions 71 00:04:58,700 --> 00:04:59,560 in place. 72 00:04:59,660 --> 00:05:06,050 I'm gonna pass them down so where I have the value prop while I'm gonna add more items. 73 00:05:06,050 --> 00:05:10,880 So here I'm looking for all the items that I added so I'm gonna pass in sorted. 74 00:05:11,210 --> 00:05:17,420 I'm gonna pass in page as well as we're gonna pass in filters so filters. 75 00:05:17,420 --> 00:05:22,520 Then we also have a function of change page and we have the update filters. 76 00:05:22,670 --> 00:05:26,590 We're gonna save that and last thing within the product context. 77 00:05:26,600 --> 00:05:30,290 What I would like to add is set sorted. 78 00:05:30,290 --> 00:05:34,370 And then of course I would want to pass on something because what happens right now we're gonna have 79 00:05:34,370 --> 00:05:40,100 the empty array but since this is going to replace our product we need to pass in some kind of value 80 00:05:40,100 --> 00:05:40,580 eventually. 81 00:05:40,940 --> 00:05:44,370 So remember we had our use effect where we fetched the products. 82 00:05:44,450 --> 00:05:47,280 Then we flatten them out and we had our products. 83 00:05:47,360 --> 00:05:51,920 So before set products I'm also gonna use set sorted. 84 00:05:51,920 --> 00:05:56,470 So we're gonna go set sorted and we're gonna pass in the same product. 85 00:05:56,570 --> 00:06:01,220 And again this should look very very familiar because we already did that in the previous projects. 86 00:06:01,340 --> 00:06:06,880 When we work with filtering so again we're gonna use sets or as our main products. 87 00:06:06,920 --> 00:06:12,980 And if the user wants to go back to defaults then we're gonna use the product state value but until 88 00:06:12,980 --> 00:06:18,230 that we're gonna use these sorted and just to show that there should be no difference since we're passing 89 00:06:18,230 --> 00:06:19,520 in the same product. 90 00:06:19,520 --> 00:06:27,160 I'm going to navigate to Pages directory of that I'm gonna look for product page and or destruction 91 00:06:27,200 --> 00:06:29,960 products from our products context. 92 00:06:29,960 --> 00:06:34,760 Now in this case I'm going to change this around and we're not gonna look for products we're going to 93 00:06:34,760 --> 00:06:41,180 look for sorted because again we have right now the sorted state value and we're populating with the 94 00:06:41,180 --> 00:06:43,700 same products that were fetching. 95 00:06:43,700 --> 00:06:49,100 And you should see that once you save it and then of course obviously as you pass it in instead of products 96 00:06:49,430 --> 00:06:50,600 within the product list. 97 00:06:50,610 --> 00:06:52,160 So let me delete that. 98 00:06:52,400 --> 00:06:59,990 Instead of product we're going to look for sorted save it and our products page should look exactly 99 00:06:59,990 --> 00:07:00,820 the same. 100 00:07:00,890 --> 00:07:05,900 So I can refresh and you see we're going to have the same product but now we're using different state 101 00:07:05,900 --> 00:07:06,590 value. 102 00:07:06,590 --> 00:07:08,360 Our sorted state value.