1 00:00:00,170 --> 00:00:02,840 Okay, so now we're going to create our search box component. 2 00:00:02,840 --> 00:00:08,189 So in our components folder, let's create search box dot JS x. 3 00:00:10,000 --> 00:00:12,670 And we're going to bring some stuff in here. 4 00:00:12,910 --> 00:00:18,460 So up at the top, let's import use state because this is going to be a form. 5 00:00:18,460 --> 00:00:20,150 So we want component state. 6 00:00:20,170 --> 00:00:23,830 We're also going to use the form and button components from React Bootstrap. 7 00:00:23,830 --> 00:00:30,670 And then also we need to get the the keyword from the URL. 8 00:00:30,670 --> 00:00:35,560 So we're going to bring in use params from React router dom. 9 00:00:35,560 --> 00:00:40,810 Let's also bring in use navigate so we can redirect as well. 10 00:00:41,460 --> 00:00:45,000 And then down here inside search box. 11 00:00:45,000 --> 00:00:47,190 Let's initialize our navigate. 12 00:00:48,390 --> 00:00:51,750 And then I want to get the keyword from use params. 13 00:00:51,750 --> 00:00:53,520 So let's say const. 14 00:00:55,740 --> 00:00:57,060 Keyword. 15 00:00:57,650 --> 00:01:06,560 From use params, although I'm going to rename it here to URL keyword and then we'll have our state 16 00:01:06,560 --> 00:01:08,060 for our keyword oops. 17 00:01:08,480 --> 00:01:14,030 And we're going to pass in the URL keyword as the default for that state. 18 00:01:14,960 --> 00:01:18,680 Now down in the return let's have our form. 19 00:01:18,680 --> 00:01:22,730 So the parent element here will be a form. 20 00:01:22,730 --> 00:01:27,290 It's going to have an onsubmit and we'll set that to a submit handler. 21 00:01:30,200 --> 00:01:30,740 Okay. 22 00:01:30,740 --> 00:01:33,710 And then I'm also going to add just a class name here. 23 00:01:34,650 --> 00:01:36,810 And that's going to be D flex. 24 00:01:36,810 --> 00:01:39,390 So we'll display it as a flex box. 25 00:01:40,730 --> 00:01:45,720 And then inside the form we'll have a form control, which will be a type of text. 26 00:01:45,740 --> 00:01:51,590 The name is going to be Q for Query, and then we'll have an on change that's going to set the keyword 27 00:01:51,590 --> 00:01:55,130 state and the placeholder. 28 00:01:55,940 --> 00:01:57,440 Actually, we need a value too. 29 00:01:57,470 --> 00:02:04,490 So value is going to be the keyword, and then the placeholder will say search products, and then we're 30 00:02:04,490 --> 00:02:10,610 going to have a couple class names, just margin, right, small two margin left, small five, and 31 00:02:10,610 --> 00:02:12,990 that should do it for our form control. 32 00:02:13,010 --> 00:02:19,010 Now under that, we're going to have our button, so it'll have a type of submit variant will be outlined. 33 00:02:19,040 --> 00:02:21,260 Success P two. 34 00:02:21,290 --> 00:02:23,150 Let's also do RM two. 35 00:02:23,180 --> 00:02:31,610 So some margin on the x axis and we'll have our our text which will be search and then our closing button. 36 00:02:32,540 --> 00:02:36,650 Okay, now we need to add in, create the submit handler. 37 00:02:36,650 --> 00:02:37,850 So let's do that. 38 00:02:39,180 --> 00:02:42,180 So first we want to prevent the default. 39 00:02:42,180 --> 00:02:45,360 And then what I'm going to do here is check for the keyword. 40 00:02:45,360 --> 00:02:51,720 So if keyword and we can use trim, I wasn't going to, but I guess we'll just keep it there and then 41 00:02:51,720 --> 00:02:57,150 we're going to navigate to search and then whatever that keyword is, Else if there's no keyword, then 42 00:02:57,150 --> 00:02:59,820 we just navigate to just stay on the home page. 43 00:03:00,650 --> 00:03:01,460 All right. 44 00:03:01,950 --> 00:03:06,980 We'll always be the home page, but, you know, implementing the search. 45 00:03:07,610 --> 00:03:11,240 So let's save this and let's bring this in. 46 00:03:11,240 --> 00:03:15,560 We're going to go to the header because that's where we want this. 47 00:03:16,900 --> 00:03:18,880 So let's see. 48 00:03:19,510 --> 00:03:24,430 We'll just go, like, right here and import the search box. 49 00:03:27,500 --> 00:03:28,490 And let's see. 50 00:03:28,490 --> 00:03:30,350 So we have our NAV. 51 00:03:31,690 --> 00:03:32,620 I want to put it. 52 00:03:33,800 --> 00:03:36,290 Right under this right here. 53 00:03:36,990 --> 00:03:39,090 The NAV with the class name of Ms.. 54 00:03:39,120 --> 00:03:39,570 Auto. 55 00:03:39,570 --> 00:03:42,480 So let's say search box. 56 00:03:42,630 --> 00:03:47,310 And we need to actually we know we're not going to pass anything into it. 57 00:03:48,300 --> 00:03:50,370 So let's see if that shows up. 58 00:03:51,480 --> 00:03:57,670 Okay, So if I were to put in here, like, phone and click search. 59 00:03:57,690 --> 00:03:58,320 There we go. 60 00:03:58,320 --> 00:04:04,800 So now all it's doing is navigating to search slash whatever I put in here. 61 00:04:05,190 --> 00:04:05,520 Okay. 62 00:04:05,520 --> 00:04:08,370 All the other stuff is all done from the last video. 63 00:04:10,810 --> 00:04:12,850 Now, this button, I don't know. 64 00:04:12,850 --> 00:04:15,010 I kind of don't like how that looks. 65 00:04:17,370 --> 00:04:19,529 See if we could do something about that. 66 00:04:22,550 --> 00:04:24,260 So outline success. 67 00:04:24,290 --> 00:04:26,220 Is there an outline light? 68 00:04:26,240 --> 00:04:27,870 Let's see if that's a thing. 69 00:04:27,890 --> 00:04:28,760 Yeah. 70 00:04:29,580 --> 00:04:30,930 Yeah, I think that looks better. 71 00:04:30,930 --> 00:04:33,930 It's more readable, but you can experiment with it. 72 00:04:33,930 --> 00:04:38,970 You can change the look of that and anything else you want, but I think that looks pretty decent. 73 00:04:39,090 --> 00:04:42,120 So if we search for, let's say, camera. 74 00:04:44,840 --> 00:04:45,430 Good. 75 00:04:45,440 --> 00:04:50,800 Now, one other thing I want to do is just have a back button, because once we search, there's like, 76 00:04:50,810 --> 00:04:55,400 there's nothing else for us to do unless we click the browser back button, but we should have it in 77 00:04:55,400 --> 00:04:56,330 the UI. 78 00:04:56,360 --> 00:04:59,420 So what we'll do is go to the home screen. 79 00:05:01,480 --> 00:05:04,150 Where screens screen, home screen. 80 00:05:04,450 --> 00:05:08,770 And let's see, we're going to go up to the top here. 81 00:05:09,370 --> 00:05:11,200 And let's say. 82 00:05:12,170 --> 00:05:14,150 If keyword. 83 00:05:14,960 --> 00:05:18,290 Then we're going to show a link. 84 00:05:19,960 --> 00:05:26,770 And the link is going to go to just the home page slash and we'll say go back. 85 00:05:30,560 --> 00:05:30,950 Yeah. 86 00:05:30,950 --> 00:05:32,330 So let's do that. 87 00:05:32,360 --> 00:05:33,660 Link is not defined. 88 00:05:33,680 --> 00:05:38,300 We just need to bring in this import link. 89 00:05:41,240 --> 00:05:44,690 And now we can go back and let's. 90 00:05:44,840 --> 00:05:46,100 Let's push. 91 00:05:46,960 --> 00:05:48,850 Push everything down a little bit. 92 00:05:51,450 --> 00:05:58,890 So it should be able to add on to this, let's say, margin bottom for see if that works. 93 00:05:58,890 --> 00:05:59,730 Yeah, that looks good. 94 00:05:59,730 --> 00:06:03,270 So back so now when we search, we can go back. 95 00:06:04,560 --> 00:06:10,350 We should probably clear the search box, too, once we once we actually make a search. 96 00:06:10,350 --> 00:06:11,670 So in the. 97 00:06:13,010 --> 00:06:14,900 Um, submit handler here. 98 00:06:16,440 --> 00:06:17,130 Let's see. 99 00:06:17,130 --> 00:06:18,240 We'll go. 100 00:06:21,860 --> 00:06:27,200 Yeah, we'll just go right here and let's say set keyword. 101 00:06:29,240 --> 00:06:31,160 To just nothing. 102 00:06:34,710 --> 00:06:38,610 Okay, so now if I search, search for phone. 103 00:06:39,950 --> 00:06:40,220 Okay. 104 00:06:40,220 --> 00:06:41,150 So that clears up. 105 00:06:41,150 --> 00:06:41,690 I think that's. 106 00:06:41,690 --> 00:06:42,890 That's a little better. 107 00:06:43,670 --> 00:06:44,540 All right, cool. 108 00:06:44,540 --> 00:06:47,090 So now we have search fully working. 109 00:06:47,090 --> 00:06:51,920 In the next video, we're going to create our carousel because I want to have a carousel up here that 110 00:06:51,920 --> 00:06:53,630 will show the top products.