All language subtitles for 013 Navigating to the _Filtered Events_ Page Progammatically_Downloadly.ir_en

Let's add some logic

to the EventsSearch component.

We get this form,

but at the moment when this button is pressed

and the form is submitted,

we're not doing anything with that submitted data.

And that should change.

Therefore, I'll start by adding a nested function

in the EventsSearch component

and I'll name this function submitHandler.

That's the function that should be triggered

when the form is submitted.

So, on the form element,

we can add the onSubmit prop

and point at submitHandler like this.

Don't execute it, just point at it.

So, that submitHandler is executed by react

when the form is submitted.

Now, as you know, for example, from my react course,

we automatically get an event object here,

because we're listening to a default Dom event.

And here we should call event dot preventDefault

to prevent the browser default off sending an http request

which I don't wanna do here

and which would reload our page

and therefore lose all our applications state.

Instead, I wanna handle this submission with JavaScript

and therefore we prevent that default.

And once that is prevented,

we can now read the selected year and month.

Now for that, we could set up two way binding

with use state and so on,

but since I'm only interested in the values once

when the form is submitted,

I'll instead work with refs.

Another key react feature which you should be aware of.

If you're not, definitely take a react refresher,

or take my react to complete guide course,

where I dive into all react concepts in great depth.

So, here we'll then import useRef from react,

and then we can set up our refs here

and we'll need two refs since we have two inputs.

We'll have the yearInputRef

and hence I'll create my first ref with useRef

and the monthInputRef.

And hence here I'll create this as well.

And now that get these two refs created,

we need to connect them to select elements.

So, on the year select element,

I'll add to the special ref prop

and point at the yearInputRef,

and on the month select element,

I'll also add the ref prop and point at the monthInputRef.

Now, the refs are connected

and therefor now in this submitHandler,

we can get the selectedYear

by accessing yearInputRef dot current.

You always use dot current to get access

to the actual value the ref is connected to,

so, in this case to the select element.

And then since this gives us access to the select element,

so, to the JavaScript object representing

that select element,

we can access the value property,

which every select JavaScript object has.

So, every JavaScript object,

representing a select element has a value property.

Therefore, we can access this here

to get access to the selected value.

And we repeat that for the selected month.

So, with monthInputRef dot current dot value,

we get access to the selected value

on the month select element.

And now we just need to kind of do something

with those values.

And I don't want to utilize them here in EventsSearch,

even though we could do that,

but instead I want to pass them to my AllEventsPage.

And in there, I then want to programmatically navigate

to that slug page here.

And here we need programmatic navigation

because you wanna do that once some action completed.

In this case, once the form submission completed

and we extracted all the form values.

So, that's a typical example for programmatic navigation.

Hence as a first step,

I do expect that on the props

of this EventsSearch component,

I have a prop let's say named onSearch.

This name is up to you

but I'll name it onSearch following this convention

because I expect that onSearch,

the value for this prop is a function,

which I therefor can execute here.

And it should be a function which accepts two parameters,

the selected year and the selected month.

So, I'll call this function and now we need to make sure

that such a function is passed

into EventsSearch through the onSearch prop.

So, in this index JS file in the events folder,

so therefore on the AllEventsPage.

We now need to set up this function here.

Here we need to add a new function in this component.

The findEventsHandler function, for example,

which expects a year and the month in this order

because that's how I'm then calling this function here.

We're calling this function and we're passing in a year

as a first argument and a month as a second argument.

Hence, that's what I expect here.

And then we do something with that.

And it's now this function which is passed

to the EventsSearch component through the onSearch prop

which we just use in there.

So, here I then pass at findEventsHandler.

We don't execute it here.

We just point edit.

So that it's executed for us,

by this EventsSearch component here

with this line of code,

after the form was submitted and we extracted our values.

So, then here findEventsHandler will execute.

And in here we now want to programmatically navigate.

So for that, we can import useRouter

from next slash router like this,

and then call useRouter here outside

of this inner function directly in the component function.

All react hooks need to be called directly

in your component function,

not in any nested block statements.

And that gives us access to the router like this.

And on this router inside of the findEventsHandler,

we can then call push to go to a different page.

That's what you also learned in the previous course section.

Now I'll construct the fullPath I wanna go to here

with a template literal,

and the fullPath will be slash events slash

and now to dynamic segments so

that we reach this slug here.

And the first, the dynamic segment will be my year

and then slash,

and then the second dynamic segment which is month.

Now, just to be clear,

we could have more as segments here,

and this slug route would still be triggered.

It simply consumes an unlimited amount

of segments after slash events.

If we only have one segment, slug will not be triggered

because we have a more specific route folder

with the eventId file.

And next JS is pretty smart about that.

And it sees that for one argument,

for one dynamic parameter after events,

we have a specific page,

but for two or more we have no specific pages

and therefore then this slug will kick in.

So for this path will reach the slug page here.

And therefor, that's the fullPath I wanna navigate to.

With all that if we now save this,

if we now select, let's say May, 2021

and I click on Find Events,

we are taken to slash events slash 2021 slash five,

which is May, 2021.

And we are on that Filtered Events page.

Just as expected.

So, now as a last step before the final polishing,

let's now load the proper events for this filter criteria.