All language subtitles for 014 Extracting Data on the Catch-All Page_Downloadly.ir_en

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.