1
00:00:01,000 --> 00:00:03,000
So to update what we see on the page,

2
00:00:03,000 --> 00:00:08,000
I'll actually start by getting my selected year

3
00:00:08,000 --> 00:00:11,000
by taking a look at the filter,

4
00:00:11,000 --> 00:00:13,000
and I'll add a question mark here

5
00:00:13,000 --> 00:00:16,000
so that we only continue if it's defined,

6
00:00:16,000 --> 00:00:18,000
and otherwise, will just return undefined

7
00:00:18,000 --> 00:00:21,000
and store that in selected year.

8
00:00:21,000 --> 00:00:24,000
But if it's defined, we know it will be an array,

9
00:00:24,000 --> 00:00:26,000
and we can then use this notation

10
00:00:26,000 --> 00:00:30,000
to access the first stored value in that array.

11
00:00:32,000 --> 00:00:34,000
And that, as you just saw before,

12
00:00:34,000 --> 00:00:36,000
would be the selected year.

13
00:00:37,000 --> 00:00:40,000
So that's what I'm trying to access with this notation

14
00:00:40,000 --> 00:00:42,000
if filter is defined.

15
00:00:42,000 --> 00:00:44,000
An alternative way of writing this would be

16
00:00:44,000 --> 00:00:48,000
a ternary expression, where we check if filter is truthy,

17
00:00:48,000 --> 00:00:49,000
so if it's not undefined,

18
00:00:49,000 --> 00:00:52,000
in which case we want to access the first element.

19
00:00:52,000 --> 00:00:55,000
Otherwise, we store undefined in selected here.

20
00:00:55,000 --> 00:00:58,000
But of course, since that's a bit longer to write,

21
00:00:58,000 --> 00:01:01,000
I'll go for this more concise notation.

22
00:01:01,000 --> 00:01:04,000
Now we might not just have a selected year,

23
00:01:04,000 --> 00:01:07,000
but also a selected month,

24
00:01:07,000 --> 00:01:10,000
so therefore, I'll also try to access the second element

25
00:01:10,000 --> 00:01:14,000
that might be stored in this filter array.

26
00:01:14,000 --> 00:01:15,000
And if that doesn't exist,

27
00:01:15,000 --> 00:01:19,000
we'll just store undefined in selected month instead.

28
00:01:20,000 --> 00:01:22,000
Now, with that information gathered,

29
00:01:22,000 --> 00:01:26,000
we can create a news variable, which is undefined initially,

30
00:01:26,000 --> 00:01:31,000
but we can then check if selected year is truthy,

31
00:01:32,000 --> 00:01:37,000
and selected month on the other hand is falsy,

32
00:01:37,000 --> 00:01:42,000
which means we have some year but we don't have a month,

33
00:01:42,000 --> 00:01:45,000
in which case, the news I wanna output should be the news

34
00:01:45,000 --> 00:01:49,000
for a given year, which I can get with help

35
00:01:49,000 --> 00:01:53,000
of that get news for a year utility function,

36
00:01:53,000 --> 00:01:57,000
which is imported from the news file in the lib folder.

37
00:01:57,000 --> 00:02:02,000
And we passed the selected year to get news for a year.

38
00:02:02,000 --> 00:02:03,000
So therefore then we would have the news,

39
00:02:03,000 --> 00:02:05,000
and now below the header here,

40
00:02:05,000 --> 00:02:09,000
I wanna output the news list with those news.

41
00:02:10,000 --> 00:02:12,000
Now, of course, news could be undefined,

42
00:02:12,000 --> 00:02:14,000
therefore, I'll actually add another check here

43
00:02:14,000 --> 00:02:19,000
and another variable first, which I'll name news content,

44
00:02:19,000 --> 00:02:22,000
which initially is a fallback paragraph that says

45
00:02:22,000 --> 00:02:25,000
no news found for the selected period

46
00:02:25,000 --> 00:02:27,000
or something like this.

47
00:02:28,000 --> 00:02:32,000
And then we can check if news is defined,

48
00:02:32,000 --> 00:02:36,000
and just to be sure, if news is an array

49
00:02:36,000 --> 00:02:38,000
with a length greater than zero,

50
00:02:39,000 --> 00:02:42,000
so that we have at least one news item,

51
00:02:42,000 --> 00:02:47,000
and in that case, I'll set news content equal to news list

52
00:02:47,000 --> 00:02:51,000
using that news list component we worked on earlier,

53
00:02:52,000 --> 00:02:53,000
and I'll set the news prop.

54
00:02:53,000 --> 00:02:56,000
They are equal to the news we identified,

55
00:02:56,000 --> 00:03:00,000
so equal to the value stored in our news variable,

56
00:03:01,000 --> 00:03:05,000
and it's now that news content here that should be output

57
00:03:05,000 --> 00:03:06,000
below the header.

58
00:03:06,000 --> 00:03:10,000
So down there, we can output the news content.

59
00:03:10,000 --> 00:03:13,000
And if it's undefined, we'll simply not show anything.

60
00:03:14,000 --> 00:03:15,000
Of course, this won't work

61
00:03:15,000 --> 00:03:18,000
since I now would have two root JSX elements here,

62
00:03:18,000 --> 00:03:20,000
which is not allowed.

63
00:03:20,000 --> 00:03:23,000
Therefore, we should wrap this with a fragment like this,

64
00:03:25,000 --> 00:03:27,000
and we can get rid of this code.

65
00:03:29,000 --> 00:03:32,000
Well, and with that, we should show some news

66
00:03:32,000 --> 00:03:34,000
if we have a selected year.

67
00:03:34,000 --> 00:03:37,000
Therefore, now if you save that

68
00:03:37,000 --> 00:03:40,000
and you are on archive/2024,

69
00:03:40,000 --> 00:03:42,000
you should see the news for that year,

70
00:03:42,000 --> 00:03:44,000
but if you switch to a different year,

71
00:03:44,000 --> 00:03:46,000
you should see the news for that year instead.

72
00:03:47,000 --> 00:03:51,000
And if you go back to just archive without a year,

73
00:03:51,000 --> 00:03:54,000
you see the fallback text instead.

74
00:03:54,000 --> 00:03:56,000
And that's already a first improvement,

75
00:03:57,000 --> 00:04:01,000
but now as a second step, I actually wanna make sure

76
00:04:01,000 --> 00:04:04,000
that instead of showing the years, I show the months

77
00:04:04,000 --> 00:04:06,000
for which we can select news

78
00:04:06,000 --> 00:04:09,000
if we did already select a year.

79
00:04:10,000 --> 00:04:14,000
So the links should be updated if a year was selected.

80
00:04:14,000 --> 00:04:17,000
Therefore, I'll change my links here

81
00:04:17,000 --> 00:04:20,000
from a constant to a variable,

82
00:04:20,000 --> 00:04:22,000
and define it a bit earlier,

83
00:04:22,000 --> 00:04:24,000
right here below the news maybe,

84
00:04:24,000 --> 00:04:28,000
and by default, I'll try to get the available news years,

85
00:04:29,000 --> 00:04:32,000
but then if we have a selected year

86
00:04:32,000 --> 00:04:34,000
but not a selected month,

87
00:04:35,000 --> 00:04:37,000
I want to update the links,

88
00:04:38,000 --> 00:04:40,000
and instead of setting them to the available years,

89
00:04:40,000 --> 00:04:42,000
I wanna set them to the available months

90
00:04:42,000 --> 00:04:45,000
for the selected year, which we can get

91
00:04:45,000 --> 00:04:48,000
with help of another utility function provided

92
00:04:48,000 --> 00:04:53,000
in that news.js file I provided earlier.

93
00:04:53,000 --> 00:04:58,000
We can call the get available news months function there,

94
00:04:59,000 --> 00:05:03,000
and this function then wants the selected year as an input,

95
00:05:03,000 --> 00:05:05,000
so we pass that to this function

96
00:05:05,000 --> 00:05:09,000
and that will then give us some month identifiers.

97
00:05:10,000 --> 00:05:14,000
Now, if we would leave it like this and save everything,

98
00:05:14,000 --> 00:05:19,000
we therefore would get these month numbers.

99
00:05:19,000 --> 00:05:24,000
And if we then click on a month, we see we get an error

100
00:05:24,000 --> 00:05:27,000
because the rest of the code is not adjusted yet,

101
00:05:27,000 --> 00:05:30,000
or we don't get an error but we see our fallback text

102
00:05:30,000 --> 00:05:35,000
because actually, the URL changed to archive/3,

103
00:05:35,000 --> 00:05:39,000
so we try to use 3 as an identifier for a year,

104
00:05:39,000 --> 00:05:43,000
and indeed, we have no news for the year 3.

105
00:05:44,000 --> 00:05:46,000
So it's not enough to just update the links here,

106
00:05:46,000 --> 00:05:48,000
we also need to update the code down there

107
00:05:48,000 --> 00:05:52,000
to render a different path for different links.

108
00:05:52,000 --> 00:05:56,000
So I'll actually add curly braces here

109
00:05:56,000 --> 00:06:00,000
and return my list item like this

110
00:06:00,000 --> 00:06:03,000
so that we can add more code in front of that

111
00:06:03,000 --> 00:06:05,000
inside of our map function,

112
00:06:06,000 --> 00:06:10,000
because I now want to dynamically derive the value

113
00:06:10,000 --> 00:06:13,000
for the ref prop on the link

114
00:06:13,000 --> 00:06:15,000
by checking whether we have a selected year,

115
00:06:15,000 --> 00:06:18,000
which means we're now showing the months,

116
00:06:18,000 --> 00:06:21,000
in which case the full path to which I wanna navigate

117
00:06:21,000 --> 00:06:26,000
is /archive/ the selected year,

118
00:06:26,000 --> 00:06:30,000
but then / the link value,

119
00:06:30,000 --> 00:06:32,000
so the identifier for the month.

120
00:06:34,000 --> 00:06:37,000
And it's only if we don't have a selected year

121
00:06:37,000 --> 00:06:40,000
that I want to show the standard links

122
00:06:40,000 --> 00:06:45,000
where I wanna navigate to /archive/link,

123
00:06:45,000 --> 00:06:47,000
where link will be a year,

124
00:06:49,000 --> 00:06:53,000
and it's then this ref value that should be used as a value

125
00:06:53,000 --> 00:06:55,000
for the ref prop down there.

126
00:06:56,000 --> 00:06:59,000
With that, if you save that,

127
00:06:59,000 --> 00:07:01,000
you now see that if you click on a month,

128
00:07:01,000 --> 00:07:06,000
we are indeed on /archive/2024/1,

129
00:07:07,000 --> 00:07:11,000
so at least the path is correct now,

130
00:07:11,000 --> 00:07:14,000
but of course, we're now back to this navigation,

131
00:07:14,000 --> 00:07:15,000
where we see the years

132
00:07:15,000 --> 00:07:19,000
and we still only see the fallback content.

133
00:07:19,000 --> 00:07:22,000
Now, we see the fallback content here

134
00:07:22,000 --> 00:07:25,000
because we're never trying to load the news

135
00:07:25,000 --> 00:07:27,000
for a year-month combination,

136
00:07:27,000 --> 00:07:29,000
and we should of course do that,

137
00:07:29,000 --> 00:07:32,000
so we should tweak the code in this page.js file

138
00:07:32,000 --> 00:07:35,000
and check if we have a selected year

139
00:07:35,000 --> 00:07:40,000
and we also have a selected month now.

140
00:07:40,000 --> 00:07:42,000
So we have both because, in that case,

141
00:07:42,000 --> 00:07:47,000
the news should be the news for year and month,

142
00:07:47,000 --> 00:07:52,000
and this is a utility function defined in that news.js file,

143
00:07:52,000 --> 00:07:55,000
which wants both a year and a month input,

144
00:07:55,000 --> 00:07:58,000
so it needs both the selected year

145
00:07:58,000 --> 00:08:02,000
and the selected month like this.

146
00:08:03,000 --> 00:08:06,000
And with that now, we see the news

147
00:08:06,000 --> 00:08:09,000
for the selected year-month combination.

148
00:08:10,000 --> 00:08:12,000
Now, I just also wanna make sure

149
00:08:12,000 --> 00:08:15,000
that this navigation here disappears

150
00:08:15,000 --> 00:08:18,000
if we have such a year-month combination,

151
00:08:18,000 --> 00:08:21,000
and I'll achieve this by also setting links

152
00:08:21,000 --> 00:08:22,000
to an empty array here

153
00:08:22,000 --> 00:08:26,000
after loading the news for a specific year and month.

154
00:08:28,000 --> 00:08:30,000
With that, the navigation is gone here,

155
00:08:30,000 --> 00:08:32,000
but if we go back, it reappears

156
00:08:32,000 --> 00:08:35,000
depending on what we're currently filtering for.

157
00:08:36,000 --> 00:08:39,000
And of course, we can click these news here

158
00:08:39,000 --> 00:08:41,000
and we're taken to the news detail page,

159
00:08:41,000 --> 00:08:45,000
so that also still works as it should.

160
00:08:45,000 --> 00:08:49,000
And that's how we can use this catch all feature here

161
00:08:49,000 --> 00:08:54,000
to define one page that will be active for different paths,

162
00:08:54,000 --> 00:08:56,000
which in our case here,

163
00:08:56,000 --> 00:09:01,000
allows us to show this filterable news list.

164
00:09:02,000 --> 00:09:06,000
And by the way, if you would try to add more segments here

165
00:09:06,000 --> 00:09:10,000
or unsupported segments, due to the way we built this,

166
00:09:10,000 --> 00:09:12,000
you would always see this fallback content,

167
00:09:12,000 --> 00:09:14,000
which I guess makes sense,

168
00:09:14,000 --> 00:09:17,000
though you can also change this behavior,

169
00:09:17,000 --> 00:09:19,000
and that's what we'll do next.