1 00:00:02,000 --> 00:00:03,000 Let's add some logic 2 00:00:03,000 --> 00:00:05,000 to the EventsSearch component. 3 00:00:05,000 --> 00:00:06,000 We get this form, 4 00:00:06,000 --> 00:00:09,000 but at the moment when this button is pressed 5 00:00:09,000 --> 00:00:10,000 and the form is submitted, 6 00:00:10,000 --> 00:00:13,000 we're not doing anything with that submitted data. 7 00:00:13,000 --> 00:00:15,000 And that should change. 8 00:00:15,000 --> 00:00:18,000 Therefore, I'll start by adding a nested function 9 00:00:18,000 --> 00:00:20,000 in the EventsSearch component 10 00:00:20,000 --> 00:00:22,000 and I'll name this function submitHandler. 11 00:00:22,000 --> 00:00:25,000 That's the function that should be triggered 12 00:00:25,000 --> 00:00:27,000 when the form is submitted. 13 00:00:27,000 --> 00:00:29,000 So, on the form element, 14 00:00:29,000 --> 00:00:31,000 we can add the onSubmit prop 15 00:00:31,000 --> 00:00:34,000 and point at submitHandler like this. 16 00:00:34,000 --> 00:00:36,000 Don't execute it, just point at it. 17 00:00:36,000 --> 00:00:40,000 So, that submitHandler is executed by react 18 00:00:40,000 --> 00:00:42,000 when the form is submitted. 19 00:00:42,000 --> 00:00:45,000 Now, as you know, for example, from my react course, 20 00:00:45,000 --> 00:00:48,000 we automatically get an event object here, 21 00:00:48,000 --> 00:00:51,000 because we're listening to a default Dom event. 22 00:00:51,000 --> 00:00:56,000 And here we should call event dot preventDefault 23 00:00:56,000 --> 00:01:01,000 to prevent the browser default off sending an http request 24 00:01:01,000 --> 00:01:03,000 which I don't wanna do here 25 00:01:03,000 --> 00:01:05,000 and which would reload our page 26 00:01:05,000 --> 00:01:08,000 and therefore lose all our applications state. 27 00:01:08,000 --> 00:01:11,000 Instead, I wanna handle this submission with JavaScript 28 00:01:11,000 --> 00:01:15,000 and therefore we prevent that default. 29 00:01:15,000 --> 00:01:16,000 And once that is prevented, 30 00:01:16,000 --> 00:01:19,000 we can now read the selected year and month. 31 00:01:19,000 --> 00:01:22,000 Now for that, we could set up two way binding 32 00:01:22,000 --> 00:01:25,000 with use state and so on, 33 00:01:25,000 --> 00:01:28,000 but since I'm only interested in the values once 34 00:01:28,000 --> 00:01:29,000 when the form is submitted, 35 00:01:29,000 --> 00:01:31,000 I'll instead work with refs. 36 00:01:31,000 --> 00:01:35,000 Another key react feature which you should be aware of. 37 00:01:35,000 --> 00:01:38,000 If you're not, definitely take a react refresher, 38 00:01:38,000 --> 00:01:40,000 or take my react to complete guide course, 39 00:01:40,000 --> 00:01:44,000 where I dive into all react concepts in great depth. 40 00:01:45,000 --> 00:01:49,000 So, here we'll then import useRef from react, 41 00:01:49,000 --> 00:01:52,000 and then we can set up our refs here 42 00:01:52,000 --> 00:01:56,000 and we'll need two refs since we have two inputs. 43 00:01:56,000 --> 00:01:58,000 We'll have the yearInputRef 44 00:01:58,000 --> 00:02:01,000 and hence I'll create my first ref with useRef 45 00:02:01,000 --> 00:02:04,000 and the monthInputRef. 46 00:02:04,000 --> 00:02:06,000 And hence here I'll create this as well. 47 00:02:07,000 --> 00:02:09,000 And now that get these two refs created, 48 00:02:09,000 --> 00:02:13,000 we need to connect them to select elements. 49 00:02:13,000 --> 00:02:14,000 So, on the year select element, 50 00:02:14,000 --> 00:02:16,000 I'll add to the special ref prop 51 00:02:16,000 --> 00:02:19,000 and point at the yearInputRef, 52 00:02:19,000 --> 00:02:22,000 and on the month select element, 53 00:02:22,000 --> 00:02:26,000 I'll also add the ref prop and point at the monthInputRef. 54 00:02:27,000 --> 00:02:29,000 Now, the refs are connected 55 00:02:29,000 --> 00:02:31,000 and therefor now in this submitHandler, 56 00:02:31,000 --> 00:02:34,000 we can get the selectedYear 57 00:02:34,000 --> 00:02:37,000 by accessing yearInputRef dot current. 58 00:02:37,000 --> 00:02:40,000 You always use dot current to get access 59 00:02:40,000 --> 00:02:43,000 to the actual value the ref is connected to, 60 00:02:43,000 --> 00:02:46,000 so, in this case to the select element. 61 00:02:46,000 --> 00:02:50,000 And then since this gives us access to the select element, 62 00:02:50,000 --> 00:02:53,000 so, to the JavaScript object representing 63 00:02:53,000 --> 00:02:55,000 that select element, 64 00:02:55,000 --> 00:02:57,000 we can access the value property, 65 00:02:57,000 --> 00:03:00,000 which every select JavaScript object has. 66 00:03:00,000 --> 00:03:02,000 So, every JavaScript object, 67 00:03:02,000 --> 00:03:06,000 representing a select element has a value property. 68 00:03:06,000 --> 00:03:07,000 Therefore, we can access this here 69 00:03:07,000 --> 00:03:10,000 to get access to the selected value. 70 00:03:10,000 --> 00:03:14,000 And we repeat that for the selected month. 71 00:03:14,000 --> 00:03:17,000 So, with monthInputRef dot current dot value, 72 00:03:17,000 --> 00:03:19,000 we get access to the selected value 73 00:03:19,000 --> 00:03:21,000 on the month select element. 74 00:03:23,000 --> 00:03:26,000 And now we just need to kind of do something 75 00:03:26,000 --> 00:03:28,000 with those values. 76 00:03:28,000 --> 00:03:32,000 And I don't want to utilize them here in EventsSearch, 77 00:03:32,000 --> 00:03:34,000 even though we could do that, 78 00:03:34,000 --> 00:03:38,000 but instead I want to pass them to my AllEventsPage. 79 00:03:39,000 --> 00:03:44,000 And in there, I then want to programmatically navigate 80 00:03:44,000 --> 00:03:48,000 to that slug page here. 81 00:03:48,000 --> 00:03:51,000 And here we need programmatic navigation 82 00:03:51,000 --> 00:03:54,000 because you wanna do that once some action completed. 83 00:03:54,000 --> 00:03:57,000 In this case, once the form submission completed 84 00:03:57,000 --> 00:04:01,000 and we extracted all the form values. 85 00:04:01,000 --> 00:04:05,000 So, that's a typical example for programmatic navigation. 86 00:04:05,000 --> 00:04:07,000 Hence as a first step, 87 00:04:07,000 --> 00:04:09,000 I do expect that on the props 88 00:04:09,000 --> 00:04:12,000 of this EventsSearch component, 89 00:04:12,000 --> 00:04:16,000 I have a prop let's say named onSearch. 90 00:04:16,000 --> 00:04:17,000 This name is up to you 91 00:04:17,000 --> 00:04:20,000 but I'll name it onSearch following this convention 92 00:04:20,000 --> 00:04:23,000 because I expect that onSearch, 93 00:04:23,000 --> 00:04:26,000 the value for this prop is a function, 94 00:04:26,000 --> 00:04:28,000 which I therefor can execute here. 95 00:04:28,000 --> 00:04:32,000 And it should be a function which accepts two parameters, 96 00:04:32,000 --> 00:04:36,000 the selected year and the selected month. 97 00:04:37,000 --> 00:04:40,000 So, I'll call this function and now we need to make sure 98 00:04:40,000 --> 00:04:42,000 that such a function is passed 99 00:04:42,000 --> 00:04:47,000 into EventsSearch through the onSearch prop. 100 00:04:47,000 --> 00:04:50,000 So, in this index JS file in the events folder, 101 00:04:50,000 --> 00:04:53,000 so therefore on the AllEventsPage. 102 00:04:53,000 --> 00:04:56,000 We now need to set up this function here. 103 00:04:57,000 --> 00:05:01,000 Here we need to add a new function in this component. 104 00:05:01,000 --> 00:05:04,000 The findEventsHandler function, for example, 105 00:05:04,000 --> 00:05:08,000 which expects a year and the month in this order 106 00:05:08,000 --> 00:05:11,000 because that's how I'm then calling this function here. 107 00:05:11,000 --> 00:05:13,000 We're calling this function and we're passing in a year 108 00:05:13,000 --> 00:05:17,000 as a first argument and a month as a second argument. 109 00:05:18,000 --> 00:05:20,000 Hence, that's what I expect here. 110 00:05:20,000 --> 00:05:22,000 And then we do something with that. 111 00:05:22,000 --> 00:05:24,000 And it's now this function which is passed 112 00:05:24,000 --> 00:05:28,000 to the EventsSearch component through the onSearch prop 113 00:05:28,000 --> 00:05:30,000 which we just use in there. 114 00:05:30,000 --> 00:05:33,000 So, here I then pass at findEventsHandler. 115 00:05:33,000 --> 00:05:35,000 We don't execute it here. 116 00:05:35,000 --> 00:05:36,000 We just point edit. 117 00:05:36,000 --> 00:05:39,000 So that it's executed for us, 118 00:05:39,000 --> 00:05:42,000 by this EventsSearch component here 119 00:05:42,000 --> 00:05:44,000 with this line of code, 120 00:05:44,000 --> 00:05:48,000 after the form was submitted and we extracted our values. 121 00:05:50,000 --> 00:05:54,000 So, then here findEventsHandler will execute. 122 00:05:54,000 --> 00:05:58,000 And in here we now want to programmatically navigate. 123 00:05:59,000 --> 00:06:03,000 So for that, we can import useRouter 124 00:06:04,000 --> 00:06:09,000 from next slash router like this, 125 00:06:11,000 --> 00:06:15,000 and then call useRouter here outside 126 00:06:15,000 --> 00:06:19,000 of this inner function directly in the component function. 127 00:06:19,000 --> 00:06:22,000 All react hooks need to be called directly 128 00:06:22,000 --> 00:06:23,000 in your component function, 129 00:06:23,000 --> 00:06:26,000 not in any nested block statements. 130 00:06:27,000 --> 00:06:30,000 And that gives us access to the router like this. 131 00:06:30,000 --> 00:06:34,000 And on this router inside of the findEventsHandler, 132 00:06:34,000 --> 00:06:38,000 we can then call push to go to a different page. 133 00:06:38,000 --> 00:06:42,000 That's what you also learned in the previous course section. 134 00:06:42,000 --> 00:06:46,000 Now I'll construct the fullPath I wanna go to here 135 00:06:46,000 --> 00:06:48,000 with a template literal, 136 00:06:48,000 --> 00:06:51,000 and the fullPath will be slash events slash 137 00:06:51,000 --> 00:06:54,000 and now to dynamic segments so 138 00:06:54,000 --> 00:06:57,000 that we reach this slug here. 139 00:06:57,000 --> 00:07:00,000 And the first, the dynamic segment will be my year 140 00:07:00,000 --> 00:07:01,000 and then slash, 141 00:07:01,000 --> 00:07:04,000 and then the second dynamic segment which is month. 142 00:07:05,000 --> 00:07:07,000 Now, just to be clear, 143 00:07:07,000 --> 00:07:09,000 we could have more as segments here, 144 00:07:09,000 --> 00:07:13,000 and this slug route would still be triggered. 145 00:07:13,000 --> 00:07:15,000 It simply consumes an unlimited amount 146 00:07:15,000 --> 00:07:19,000 of segments after slash events. 147 00:07:19,000 --> 00:07:23,000 If we only have one segment, slug will not be triggered 148 00:07:23,000 --> 00:07:25,000 because we have a more specific route folder 149 00:07:25,000 --> 00:07:27,000 with the eventId file. 150 00:07:27,000 --> 00:07:30,000 And next JS is pretty smart about that. 151 00:07:30,000 --> 00:07:32,000 And it sees that for one argument, 152 00:07:32,000 --> 00:07:34,000 for one dynamic parameter after events, 153 00:07:34,000 --> 00:07:37,000 we have a specific page, 154 00:07:37,000 --> 00:07:41,000 but for two or more we have no specific pages 155 00:07:41,000 --> 00:07:44,000 and therefore then this slug will kick in. 156 00:07:44,000 --> 00:07:47,000 So for this path will reach the slug page here. 157 00:07:47,000 --> 00:07:51,000 And therefor, that's the fullPath I wanna navigate to. 158 00:07:52,000 --> 00:07:54,000 With all that if we now save this, 159 00:07:54,000 --> 00:07:58,000 if we now select, let's say May, 2021 160 00:07:58,000 --> 00:08:00,000 and I click on Find Events, 161 00:08:00,000 --> 00:08:05,000 we are taken to slash events slash 2021 slash five, 162 00:08:05,000 --> 00:08:07,000 which is May, 2021. 163 00:08:07,000 --> 00:08:11,000 And we are on that Filtered Events page. 164 00:08:11,000 --> 00:08:13,000 Just as expected. 165 00:08:14,000 --> 00:08:18,000 So, now as a last step before the final polishing, 166 00:08:18,000 --> 00:08:23,000 let's now load the proper events for this filter criteria.