1 00:00:00,210 --> 00:00:01,060 Excellent job. 2 00:00:01,080 --> 00:00:10,500 We can remove stories from our UI and I think next I would want to set up my forum where there's going 3 00:00:10,500 --> 00:00:13,430 to be a forum, there's going to be some kind of default value. 4 00:00:13,800 --> 00:00:19,350 But as I'm typing, I'm going to be fetching a new batch of stories. 5 00:00:19,770 --> 00:00:26,010 So if I go here with you, of course, I'm getting the stories that are about you. 6 00:00:26,690 --> 00:00:28,050 I'm going to go with Angular. 7 00:00:28,350 --> 00:00:34,070 Hopefully you get the gist and the way we're going to set this up, since it's not our first rodeo, 8 00:00:34,170 --> 00:00:36,240 we already have set up multiple dispatches. 9 00:00:36,570 --> 00:00:41,760 We have set up already multiple search components in our project. 10 00:00:42,090 --> 00:00:43,470 I'm going to start in the context. 11 00:00:43,470 --> 00:00:43,830 Yes. 12 00:00:44,130 --> 00:00:51,500 And I'll set up my function just because I would want to pass everything down before I navigate to the 13 00:00:51,540 --> 00:00:51,990 component. 14 00:00:51,990 --> 00:00:58,020 And then eventually, of course, we'll worry about that particular action in our producer. 15 00:00:58,350 --> 00:01:03,240 So I'm going to go with const and the name will be Handal Search. 16 00:01:04,050 --> 00:01:08,310 And essentially what I would want to do is grab my query. 17 00:01:08,970 --> 00:01:12,690 So whatever I'm going to be passing into this function. 18 00:01:12,990 --> 00:01:15,210 So handle and search. 19 00:01:15,270 --> 00:01:19,770 I remember we're going to do that using event target and then value. 20 00:01:20,010 --> 00:01:21,870 So whatever I'm going to be typing in the form. 21 00:01:22,200 --> 00:01:28,700 I'll access that here as a parameter of query and then the site of the function body. 22 00:01:28,980 --> 00:01:30,720 I'll dispatch another action. 23 00:01:31,200 --> 00:01:39,900 Remember, we need to have a type here and also this equal to handle page that is my variable name or 24 00:01:39,900 --> 00:01:41,880 I'm sorry handle such my bag. 25 00:01:42,270 --> 00:01:43,620 So handle search. 26 00:01:43,620 --> 00:01:44,820 That is my variable name. 27 00:01:45,060 --> 00:01:52,980 And then as far as the payload, well it is going to be my property and it's going to be equal to my 28 00:01:52,980 --> 00:01:55,620 query, whatever I'm passing it. 29 00:01:55,830 --> 00:01:59,280 And once I have the handle search now of course I don't want to pass it in. 30 00:02:00,240 --> 00:02:07,410 So say make an all search available all throughout my app and then what component am I looking for? 31 00:02:07,770 --> 00:02:10,260 Cause that is the search for him. 32 00:02:11,050 --> 00:02:12,060 So we're now we get here. 33 00:02:12,450 --> 00:02:14,640 And then right away, I have to use global contacts. 34 00:02:15,120 --> 00:02:21,560 And to vouch that I'm looking for is the query that is coming from the context. 35 00:02:22,620 --> 00:02:25,180 You have the query and by default its react. 36 00:02:25,510 --> 00:02:31,600 Once again, I would want to set up the controlled input and the next thing is the handle search. 37 00:02:31,920 --> 00:02:36,720 Again, the reason why I started with the function because I didn't see the point of hopping back and 38 00:02:36,720 --> 00:02:37,020 forth. 39 00:02:37,530 --> 00:02:39,450 We already have done that quite a few times. 40 00:02:39,460 --> 00:02:45,330 So I think we are comfortable with setting up the function first and then I would want to go handle 41 00:02:45,540 --> 00:02:50,100 and search and that is equal to my use global context. 42 00:02:50,310 --> 00:02:55,050 And then it and as far as the formal return, we're going to go here. 43 00:02:55,080 --> 00:02:58,260 We're adding an say form. 44 00:02:58,980 --> 00:03:07,810 And instead of this form, let's go with heading to and say search and line hacker news. 45 00:03:08,160 --> 00:03:10,220 Now, I do want to add a little bit of styling here. 46 00:03:10,230 --> 00:03:15,380 So class name, and it's going to be equal to a search hyphen form. 47 00:03:15,750 --> 00:03:22,320 And also, remember, when we talk about the forms, I don't want the default setup where I refresh 48 00:03:22,320 --> 00:03:25,620 the page because by default, that is exactly what is going to happen. 49 00:03:25,890 --> 00:03:34,980 That's why I'm out here on subnet and I'll set up my arrow function where I'm going to be checking for 50 00:03:34,980 --> 00:03:36,150 my event object. 51 00:03:37,290 --> 00:03:41,920 And the moment I submit the form, I just want to prevent the default. 52 00:03:42,210 --> 00:03:46,080 That's all I want to do since I don't want to do those page refreshers. 53 00:03:46,410 --> 00:03:53,400 So I have search hacker news, of course, that me is my name and I have the styling already since I 54 00:03:53,400 --> 00:03:54,750 have a search form. 55 00:03:55,020 --> 00:03:59,250 And then right after the heading to I'm going to go with input. 56 00:03:59,520 --> 00:04:01,020 It is going to be a text input. 57 00:04:01,260 --> 00:04:04,320 And then I also want to add a little bit of styling. 58 00:04:04,320 --> 00:04:10,010 So class name and it's going to be equal to a form hyphen and input. 59 00:04:10,350 --> 00:04:16,770 And now, of course, what I'm looking for is the value property as well as the on change. 60 00:04:16,920 --> 00:04:20,640 So two attributes since I would want to make this controlled input. 61 00:04:20,850 --> 00:04:21,900 So go the value. 62 00:04:22,270 --> 00:04:25,610 Not one is equal to my query. 63 00:04:26,030 --> 00:04:30,050 So a query and then the second thing is on change. 64 00:04:30,630 --> 00:04:36,630 So as I'm typing something in the form, well, I would want to invoke my handle search because remember 65 00:04:36,630 --> 00:04:41,970 in the handle search, what we're looking for, we're looking for this query, which eventually we will 66 00:04:41,970 --> 00:04:45,780 handle in the reducer so we can navigate here. 67 00:04:46,870 --> 00:04:53,540 And I would want to invoke HANEL search every time I type something in my input. 68 00:04:53,830 --> 00:05:01,000 So we're going to go with on change and as I'm typing something, I would want to invoke it now. 69 00:05:01,000 --> 00:05:07,510 I do need to pass in, of course, the inline function first and then I'm going to go with event and 70 00:05:07,510 --> 00:05:14,950 then let's invoke the handle search and we're going to pass an event target and then whatever is the 71 00:05:14,950 --> 00:05:15,280 value. 72 00:05:15,640 --> 00:05:20,350 And the last step here is setting up, of course, the reducer. 73 00:05:20,800 --> 00:05:27,160 So every time we pass something into our form, of course, we change the query. 74 00:05:27,520 --> 00:05:27,940 Where? 75 00:05:28,240 --> 00:05:29,650 Well, in our state. 76 00:05:29,650 --> 00:05:30,080 Correct. 77 00:05:30,370 --> 00:05:36,580 So where we have the producer, of course, we need to handle it and the name will be handled search. 78 00:05:37,000 --> 00:05:44,500 So where we have the removed story right next to it, we're going to go with Handle Search. 79 00:05:44,510 --> 00:05:46,540 That is the name of my variable. 80 00:05:46,810 --> 00:05:53,830 And as far as return, well, somewhat simple where we go with that and then state and then where do 81 00:05:53,830 --> 00:05:55,160 we have the query? 82 00:05:55,630 --> 00:05:58,270 Well, it is in the action payload, correct. 83 00:05:59,340 --> 00:06:06,150 Someone here knows I have my function handle such a passing the query, and that is equal to my baylon 84 00:06:06,570 --> 00:06:13,110 again, my goal is to change this default one to react one, because the reason why I have reacted displayed 85 00:06:13,110 --> 00:06:17,940 on the screen is because I have my query value by default as react. 86 00:06:18,180 --> 00:06:20,800 But as I'm typing, I would want to change that value. 87 00:06:21,180 --> 00:06:25,580 So in here state and we're going to go with query. 88 00:06:26,010 --> 00:06:30,960 So that's my Stavo and that one will be equal to action and then payload. 89 00:06:31,350 --> 00:06:37,290 Now one more thing that I would want to add is the page of zero, because we need to keep in mind that, 90 00:06:37,620 --> 00:06:43,470 for example, I search the anger and then I keep on increasing or decreasing the pages. 91 00:06:44,100 --> 00:06:51,600 Now, the thing is, once I type a new search course, I would want to start with page number zero. 92 00:06:51,990 --> 00:06:52,400 Correct. 93 00:06:52,770 --> 00:06:58,410 Just keep in mind that, yes, at the moment it kind of doesn't make sense because Page is already zero. 94 00:06:58,740 --> 00:07:01,840 But eventually, of course, we will change these values with the buttons. 95 00:07:02,220 --> 00:07:07,490 That's why I'll say every time I type something, page also should be zero. 96 00:07:07,710 --> 00:07:12,260 So we're going to go with Page and it's going to be equal to zero. 97 00:07:12,420 --> 00:07:13,050 We save it. 98 00:07:14,180 --> 00:07:20,030 And now it's the start, I would want to type something and I would want to see whether I'm getting 99 00:07:20,210 --> 00:07:23,520 the results and I can tell right away that it's not going to happen. 100 00:07:23,540 --> 00:07:23,900 Why? 101 00:07:24,380 --> 00:07:33,050 Well, because we invoke such stories only once when our absolute correct. 102 00:07:33,380 --> 00:07:33,980 So I'm here. 103 00:07:33,980 --> 00:07:42,140 I can type all day long and I can say Henggeler or can type swell whatever you want and you'll notice 104 00:07:42,290 --> 00:07:43,970 that the values won't change. 105 00:07:44,360 --> 00:07:48,020 So let me type here maybe on a bigger screen and I can see that. 106 00:07:48,020 --> 00:07:49,310 Yeah I'm typing. 107 00:07:49,310 --> 00:07:54,610 Yeah, the value is changing and even the state value is changing so it is changing. 108 00:07:54,950 --> 00:08:04,250 If I take a look at the producer notice query is angular, but how do we search for another set of stories 109 00:08:04,610 --> 00:08:07,360 in this case that reference the angular. 110 00:08:07,790 --> 00:08:13,400 Well, we need to navigate back to the user and where I have the dependency. 111 00:08:13,410 --> 00:08:13,710 Right. 112 00:08:14,110 --> 00:08:23,480 I need to say that every time my value in the query changes, well, I would want to fetch for another 113 00:08:23,600 --> 00:08:24,530 set of storage. 114 00:08:24,530 --> 00:08:24,910 Correct. 115 00:08:25,280 --> 00:08:32,030 We're going to go state and then query because of course, that is the property name. 116 00:08:32,360 --> 00:08:39,380 So save it and I'll write a word, navigate the screen and refresh just to be on the safe side and then 117 00:08:39,380 --> 00:08:39,920 check it out. 118 00:08:40,340 --> 00:08:47,960 Every time we are typing something, we're fetching a new set of stories, which is just awesome. 119 00:08:48,590 --> 00:08:55,040 So, for example, I'm going to go to YouTube and now I'm getting the stories that are about YouTube. 120 00:08:55,580 --> 00:08:56,050 Awesome. 121 00:08:56,300 --> 00:08:57,620 We have to search for him. 122 00:08:58,040 --> 00:09:03,680 And I guess the last piece of functionality I would want to add is the component that holds the buttons 123 00:09:04,010 --> 00:09:04,310 now. 124 00:09:04,310 --> 00:09:05,120 Also right away. 125 00:09:05,120 --> 00:09:06,140 I to answer that. 126 00:09:07,000 --> 00:09:14,230 I didn't see the point of setting up these pages one by one, like we did in this project, because 127 00:09:14,230 --> 00:09:18,300 I thought that it's not going to look that pretty if we have 50 buttons. 128 00:09:18,940 --> 00:09:25,810 So remember when we did a presentation on the front end, I went with preview next and then whatever 129 00:09:26,050 --> 00:09:27,310 was the page? 130 00:09:27,640 --> 00:09:28,080 Correct. 131 00:09:28,360 --> 00:09:32,140 So in this case, I have usually around 50 pages. 132 00:09:32,440 --> 00:09:34,310 I thought it wouldn't look very good. 133 00:09:34,720 --> 00:09:39,910 That's why I went with this approach where I have proven next and then I'm just displaying, well, 134 00:09:40,120 --> 00:09:41,710 what is the page? 135 00:09:41,710 --> 00:09:42,130 No.