1
00:00:00,000 --> 00:00:02,000
So now that we're getting our news

2
00:00:02,000 --> 00:00:04,000
from the database,

3
00:00:04,000 --> 00:00:08,000
I wanna migrate the entire NextJS application

4
00:00:08,000 --> 00:00:10,000
to only use that database,

5
00:00:10,000 --> 00:00:15,000
and not use that dummy-news file here.

6
00:00:15,000 --> 00:00:19,000
Therefore, I'll actually delete that file,

7
00:00:19,000 --> 00:00:24,000
and attached, you find an updated news.js file,

8
00:00:24,000 --> 00:00:27,000
which now gives you a bunch of functions

9
00:00:27,000 --> 00:00:29,000
that reach out to the database

10
00:00:29,000 --> 00:00:32,000
and get the data from there.

11
00:00:32,000 --> 00:00:35,000
Most of these functions, but not all of them,

12
00:00:35,000 --> 00:00:38,000
also have that delay added to them

13
00:00:38,000 --> 00:00:41,000
so that we simulate a slower database.

14
00:00:42,000 --> 00:00:47,000
And I'll start by migrating this slug page,

15
00:00:47,000 --> 00:00:51,000
so the NewsDetailPage which we got here.

16
00:00:52,000 --> 00:00:54,000
In there, I'm currently still trying

17
00:00:54,000 --> 00:00:56,000
to reach out to the dummy-news,

18
00:00:56,000 --> 00:00:58,000
and of course, that won't work

19
00:00:58,000 --> 00:01:00,000
because I removed that file.

20
00:01:01,000 --> 00:01:04,000
Instead, we can now get our newsItem

21
00:01:04,000 --> 00:01:07,000
by calling the getNewsItem function,

22
00:01:07,000 --> 00:01:12,000
which is imported from this updated news.js file.

23
00:01:12,000 --> 00:01:15,000
And this function wants the slug as an input

24
00:01:15,000 --> 00:01:18,000
and then returns a promise with that news data.

25
00:01:19,000 --> 00:01:21,000
Now, we have the slug here,

26
00:01:21,000 --> 00:01:23,000
but, of course, since we get back a promise,

27
00:01:23,000 --> 00:01:24,000
I wanna await this.

28
00:01:24,000 --> 00:01:28,000
And in order to use await, we need to add async here,

29
00:01:28,000 --> 00:01:33,000
which we can add because this is a React server component.

30
00:01:33,000 --> 00:01:36,000
We got no use client directive at the top.

31
00:01:37,000 --> 00:01:41,000
Now, that should actually be all that we need to do.

32
00:01:41,000 --> 00:01:43,000
That should be all that's required

33
00:01:43,000 --> 00:01:45,000
in order to use this function

34
00:01:45,000 --> 00:01:48,000
to fetch the newsItem from the database.

35
00:01:49,000 --> 00:01:53,000
If I save that, and I reload the /news page,

36
00:01:53,000 --> 00:01:56,000
and I click on such a news item,

37
00:01:56,000 --> 00:01:58,000
I do see that loading fallback again

38
00:01:58,000 --> 00:02:00,000
and then the news details here.

39
00:02:01,000 --> 00:02:03,000
And we see that loading fallback

40
00:02:03,000 --> 00:02:06,000
because we have that loading.js file here.

41
00:02:06,000 --> 00:02:08,000
And as I mentioned before,

42
00:02:08,000 --> 00:02:12,000
that will become active, you could say,

43
00:02:12,000 --> 00:02:16,000
whenever you are waiting for a component

44
00:02:16,000 --> 00:02:19,000
to return its content, to render its content.

45
00:02:19,000 --> 00:02:20,000
So whenever you're waiting

46
00:02:20,000 --> 00:02:24,000
for a component's promise to resolve,

47
00:02:24,000 --> 00:02:28,000
if it's a component that's in a sibling page.js file

48
00:02:28,000 --> 00:02:33,000
or some nested page.js file below the loading.js file.

49
00:02:34,000 --> 00:02:38,000
So here since slug is a nested route of the news route

50
00:02:38,000 --> 00:02:41,000
and the loading.js file is stored in the news folder,

51
00:02:41,000 --> 00:02:44,000
this nested NewsDetailPage

52
00:02:44,000 --> 00:02:48,000
will also use this loading.js file for its fallback.

53
00:02:49,000 --> 00:02:53,000
If we wanted to have a more specific loading fallback,

54
00:02:53,000 --> 00:02:57,000
we could, of course, also add a nested loading.js file here

55
00:02:57,000 --> 00:02:59,000
next to the page.js file.

56
00:03:00,000 --> 00:03:01,000
There, we can, of course,

57
00:03:01,000 --> 00:03:06,000
then also export a component function,

58
00:03:06,000 --> 00:03:10,000
LoadingNewsItem(), whatever,

59
00:03:10,000 --> 00:03:12,000
and then return a more specific text

60
00:03:12,000 --> 00:03:14,000
or something like this,

61
00:03:14,000 --> 00:03:16,000
like loading news item...

62
00:03:18,000 --> 00:03:21,000
And now it would be this fallback that's shown

63
00:03:21,000 --> 00:03:24,000
whilst we're waiting for those news details.

64
00:03:24,000 --> 00:03:27,000
So if I reload this news page,

65
00:03:27,000 --> 00:03:29,000
wait for the news and click on such a item,

66
00:03:29,000 --> 00:03:32,000
now I see that more specific fallback text.

67
00:03:32,000 --> 00:03:34,000
So that's also something you can do.

68
00:03:36,000 --> 00:03:39,000
Now, of course, I also have the nested image route here

69
00:03:39,000 --> 00:03:43,000
and there I also get my newsItem.

70
00:03:43,000 --> 00:03:45,000
So it's the same logic here.

71
00:03:45,000 --> 00:03:47,000
We wanna remove the dummy-news import

72
00:03:47,000 --> 00:03:50,000
and decorate this component with async.

73
00:03:50,000 --> 00:03:52,000
And then, we can get the news item

74
00:03:52,000 --> 00:03:54,000
by awaiting getNewsItem

75
00:03:55,000 --> 00:03:58,000
and pass the newsItemSlug to this function

76
00:03:58,000 --> 00:04:00,000
and we're good to go.

77
00:04:00,000 --> 00:04:01,000
And again, we could add

78
00:04:01,000 --> 00:04:05,000
a more specific nested loading.js file here

79
00:04:05,000 --> 00:04:08,000
to have a more specific loading fallback.

80
00:04:08,000 --> 00:04:11,000
But here I'm fine with the parent one.

81
00:04:11,000 --> 00:04:13,000
So the one that is defined one folder

82
00:04:13,000 --> 00:04:15,000
above this page.js file.

83
00:04:16,000 --> 00:04:18,000
So that should work.

84
00:04:18,000 --> 00:04:20,000
And of course, I also wanna update

85
00:04:20,000 --> 00:04:24,000
this interceptor route here, this one.

86
00:04:24,000 --> 00:04:27,000
And there we now have a problem

87
00:04:27,000 --> 00:04:30,000
because here I'm now using use client.

88
00:04:30,000 --> 00:04:32,000
And as you learned,

89
00:04:32,000 --> 00:04:35,000
we can only use async await on a component

90
00:04:35,000 --> 00:04:38,000
if it's not a client component.

91
00:04:39,000 --> 00:04:42,000
And therefore, migrating this component

92
00:04:42,000 --> 00:04:45,000
might've been a bit trickier

93
00:04:45,000 --> 00:04:48,000
than the other pages and components.

94
00:04:48,000 --> 00:04:50,000
But in order to migrate it,

95
00:04:50,000 --> 00:04:52,000
we should take a closer look at it

96
00:04:52,000 --> 00:04:56,000
and understand why it must be a client component.

97
00:04:56,000 --> 00:04:58,000
And here it must be a client component

98
00:04:58,000 --> 00:05:00,000
because I'm using useRouter

99
00:05:00,000 --> 00:05:03,000
and I need that for my backdrop

100
00:05:03,000 --> 00:05:06,000
so that clicking on the backdrop takes us back

101
00:05:06,000 --> 00:05:09,000
to the page we came from.

102
00:05:10,000 --> 00:05:13,000
So one thing we can do here in order to get rid

103
00:05:13,000 --> 00:05:16,000
of use client here is make this div,

104
00:05:16,000 --> 00:05:20,000
which uses the router a separate component,

105
00:05:20,000 --> 00:05:23,000
which we then use inside of this page component.

106
00:05:24,000 --> 00:05:26,000
That way that page component

107
00:05:26,000 --> 00:05:28,000
can become a server component again,

108
00:05:28,000 --> 00:05:31,000
and we can use async wait.

109
00:05:31,000 --> 00:05:35,000
It's essentially a similar approach we took way earlier

110
00:05:35,000 --> 00:05:39,000
in the course when we outsourced the NavLink

111
00:05:39,000 --> 00:05:43,000
into its own component so that that was a client component

112
00:05:43,000 --> 00:05:46,000
and the header could stay a server component.

113
00:05:47,000 --> 00:05:52,000
Now I'll do the same thing here with my modal backdrop.

114
00:05:52,000 --> 00:05:54,000
Therefore, I'll add a new component

115
00:05:54,000 --> 00:05:59,000
in the components folder and I'll name it modal-backdrop.js

116
00:06:00,000 --> 00:06:05,000
and in there export my ModalBackdrop component function

117
00:06:06,000 --> 00:06:08,000
and add use client at the top here

118
00:06:08,000 --> 00:06:11,000
because I know I'll need it

119
00:06:11,000 --> 00:06:15,000
because I wanna use useRouter from next navigation

120
00:06:18,000 --> 00:06:22,000
and then return that backdrop from that page.js file.

121
00:06:23,000 --> 00:06:26,000
So this div here, I'll cut it

122
00:06:27,000 --> 00:06:30,000
and move that into my modal-backdrop.js file.

123
00:06:32,000 --> 00:06:33,000
And then in the page.js file,

124
00:06:33,000 --> 00:06:36,000
I'll use the ModalBackdrop here.

125
00:06:38,000 --> 00:06:41,000
That way we can now actually remove

126
00:06:41,000 --> 00:06:45,000
the useRouter usage here, remove this import

127
00:06:45,000 --> 00:06:47,000
and remove the use client directive.

128
00:06:49,000 --> 00:06:52,000
And now we can again add async here

129
00:06:52,000 --> 00:06:56,000
because now we have a React Server component again

130
00:06:56,000 --> 00:06:58,000
and remove the dummy-news import

131
00:06:58,000 --> 00:07:01,000
and instead get our newsItem here

132
00:07:01,000 --> 00:07:02,000
by calling getNewsItem

133
00:07:04,000 --> 00:07:09,000
and passing this newsItemSlug to it.

134
00:07:09,000 --> 00:07:11,000
And of course, by adding await here.

135
00:07:13,000 --> 00:07:16,000
And that way we should be good to go again.

136
00:07:16,000 --> 00:07:19,000
If I now click on that image, it's intercepted,

137
00:07:19,000 --> 00:07:22,000
and then I see this modal.

138
00:07:22,000 --> 00:07:23,000
Now, of course, we see

139
00:07:23,000 --> 00:07:26,000
that loading news item folder here temporarily

140
00:07:26,000 --> 00:07:29,000
until this is loaded but that's not necessarily bad

141
00:07:29,000 --> 00:07:31,000
because again, it tells us that something's happening.

142
00:07:33,000 --> 00:07:35,000
Now, one thing you might encounter here,

143
00:07:35,000 --> 00:07:38,000
if you then reload this interceptor page

144
00:07:38,000 --> 00:07:40,000
is that you then get a not found error.

145
00:07:40,000 --> 00:07:42,000
And we get this not found error

146
00:07:42,000 --> 00:07:46,000
because no default component was found for a parallel route.

147
00:07:48,000 --> 00:07:49,000
And this error can

148
00:07:49,000 --> 00:07:53,000
and should be fixed by renaming this page.js file,

149
00:07:53,000 --> 00:07:58,000
which is in the @modal folder here to default.js.

150
00:08:00,000 --> 00:08:04,000
With that, if you then also restart the development server

151
00:08:05,000 --> 00:08:07,000
and you then reload this page, you'll see

152
00:08:07,000 --> 00:08:10,000
that now the image is loaded in full screen mode.

153
00:08:11,000 --> 00:08:15,000
So with that, we did now finish the news-related part here,

154
00:08:15,000 --> 00:08:19,000
and we also saw how we can fix this problem

155
00:08:19,000 --> 00:08:22,000
of having a client component in a place

156
00:08:22,000 --> 00:08:23,000
where we don't want one

157
00:08:23,000 --> 00:08:26,000
by outsourcing the client-dependent code

158
00:08:26,000 --> 00:08:29,000
into a smaller child component.

159
00:08:29,000 --> 00:08:34,000
And by therefore turning the overall bigger page component

160
00:08:34,000 --> 00:08:36,000
into a server component again.

161
00:08:37,000 --> 00:08:38,000
Now with that, we can move

162
00:08:38,000 --> 00:08:40,000
to the archive part here

163
00:08:40,000 --> 00:08:43,000
and there maybe start with the latest page,

164
00:08:43,000 --> 00:08:45,000
the default page here.

165
00:08:46,000 --> 00:08:49,000
In there, I'm calling getLatestNews, and that's fine.

166
00:08:49,000 --> 00:08:52,000
We can continue using this function,

167
00:08:52,000 --> 00:08:55,000
but it's now an async function

168
00:08:55,000 --> 00:08:57,000
with an arbitrary delay in there.

169
00:08:57,000 --> 00:09:01,000
So again, we should use async await here

170
00:09:02,000 --> 00:09:04,000
and that would be all.

171
00:09:04,000 --> 00:09:08,000
However, it might also be nice to show some loading fallback

172
00:09:08,000 --> 00:09:12,000
and therefore here next to this layout.js file,

173
00:09:12,000 --> 00:09:14,000
I'll add a loading.js file

174
00:09:14,000 --> 00:09:19,000
and export my function, which I'll call ArchiveLoading

175
00:09:20,000 --> 00:09:24,000
and return some loading fallback content.

176
00:09:26,000 --> 00:09:30,000
Now, we should also go to the other parallel route,

177
00:09:30,000 --> 00:09:34,000
this filter route here and this page.js file.

178
00:09:34,000 --> 00:09:36,000
And of course, here again,

179
00:09:36,000 --> 00:09:39,000
we wanna continue using all these functions,

180
00:09:39,000 --> 00:09:41,000
which I am already using,

181
00:09:41,000 --> 00:09:45,000
but most of these functions are now async functions.

182
00:09:45,000 --> 00:09:46,000
This one actually isn't,

183
00:09:46,000 --> 00:09:50,000
but most of the other functions are, for example,

184
00:09:50,000 --> 00:09:54,000
also the getAvailableNewsYears function is one.

185
00:09:56,000 --> 00:10:00,000
Therefore, we again should add async here in front

186
00:10:00,000 --> 00:10:02,000
of this function keyword

187
00:10:03,000 --> 00:10:07,000
and then await this, await this.

188
00:10:08,000 --> 00:10:11,000
This function then actually doesn't return a promise,

189
00:10:11,000 --> 00:10:13,000
so we don't need await here,

190
00:10:13,000 --> 00:10:17,000
but we will need it again here for getNewsForYearAndMonth.

191
00:10:20,000 --> 00:10:22,000
And that again should be all.

192
00:10:22,000 --> 00:10:25,000
It's really straightforward,

193
00:10:25,000 --> 00:10:28,000
though here I'm actually also using these functions.

194
00:10:28,000 --> 00:10:33,000
So again, there we should also await this.

195
00:10:33,000 --> 00:10:36,000
And actually, I'll therefore outsource this

196
00:10:36,000 --> 00:10:39,000
and get my availableYears here

197
00:10:39,000 --> 00:10:42,000
by awaiting getAvailableYears

198
00:10:42,000 --> 00:10:46,000
so that I keep my if statement lean and simple.

199
00:10:46,000 --> 00:10:49,000
And then this here doesn't return a promise.

200
00:10:49,000 --> 00:10:50,000
So we can keep it here.

201
00:10:50,000 --> 00:10:53,000
We could also outsource it into a separate constant

202
00:10:53,000 --> 00:10:56,000
or variable, but I'll just keep that code as it is.

203
00:10:56,000 --> 00:10:58,000
But that should then be all.

204
00:10:58,000 --> 00:11:00,000
And if we now save that

205
00:11:00,000 --> 00:11:02,000
and we go to the archive area,

206
00:11:02,000 --> 00:11:05,000
we see that loading fallback here

207
00:11:05,000 --> 00:11:08,000
and then the different data pops in,

208
00:11:08,000 --> 00:11:09,000
as you can tell.

209
00:11:10,000 --> 00:11:14,000
However, as I try to load the data for a year,

210
00:11:14,000 --> 00:11:18,000
it doesn't seem like anything's happening initially.

211
00:11:18,000 --> 00:11:21,000
And then after a short while, I get an error

212
00:11:21,000 --> 00:11:23,000
that we have an invalid filter

213
00:11:25,000 --> 00:11:28,000
and we're getting this error here

214
00:11:28,000 --> 00:11:30,000
because of this if check here.

215
00:11:31,000 --> 00:11:35,000
In there, I am converting the selectedYear

216
00:11:35,000 --> 00:11:38,000
and selectedMonth to numbers,

217
00:11:38,000 --> 00:11:41,000
and I'm then checking whether the availableYears

218
00:11:41,000 --> 00:11:46,000
or the availableMonths include that number in that array.

219
00:11:46,000 --> 00:11:50,000
And previously with the old code where I used

220
00:11:50,000 --> 00:11:54,000
that dummy-news array, that code was correct.

221
00:11:54,000 --> 00:11:58,000
But now where we're fetching data from the database,

222
00:11:58,000 --> 00:12:01,000
the availableYears and also the availableMonths

223
00:12:01,000 --> 00:12:04,000
will all be string values.

224
00:12:04,000 --> 00:12:07,000
And therefore, checking whether these arrays

225
00:12:07,000 --> 00:12:11,000
of strings include some numbers will fail.

226
00:12:11,000 --> 00:12:13,000
The solution therefore simply is to get rid

227
00:12:13,000 --> 00:12:15,000
of these plus signs here

228
00:12:15,000 --> 00:12:19,000
to not convert these values from strings to numbers.

229
00:12:20,000 --> 00:12:22,000
And with that, we should be good to go.

230
00:12:22,000 --> 00:12:26,000
If we now reload here, we see the loading fallback.

231
00:12:26,000 --> 00:12:29,000
And then after a while, I see the articles

232
00:12:29,000 --> 00:12:30,000
for the selected year.

233
00:12:30,000 --> 00:12:34,000
And then once I click on a month, also eventually,

234
00:12:34,000 --> 00:12:37,000
the ones for a selected month.

235
00:12:37,000 --> 00:12:40,000
Though, of course, that takes a while to load

236
00:12:40,000 --> 00:12:44,000
and we got no feedback whilst we're waiting.

237
00:12:44,000 --> 00:12:47,000
I click on 05 and then nothing happens.

238
00:12:47,000 --> 00:12:52,000
And only after a while do we see the article for that month.

239
00:12:53,000 --> 00:12:57,000
So that is something we should improve and we will improve.

240
00:12:57,000 --> 00:13:00,000
But what's important to take away here

241
00:13:00,000 --> 00:13:04,000
is that we did now migrate the entire application

242
00:13:04,000 --> 00:13:07,000
to use that local database

243
00:13:07,000 --> 00:13:09,000
and show loading fallbacks whilst we're waiting

244
00:13:09,000 --> 00:13:13,000
for the data, and that we therefore now improve

245
00:13:13,000 --> 00:13:17,000
this NextJS application and made it a bit more realistic.