1
00:00:02,000 --> 00:00:05,000
So let's now display our Filtered Events

2
00:00:05,000 --> 00:00:08,000
let's work on this slug page therefore.

3
00:00:08,000 --> 00:00:11,000
On this page, we now got a couple of things to do.

4
00:00:11,000 --> 00:00:16,000
We need to extract the dynamic segment values

5
00:00:16,000 --> 00:00:20,000
which are part of the URL that led to this page.

6
00:00:20,000 --> 00:00:22,000
And we need to extract the year and the month

7
00:00:22,000 --> 00:00:27,000
and then find the events that meet this year and month.

8
00:00:27,000 --> 00:00:29,000
Now in the dummy-data js file,

9
00:00:29,000 --> 00:00:33,000
I already prepared a "getFilteredEvents" function

10
00:00:34,000 --> 00:00:38,000
which expects an object with a year and the month key

11
00:00:38,000 --> 00:00:42,000
where I then look for the events that have the respect

12
00:00:42,000 --> 00:00:45,000
of year and month, and they need to have both.

13
00:00:45,000 --> 00:00:50,000
So this is not an "or" filter, but an "and" filter.

14
00:00:50,000 --> 00:00:51,000
I'm looking for events that have

15
00:00:51,000 --> 00:00:55,000
both the selected year and the selected month.

16
00:00:55,000 --> 00:00:57,000
So that logic is already in place.

17
00:00:57,000 --> 00:00:58,000
But in the slug component

18
00:00:58,000 --> 00:01:02,000
we now need to extract the data from the URL.

19
00:01:02,000 --> 00:01:06,000
And for this, we again can use to useRouter hook.

20
00:01:06,000 --> 00:01:08,000
This gives us access to the data

21
00:01:08,000 --> 00:01:13,000
encoded in the URL and this slug page is no exception.

22
00:01:13,000 --> 00:01:16,000
So here we now import useRouter from nextRouter

23
00:01:17,000 --> 00:01:19,000
and then we create our router object

24
00:01:19,000 --> 00:01:21,000
by calling useRouter like this.

25
00:01:23,000 --> 00:01:25,000
Now here we can get our "filterData"

26
00:01:25,000 --> 00:01:29,000
by accessing router.query.slug.

27
00:01:29,000 --> 00:01:32,000
But what is that "filterData"?

28
00:01:32,000 --> 00:01:34,000
Well, let's recall what it is

29
00:01:34,000 --> 00:01:38,000
by quickly logging it to the console that "filterData".

30
00:01:38,000 --> 00:01:40,000
Let's log it to the console.

31
00:01:40,000 --> 00:01:43,000
Go back here to this events page

32
00:01:43,000 --> 00:01:48,000
to this Filtered Events page for events/2021/5

33
00:01:48,000 --> 00:01:50,000
and open the dev tools and reload.

34
00:01:50,000 --> 00:01:53,000
And we see that it's such an array.

35
00:01:53,000 --> 00:01:55,000
It's an array with two elements.

36
00:01:55,000 --> 00:01:58,000
And the first element is the first segment,

37
00:01:58,000 --> 00:02:00,000
the second element is the second segment.

38
00:02:00,000 --> 00:02:02,000
And if we had more segments

39
00:02:02,000 --> 00:02:04,000
we would have more items in that array.

40
00:02:04,000 --> 00:02:07,000
We also have "undefined" being logged here

41
00:02:07,000 --> 00:02:11,000
because actually this component is rendered twice,

42
00:02:11,000 --> 00:02:13,000
because of how React works

43
00:02:13,000 --> 00:02:16,000
and how that route data is extracted.

44
00:02:16,000 --> 00:02:20,000
Effectively, this hook extracting the route data,

45
00:02:20,000 --> 00:02:24,000
runs after the component was rendered for the first time.

46
00:02:24,000 --> 00:02:26,000
So the first time the component renders

47
00:02:26,000 --> 00:02:30,000
we don't have access to that URL data yet.

48
00:02:30,000 --> 00:02:32,000
That's not a problem per se

49
00:02:32,000 --> 00:02:34,000
but we'll have to make sure that we only

50
00:02:34,000 --> 00:02:37,000
look for Filtered Events once we got access

51
00:02:37,000 --> 00:02:39,000
to the URL data.

52
00:02:40,000 --> 00:02:42,000
And in additional, of course we want to make sure

53
00:02:42,000 --> 00:02:44,000
that we don't try to look for events

54
00:02:44,000 --> 00:02:49,000
if there is a third parameter, if there is "abc" at the end

55
00:02:49,000 --> 00:02:51,000
or at least we don't want to include

56
00:02:51,000 --> 00:02:55,000
that in our query, in our filter logic.

57
00:02:56,000 --> 00:03:00,000
So to make sure that this works appropriately,

58
00:03:00,000 --> 00:03:04,000
I'll first of all, check if filter data is faulty

59
00:03:04,000 --> 00:03:06,000
by adding an exclamation mark here

60
00:03:06,000 --> 00:03:08,000
so that when it is undefined

61
00:03:08,000 --> 00:03:10,000
which it will be when the component is rendered

62
00:03:10,000 --> 00:03:14,000
for the first time, it's then automatically rendered again.

63
00:03:14,000 --> 00:03:17,000
But it is rendered without filter data

64
00:03:17,000 --> 00:03:19,000
when it is rendered for the first time.

65
00:03:19,000 --> 00:03:21,000
And when that happens, I want to return

66
00:03:21,000 --> 00:03:26,000
let's say a paragraph where I say "loading..."

67
00:03:26,000 --> 00:03:30,000
We can give this paragraph a class name of "center".

68
00:03:30,000 --> 00:03:32,000
And here that's regular string

69
00:03:32,000 --> 00:03:36,000
because that is a globally defined CSS clause

70
00:03:36,000 --> 00:03:39,000
in the global CSS file.

71
00:03:39,000 --> 00:03:41,000
So here it's a regular string, which I set

72
00:03:41,000 --> 00:03:45,000
as a clause named to apply this global CSS clause.

73
00:03:45,000 --> 00:03:47,000
So not a scope clause.

74
00:03:47,000 --> 00:03:50,000
And with that, we take care that we don't get an error,

75
00:03:50,000 --> 00:03:55,000
just because we don't have access to the URL data yet.

76
00:03:56,000 --> 00:03:57,000
That's simply how to use,

77
00:03:57,000 --> 00:04:00,000
the router hook works internally.

78
00:04:00,000 --> 00:04:02,000
But now of course

79
00:04:02,000 --> 00:04:04,000
when the component is then automatically rendered

80
00:04:04,000 --> 00:04:07,000
for the second time, we do have access to the data.

81
00:04:07,000 --> 00:04:09,000
And therefore now we do want to look

82
00:04:09,000 --> 00:04:11,000
for the appropriate events.

83
00:04:12,000 --> 00:04:16,000
For this, I'm only interested in the first two segments

84
00:04:16,000 --> 00:04:18,000
which I know will be the year and the month.

85
00:04:18,000 --> 00:04:23,000
So I'll get my "filteredYear" by accessing "filterData"

86
00:04:23,000 --> 00:04:27,000
the first element, and we get the "filteredMonth"

87
00:04:27,000 --> 00:04:30,000
by accessing the second element with index one.

88
00:04:32,000 --> 00:04:37,000
Now the data which we get here is in a string format.

89
00:04:37,000 --> 00:04:39,000
It's always a string because it's encoded

90
00:04:39,000 --> 00:04:43,000
into URL and I need numbers.

91
00:04:43,000 --> 00:04:48,000
Therefore I'll set up my "numbYear"

92
00:04:48,000 --> 00:04:50,000
by transforming "filteredYear"

93
00:04:50,000 --> 00:04:52,000
to a number by adding a plus in front of it.

94
00:04:52,000 --> 00:04:56,000
And the same year for the month with "numbMonth".

95
00:04:56,000 --> 00:04:59,000
I transform this to a number

96
00:04:59,000 --> 00:05:02,000
by adding a plus in front of "filteredMonth".

97
00:05:02,000 --> 00:05:05,000
So that transforms that data to numbers.

98
00:05:07,000 --> 00:05:09,000
Now, of course, for some reason

99
00:05:09,000 --> 00:05:12,000
we could fail to do that because for example

100
00:05:12,000 --> 00:05:16,000
someone manually entered /events/abc/5.

101
00:05:17,000 --> 00:05:22,000
And in that case, 'abc" would of course not be a valid year.

102
00:05:22,000 --> 00:05:25,000
So we also want to handle that scenario.

103
00:05:25,000 --> 00:05:27,000
And therefore I'll add a if-check

104
00:05:27,000 --> 00:05:32,000
where I check if my "numbYear", so my year transformed

105
00:05:32,000 --> 00:05:36,000
to a number, is not a number which would happen

106
00:05:36,000 --> 00:05:39,000
if that is a string like abc, for example

107
00:05:39,000 --> 00:05:41,000
then we can't convert it to a number.

108
00:05:41,000 --> 00:05:45,000
And this year would produce "not a number" as a type.

109
00:05:45,000 --> 00:05:49,000
So I'll check if my "numbYear" is not a number

110
00:05:49,000 --> 00:05:53,000
or if my "numbMonth" is not a number.

111
00:05:53,000 --> 00:05:54,000
If either of the two failed,

112
00:05:54,000 --> 00:05:57,000
something is wrong about that URL.

113
00:05:58,000 --> 00:06:01,000
I'll also check, as an additional condition

114
00:06:01,000 --> 00:06:03,000
under which I want to fail,

115
00:06:03,000 --> 00:06:07,000
if my year let's say is greater than 2030,

116
00:06:07,000 --> 00:06:09,000
let's say that's the highest year I want to support,

117
00:06:09,000 --> 00:06:13,000
or if it's below 2021.

118
00:06:13,000 --> 00:06:17,000
And I'll also check if my month is maybe smaller than one,

119
00:06:17,000 --> 00:06:19,000
which makes no sense

120
00:06:19,000 --> 00:06:21,000
or if the month is greater than 12

121
00:06:21,000 --> 00:06:23,000
which also makes no sense.

122
00:06:23,000 --> 00:06:26,000
If either of these things is true,

123
00:06:26,000 --> 00:06:28,000
if either of these conditions is met

124
00:06:28,000 --> 00:06:30,000
I don't want to continue

125
00:06:30,000 --> 00:06:33,000
because then something is wrong with the filter.

126
00:06:33,000 --> 00:06:37,000
So then I'll just return some output where I, for example

127
00:06:37,000 --> 00:06:42,000
say "Invalid filter. Please adjust your values!"

128
00:06:44,000 --> 00:06:46,000
So now with that, if we saved this

129
00:06:46,000 --> 00:06:51,000
and I would load this page for /events/abc5,

130
00:06:51,000 --> 00:06:55,000
I would get "Invalid filter. Please adjust your values!"

131
00:06:58,000 --> 00:07:01,000
Now, assuming that we do have a valid year

132
00:07:01,000 --> 00:07:06,000
and a valid month, I now can expect to find events though

133
00:07:06,000 --> 00:07:08,000
at least if such events exist

134
00:07:08,000 --> 00:07:11,000
for the chosen year and months.

135
00:07:11,000 --> 00:07:16,000
So now I can get my events, my "filteredEvents" here.

136
00:07:19,000 --> 00:07:24,000
I can add this constant by executing, "getFilteredEvents"

137
00:07:24,000 --> 00:07:27,000
which is this function we have to import

138
00:07:27,000 --> 00:07:29,000
from the dummy data file.

139
00:07:29,000 --> 00:07:32,000
That function I showed you a couple of seconds ago.

140
00:07:33,000 --> 00:07:35,000
We execute this function

141
00:07:35,000 --> 00:07:38,000
and this function wants to get an object

142
00:07:38,000 --> 00:07:42,000
with a year and a month field.

143
00:07:42,000 --> 00:07:45,000
So here I'll set the year field to "numbYear"

144
00:07:45,000 --> 00:07:49,000
and the month field to "numbMonth",

145
00:07:49,000 --> 00:07:52,000
passing on those converted year and month values

146
00:07:52,000 --> 00:07:56,000
as numbers to get Filtered Events.

147
00:07:56,000 --> 00:07:59,000
That then gives us our Filtered Events array.

148
00:07:59,000 --> 00:08:02,000
Now, of course, that could be an empty array though

149
00:08:02,000 --> 00:08:06,000
if we don't find any events for the chosen year and month.

150
00:08:06,000 --> 00:08:08,000
So therefore we want to check

151
00:08:08,000 --> 00:08:13,000
if "filteredEvents" are faulty for some reason

152
00:08:13,000 --> 00:08:16,000
or if they're not faulty but an empty array.

153
00:08:16,000 --> 00:08:21,000
So if "filteredEvents" length is maybe equal to zero.

154
00:08:21,000 --> 00:08:23,000
If either of these two conditions is met

155
00:08:23,000 --> 00:08:26,000
then we had a valid filter

156
00:08:26,000 --> 00:08:30,000
but we simply don't find any events for that filter.

157
00:08:30,000 --> 00:08:31,000
And in this case here

158
00:08:31,000 --> 00:08:35,000
I also want to return some texts where I simply say,

159
00:08:35,000 --> 00:08:39,000
"No events found for the chosen filter!"

160
00:08:39,000 --> 00:08:40,000
something like that.

161
00:08:42,000 --> 00:08:45,000
And now if we made past this if-check as well

162
00:08:45,000 --> 00:08:48,000
we know that we do have valid events.

163
00:08:48,000 --> 00:08:49,000
So therefore now in the next lecture,

164
00:08:49,000 --> 00:08:52,000
we'll then output those events.