So let's now display our Filtered Events
let's work on this slug page therefore.
On this page, we now got a couple of things to do.
We need to extract the dynamic segment values
which are part of the URL that led to this page.
And we need to extract the year and the month
and then find the events that meet this year and month.
Now in the dummy-data js file,
I already prepared a "getFilteredEvents" function
which expects an object with a year and the month key
where I then look for the events that have the respect
of year and month, and they need to have both.
So this is not an "or" filter, but an "and" filter.
I'm looking for events that have
both the selected year and the selected month.
So that logic is already in place.
But in the slug component
we now need to extract the data from the URL.
And for this, we again can use to useRouter hook.
This gives us access to the data
encoded in the URL and this slug page is no exception.
So here we now import useRouter from nextRouter
and then we create our router object
by calling useRouter like this.
Now here we can get our "filterData"
by accessing router.query.slug.
But what is that "filterData"?
Well, let's recall what it is
by quickly logging it to the console that "filterData".
Let's log it to the console.
Go back here to this events page
to this Filtered Events page for events/2021/5
and open the dev tools and reload.
And we see that it's such an array.
It's an array with two elements.
And the first element is the first segment,
the second element is the second segment.
And if we had more segments
we would have more items in that array.
We also have "undefined" being logged here
because actually this component is rendered twice,
because of how React works
and how that route data is extracted.
Effectively, this hook extracting the route data,
runs after the component was rendered for the first time.
So the first time the component renders
we don't have access to that URL data yet.
That's not a problem per se
but we'll have to make sure that we only
look for Filtered Events once we got access
to the URL data.
And in additional, of course we want to make sure
that we don't try to look for events
if there is a third parameter, if there is "abc" at the end
or at least we don't want to include
that in our query, in our filter logic.
So to make sure that this works appropriately,
I'll first of all, check if filter data is faulty
by adding an exclamation mark here
so that when it is undefined
which it will be when the component is rendered
for the first time, it's then automatically rendered again.
But it is rendered without filter data
when it is rendered for the first time.
And when that happens, I want to return
let's say a paragraph where I say "loading..."
We can give this paragraph a class name of "center".
And here that's regular string
because that is a globally defined CSS clause
in the global CSS file.
So here it's a regular string, which I set
as a clause named to apply this global CSS clause.
So not a scope clause.
And with that, we take care that we don't get an error,
just because we don't have access to the URL data yet.
That's simply how to use,
the router hook works internally.
But now of course
when the component is then automatically rendered
for the second time, we do have access to the data.
And therefore now we do want to look
for the appropriate events.
For this, I'm only interested in the first two segments
which I know will be the year and the month.
So I'll get my "filteredYear" by accessing "filterData"
the first element, and we get the "filteredMonth"
by accessing the second element with index one.
Now the data which we get here is in a string format.
It's always a string because it's encoded
into URL and I need numbers.
Therefore I'll set up my "numbYear"
by transforming "filteredYear"
to a number by adding a plus in front of it.
And the same year for the month with "numbMonth".
I transform this to a number
by adding a plus in front of "filteredMonth".
So that transforms that data to numbers.
Now, of course, for some reason
we could fail to do that because for example
someone manually entered /events/abc/5.
And in that case, 'abc" would of course not be a valid year.
So we also want to handle that scenario.
And therefore I'll add a if-check
where I check if my "numbYear", so my year transformed
to a number, is not a number which would happen
if that is a string like abc, for example
then we can't convert it to a number.
And this year would produce "not a number" as a type.
So I'll check if my "numbYear" is not a number
or if my "numbMonth" is not a number.
If either of the two failed,
something is wrong about that URL.
I'll also check, as an additional condition
under which I want to fail,
if my year let's say is greater than 2030,
let's say that's the highest year I want to support,
or if it's below 2021.
And I'll also check if my month is maybe smaller than one,
which makes no sense
or if the month is greater than 12
which also makes no sense.
If either of these things is true,
if either of these conditions is met
I don't want to continue
because then something is wrong with the filter.
So then I'll just return some output where I, for example
say "Invalid filter. Please adjust your values!"
So now with that, if we saved this
and I would load this page for /events/abc5,
I would get "Invalid filter. Please adjust your values!"
Now, assuming that we do have a valid year
and a valid month, I now can expect to find events though
at least if such events exist
for the chosen year and months.
So now I can get my events, my "filteredEvents" here.
I can add this constant by executing, "getFilteredEvents"
which is this function we have to import
from the dummy data file.
That function I showed you a couple of seconds ago.
We execute this function
and this function wants to get an object
with a year and a month field.
So here I'll set the year field to "numbYear"
and the month field to "numbMonth",
passing on those converted year and month values
as numbers to get Filtered Events.
That then gives us our Filtered Events array.
Now, of course, that could be an empty array though
if we don't find any events for the chosen year and month.
So therefore we want to check
if "filteredEvents" are faulty for some reason
or if they're not faulty but an empty array.
So if "filteredEvents" length is maybe equal to zero.
If either of these two conditions is met
then we had a valid filter
but we simply don't find any events for that filter.
And in this case here
I also want to return some texts where I simply say,
"No events found for the chosen filter!"
something like that.
And now if we made past this if-check as well
we know that we do have valid events.
So therefore now in the next lecture,
we'll then output those events.