1 00:00:00,140 --> 00:00:03,800 So now we want to be able to search or filter products. 2 00:00:03,800 --> 00:00:06,740 And the way this is going to work is in the URL. 3 00:00:06,770 --> 00:00:11,210 I want to be able to go to search slash and then whatever the keyword. 4 00:00:11,210 --> 00:00:12,800 So phone for instance. 5 00:00:12,800 --> 00:00:15,470 So that's ultimately what I want to be able to do. 6 00:00:15,470 --> 00:00:23,180 So this is going to be the keyword that we can get using in the back end using request dot, query, 7 00:00:23,210 --> 00:00:24,290 dot, keyword. 8 00:00:24,290 --> 00:00:28,250 So let's head to the back end because that's where we first need to implement this. 9 00:00:28,250 --> 00:00:34,100 I'm going to close the rest of this stuff up and we're going to go to our controllers product controller 10 00:00:34,100 --> 00:00:38,870 and again, we're going to get products because this is ultimately this is the function that's going 11 00:00:38,870 --> 00:00:39,890 to be called. 12 00:00:39,890 --> 00:00:43,130 So let's go right under. 13 00:00:45,020 --> 00:00:45,500 Let's see. 14 00:00:45,500 --> 00:00:50,690 We'll go right under page here and let's say const. 15 00:00:51,490 --> 00:00:52,720 Keyword. 16 00:00:53,280 --> 00:00:58,350 And we're going to set that equal to request dot query, dot keyword. 17 00:00:58,350 --> 00:01:03,180 And if that's there, then we're going to have an object. 18 00:01:03,180 --> 00:01:05,700 Actually, we can we can do that. 19 00:01:05,700 --> 00:01:14,670 So basically we're going to just use a regular expression here to match, to match that keyword and 20 00:01:14,670 --> 00:01:20,280 it can match it anywhere in the title or the name of the product. 21 00:01:20,280 --> 00:01:27,750 And the reason we're using a regular expression and not just matching it directly is because let's say 22 00:01:27,750 --> 00:01:31,950 it says iPhone ten, but we just send in a keyword of phone. 23 00:01:31,950 --> 00:01:33,690 We want that to match. 24 00:01:34,050 --> 00:01:34,470 Okay. 25 00:01:34,470 --> 00:01:40,650 So we're not we don't want it to match only if it's directly the same exact word. 26 00:01:40,650 --> 00:01:42,900 And we want it to be case insensitive. 27 00:01:42,930 --> 00:01:49,050 So after regex here, we'll put a comma and let's put in options. 28 00:01:49,710 --> 00:01:55,890 And set that to a string of lowercase I that will make it a case insensitive. 29 00:01:56,960 --> 00:02:01,310 Else, then we're not going to have anything here because there's no keyword. 30 00:02:02,180 --> 00:02:07,670 Now, where we want to put this is let's see down here where we. 31 00:02:08,419 --> 00:02:13,340 First of all, we want to implement it in the count because if there's a keyword. 32 00:02:13,860 --> 00:02:16,230 Then that's going to limit the count, right? 33 00:02:16,230 --> 00:02:17,820 Or we want it to limit the count. 34 00:02:17,820 --> 00:02:22,920 So we're going to pass in here an object and then just spread across keyword. 35 00:02:23,830 --> 00:02:27,250 Okay, so it'll only match with if it matches that keyword. 36 00:02:27,250 --> 00:02:33,760 And then also in find, we're going to do the same thing because we only want it to find products with 37 00:02:33,760 --> 00:02:37,060 that keyword if there is a keyword. 38 00:02:38,000 --> 00:02:41,300 And that should be all we have to do here. 39 00:02:41,600 --> 00:02:43,310 So let's save this. 40 00:02:43,310 --> 00:02:44,930 And everything should still work. 41 00:02:44,930 --> 00:02:45,710 Fine. 42 00:02:47,140 --> 00:02:49,480 And I'm just going to change the pagination number. 43 00:02:49,690 --> 00:02:52,570 I'm going to change it to, let's say, eight. 44 00:02:52,720 --> 00:02:58,570 And if I do that, we're not going to see any component at the bottom, which is how it should be. 45 00:02:59,830 --> 00:03:04,900 So next thing for the keyword, we're going to go to the front end. 46 00:03:06,280 --> 00:03:12,430 And go into our slice, our product slice and go back to the get products query. 47 00:03:12,430 --> 00:03:18,400 And just like we passed in a page number here, we're also going to pass in a keyword like that. 48 00:03:18,400 --> 00:03:23,860 And then in the params we're also going to pass in a keyword. 49 00:03:24,550 --> 00:03:26,260 So let's save that. 50 00:03:28,420 --> 00:03:30,640 Now let's go to the home screen. 51 00:03:32,130 --> 00:03:33,390 And. 52 00:03:34,620 --> 00:03:35,560 Let's see. 53 00:03:35,580 --> 00:03:36,840 So from. 54 00:03:37,630 --> 00:03:38,620 The URL. 55 00:03:38,650 --> 00:03:42,190 We're also going to check for our keyword. 56 00:03:42,950 --> 00:03:45,380 And then we're going to pass that in. 57 00:03:46,190 --> 00:03:49,670 To the query and we put keyword first. 58 00:03:49,670 --> 00:03:51,320 So let's say keyword. 59 00:03:54,650 --> 00:03:54,890 Okay. 60 00:03:54,890 --> 00:03:56,740 So we're going to pass both of those in. 61 00:03:56,750 --> 00:03:57,890 We'll save that. 62 00:03:57,890 --> 00:04:04,520 Now we need to add our routes because remember, I want it to go to slash search slash and then whatever 63 00:04:04,520 --> 00:04:05,150 the keyword. 64 00:04:05,150 --> 00:04:10,370 And we also need a route if there's going to be a page number as well because we want pagination with 65 00:04:10,370 --> 00:04:12,260 our filtered results, too. 66 00:04:12,290 --> 00:04:14,630 So let's go into Index.js. 67 00:04:15,410 --> 00:04:19,700 And let's see, we're going to go up to the top here. 68 00:04:21,130 --> 00:04:25,480 And right under where we have this page number. 69 00:04:25,480 --> 00:04:27,160 Actually, let's put it above it. 70 00:04:28,430 --> 00:04:30,320 So I'm just going to copy that down. 71 00:04:30,320 --> 00:04:32,510 And then for this one, it's going to be. 72 00:04:34,410 --> 00:04:35,820 Slash. 73 00:04:37,450 --> 00:04:38,800 Search. 74 00:04:39,160 --> 00:04:43,150 Slash search and then slash colon keyword. 75 00:04:44,170 --> 00:04:44,620 Okay. 76 00:04:44,620 --> 00:04:46,360 And that will be the home screen. 77 00:04:46,810 --> 00:04:47,830 And then. 78 00:04:48,450 --> 00:04:50,760 I'm going to copy this down again. 79 00:04:50,910 --> 00:04:54,420 And this one is going to be if it's slash search. 80 00:04:55,160 --> 00:05:00,980 Slash keyword slash page slash page number. 81 00:05:02,220 --> 00:05:03,750 So let's save that. 82 00:05:03,750 --> 00:05:11,250 And now if I come over here and I go to, let's say, slash search, slash phone. 83 00:05:12,470 --> 00:05:13,130 There we go. 84 00:05:13,130 --> 00:05:14,180 So it's working. 85 00:05:14,180 --> 00:05:15,860 So it matches phone here. 86 00:05:15,860 --> 00:05:22,490 And also in the title we have headphones because it doesn't have to match just the whole word phone 87 00:05:22,490 --> 00:05:26,840 as long as the word phone is in another word that will also come up. 88 00:05:27,820 --> 00:05:29,590 So let's try. 89 00:05:30,600 --> 00:05:31,530 Play. 90 00:05:32,360 --> 00:05:40,550 So for that we have our PlayStation comes up and then we should also be able to do slash page slash 91 00:05:40,550 --> 00:05:41,330 one. 92 00:05:43,500 --> 00:05:43,920 Or. 93 00:05:43,950 --> 00:05:44,640 Wait a minute. 94 00:05:50,080 --> 00:05:52,090 Key search keyword. 95 00:05:52,120 --> 00:05:53,470 Page. 96 00:05:58,490 --> 00:05:58,940 Uh oh. 97 00:05:58,940 --> 00:05:59,330 I'm sorry. 98 00:05:59,330 --> 00:05:59,810 This should be. 99 00:05:59,810 --> 00:06:02,630 This should have a colon because it shouldn't be straight keyword. 100 00:06:02,630 --> 00:06:03,890 It's a placeholder. 101 00:06:03,890 --> 00:06:05,810 So make sure you have a colon there. 102 00:06:05,990 --> 00:06:07,700 All right, so now that works. 103 00:06:08,490 --> 00:06:08,940 Good. 104 00:06:08,940 --> 00:06:18,150 So the next thing we want to do before we actually create the component is, is add it to the pagination. 105 00:06:18,900 --> 00:06:20,400 So. 106 00:06:21,190 --> 00:06:23,890 Let's go to our pagination component. 107 00:06:26,250 --> 00:06:34,020 Because if we don't do this, then pagination isn't going to work correctly on filtered results. 108 00:06:34,200 --> 00:06:37,410 So we're going to add where we have is admin. 109 00:06:37,410 --> 00:06:41,880 We're checking for is admin and then we're going to check for keyword. 110 00:06:41,880 --> 00:06:49,830 So after the question mark, let's check for keyword and let's also pass that in up here. 111 00:06:49,830 --> 00:06:51,570 So after is admin false? 112 00:06:51,580 --> 00:06:55,980 We'll say keyword and set that to a default of just an empty string. 113 00:06:56,100 --> 00:07:02,910 And then down here we'll say keyword and if there is a keyword. 114 00:07:02,910 --> 00:07:09,360 So another question mark, then we're going to have the link be in Backticks. 115 00:07:10,150 --> 00:07:12,370 Will do slash search. 116 00:07:13,000 --> 00:07:13,960 Slash. 117 00:07:13,960 --> 00:07:14,860 And then. 118 00:07:16,460 --> 00:07:22,370 Whatever the keyword slash page and then slash. 119 00:07:23,580 --> 00:07:26,250 Our x value plus one. 120 00:07:27,100 --> 00:07:28,780 And then else. 121 00:07:30,130 --> 00:07:31,570 Then the rest of it. 122 00:07:32,670 --> 00:07:33,570 So that. 123 00:07:33,570 --> 00:07:35,150 Yeah, that should work. 124 00:07:36,200 --> 00:07:39,860 So I actually want to turn pagination back on so we can test it. 125 00:07:39,860 --> 00:07:44,000 So let's go back to our product controller and change this. 126 00:07:44,660 --> 00:07:44,960 Two. 127 00:07:44,960 --> 00:07:45,740 Two. 128 00:07:46,730 --> 00:07:47,420 Actually, you know what? 129 00:07:47,420 --> 00:07:52,850 I'm going to change it to one because we know we can get if we put in phone, we can get two matches. 130 00:07:52,850 --> 00:07:54,260 So let's go back. 131 00:07:55,140 --> 00:07:56,070 Here. 132 00:07:56,070 --> 00:08:00,690 So we're on our home page and you can see we have a bunch of links here because we only have one per 133 00:08:00,690 --> 00:08:01,470 page. 134 00:08:01,470 --> 00:08:03,660 But now I want to do a search. 135 00:08:04,320 --> 00:08:05,280 For. 136 00:08:06,640 --> 00:08:08,580 Search slash phone. 137 00:08:08,590 --> 00:08:11,170 And now we have to write. 138 00:08:11,170 --> 00:08:17,380 And if I click this, it should go to slash search, slash phone slash page, and then the page number. 139 00:08:18,510 --> 00:08:19,740 Which it didn't. 140 00:08:20,220 --> 00:08:23,070 So let's see, why did that happen? 141 00:08:23,070 --> 00:08:26,190 And that's because we didn't pass in. 142 00:08:27,240 --> 00:08:29,880 Keyword into our paginate component. 143 00:08:29,880 --> 00:08:32,280 So we have to go back to the home screen. 144 00:08:33,110 --> 00:08:37,010 And down here we need to account for keyword. 145 00:08:38,000 --> 00:08:39,710 So let's say key word. 146 00:08:41,470 --> 00:08:46,120 If keyword else, then nothing. 147 00:08:51,040 --> 00:08:51,250 Wait. 148 00:08:51,250 --> 00:08:52,060 What am I doing? 149 00:08:52,060 --> 00:08:52,900 This should be. 150 00:08:54,100 --> 00:08:56,200 Keyword equals. 151 00:08:58,180 --> 00:08:59,260 That. 152 00:09:01,390 --> 00:09:02,080 Yeah. 153 00:09:02,110 --> 00:09:03,670 Now where we get. 154 00:09:04,640 --> 00:09:05,840 Keyword. 155 00:09:06,440 --> 00:09:09,500 Is from the URL, which we're getting right here. 156 00:09:09,740 --> 00:09:11,710 All right, so let's try that now. 157 00:09:11,720 --> 00:09:15,920 So I'm going to reload the search result and then click two again. 158 00:09:15,920 --> 00:09:21,380 And now you can see it's only giving us the next item that matches. 159 00:09:21,410 --> 00:09:24,860 And the URL is search phone page two. 160 00:09:26,480 --> 00:09:31,100 So now, whether we're searching or not, the pagination works. 161 00:09:32,500 --> 00:09:33,160 All right, cool. 162 00:09:33,160 --> 00:09:34,840 So now let's. 163 00:09:36,090 --> 00:09:37,800 Change this back. 164 00:09:38,250 --> 00:09:39,210 Let's see, page size. 165 00:09:39,210 --> 00:09:41,010 I'm going to change that back to eight. 166 00:09:42,490 --> 00:09:44,650 And then we can close this stuff up. 167 00:09:45,270 --> 00:09:49,650 And now obviously we need a way to search our products. 168 00:09:49,650 --> 00:09:53,040 So in the next video, we're going to create our search box component.