1
00:00:01,000 --> 00:00:04,000
So let's now start wiring up

2
00:00:04,000 --> 00:00:05,000
our PostItem

3
00:00:05,000 --> 00:00:08,000
to the PostsGrid, and let's add some dummy data.

4
00:00:08,000 --> 00:00:11,000
To wire it up, keep in mind that in the PostsGrid

5
00:00:11,000 --> 00:00:14,000
we get posts through props,

6
00:00:14,000 --> 00:00:17,000
and that will probably be an array full of objects

7
00:00:17,000 --> 00:00:19,000
that describe a post.

8
00:00:19,000 --> 00:00:23,000
So assumption is that a individual post and that list

9
00:00:23,000 --> 00:00:26,000
has all the data PostItem needs.

10
00:00:26,000 --> 00:00:27,000
We can make that assumption

11
00:00:27,000 --> 00:00:30,000
because we are writing that code.

12
00:00:30,000 --> 00:00:31,000
So we'll just have to make sure

13
00:00:31,000 --> 00:00:33,000
that this the case later.

14
00:00:34,000 --> 00:00:38,000
Now, PostItem, this component, once a PostProp,

15
00:00:39,000 --> 00:00:41,000
hence now in PostsGrid,

16
00:00:41,000 --> 00:00:43,000
we can add that PostProp here,

17
00:00:43,000 --> 00:00:47,000
and pass the post which we get here, in this map method

18
00:00:47,000 --> 00:00:50,000
into PostItem through that PostProp.

19
00:00:51,000 --> 00:00:55,000
Now we expose that data to PostsItem.

20
00:00:55,000 --> 00:00:58,000
Now, since we map, we should also add to key prop

21
00:00:58,000 --> 00:01:01,000
that's required by reactjs

22
00:01:01,000 --> 00:01:04,000
to efficiently render an update that list,

23
00:01:04,000 --> 00:01:07,000
and we can set this to some unique identifier,

24
00:01:07,000 --> 00:01:10,000
and every post will have a slug property

25
00:01:10,000 --> 00:01:13,000
which is the unique identifier of a given post,

26
00:01:13,000 --> 00:01:16,000
and therefore that is what we can use here.

27
00:01:16,000 --> 00:01:19,000
Now we got that, now we need some dummy data.

28
00:01:19,000 --> 00:01:22,000
For this, let's first of all, go to Featured Posts

29
00:01:22,000 --> 00:01:24,000
in the homepage folder,

30
00:01:24,000 --> 00:01:29,000
because that is where we now wanna use that PostsGrid.

31
00:01:30,000 --> 00:01:33,000
So in here we want to output PostsGrid,

32
00:01:33,000 --> 00:01:34,000
and for this you should make sure

33
00:01:34,000 --> 00:01:39,000
that you add the import two PostsGrid to that component.

34
00:01:39,000 --> 00:01:43,000
And now the there we need to set the PostProp

35
00:01:43,000 --> 00:01:44,000
on PostsGrid.

36
00:01:45,000 --> 00:01:49,000
We need to set that because in the PostsGrid component,

37
00:01:49,000 --> 00:01:52,000
we are extracting that PostProp here.

38
00:01:53,000 --> 00:01:56,000
So we wanna se this, and in Featured Posts,

39
00:01:56,000 --> 00:02:01,000
I actually also expect that I get my posts data from props.

40
00:02:02,000 --> 00:02:05,000
Now that's a long chain of props, and we could,

41
00:02:05,000 --> 00:02:08,000
therefore of course also kind of consider

42
00:02:08,000 --> 00:02:10,000
using context or redux

43
00:02:10,000 --> 00:02:12,000
to avoid this prop-drilling,

44
00:02:12,000 --> 00:02:15,000
but here I'm actually fine with it

45
00:02:15,000 --> 00:02:18,000
because it is a chain that makes a lot of sense,

46
00:02:18,000 --> 00:02:20,000
and a PostsGrid for example,

47
00:02:20,000 --> 00:02:24,000
shouldn't be tied to one specific context anyways,

48
00:02:24,000 --> 00:02:28,000
because we will reuse that component in different places,

49
00:02:28,000 --> 00:02:30,000
so that should definitely receive its data

50
00:02:30,000 --> 00:02:33,000
through props instead of context,

51
00:02:33,000 --> 00:02:35,000
and hence I'll leave it like this.

52
00:02:35,000 --> 00:02:37,000
Therefore, in Featured Post,

53
00:02:37,000 --> 00:02:41,000
I'll sets the PostProp on PostsGrid

54
00:02:41,000 --> 00:02:43,000
to prop dot posts.

55
00:02:43,000 --> 00:02:46,000
And yeah, that's a lot of posts,

56
00:02:46,000 --> 00:02:49,000
but that is what this application is about in the end.

57
00:02:50,000 --> 00:02:53,000
So now Featured Posts also has a PostProp

58
00:02:53,000 --> 00:02:55,000
that needs to be populated.

59
00:02:55,000 --> 00:02:58,000
And let's therefore now finally go to the place

60
00:02:58,000 --> 00:03:03,000
where the prop chain will end, and that is index.js file

61
00:03:03,000 --> 00:03:05,000
in the pages folder.

62
00:03:05,000 --> 00:03:09,000
Here below Hero, I wanna output my Featured Posts,

63
00:03:09,000 --> 00:03:11,000
and therefore you need to make sure

64
00:03:11,000 --> 00:03:14,000
that you do add that import

65
00:03:14,000 --> 00:03:17,000
to import the Featured Posts component.

66
00:03:17,000 --> 00:03:20,000
And here we now set our PostProp.

67
00:03:21,000 --> 00:03:22,000
Now later,

68
00:03:22,000 --> 00:03:26,000
we will get posts with get static props,

69
00:03:26,000 --> 00:03:30,000
when we have actual post which we load.

70
00:03:30,000 --> 00:03:32,000
For them moment we don't have that,

71
00:03:32,000 --> 00:03:34,000
for the moment to just see something,

72
00:03:34,000 --> 00:03:35,000
I'll add

73
00:03:35,000 --> 00:03:36,000
DUMMY

74
00:03:36,000 --> 00:03:39,000
POSTS array here,

75
00:03:39,000 --> 00:03:42,000
which I'll set as a value for the PostProp,

76
00:03:42,000 --> 00:03:45,000
and we'll then replace that later.

77
00:03:45,000 --> 00:03:47,000
Now, DUMMY POSTS will be an array

78
00:03:47,000 --> 00:03:52,000
full of DUMMY POSTS data, so full of DUMMY POSTS objects.

79
00:03:52,000 --> 00:03:55,000
And now every post object here,

80
00:03:55,000 --> 00:03:58,000
showed in the end half these properties

81
00:03:58,000 --> 00:04:01,000
because that's what we rely on later.

82
00:04:01,000 --> 00:04:05,000
We wanna have a title image, excerpt, date and slug,

83
00:04:07,000 --> 00:04:09,000
hence here in index JS we wanna add to that.

84
00:04:09,000 --> 00:04:14,000
We wanna add a slug, title, an image, an expert,

85
00:04:14,000 --> 00:04:17,000
and our date.

86
00:04:17,000 --> 00:04:20,000
So all those properties

87
00:04:20,000 --> 00:04:21,000
we are relying on

88
00:04:21,000 --> 00:04:23,000
here in PostItem,

89
00:04:24,000 --> 00:04:27,000
five prop there, five properties here.

90
00:04:28,000 --> 00:04:29,000
Now, since it's dummy data,

91
00:04:29,000 --> 00:04:32,000
we can come up with any slug and any values

92
00:04:32,000 --> 00:04:34,000
in general we want.

93
00:04:34,000 --> 00:04:37,000
The slug should be a text with the words

94
00:04:37,000 --> 00:04:40,000
separated by dashes and no special characters.

95
00:04:40,000 --> 00:04:43,000
So here I'll have like a slug of

96
00:04:43,000 --> 00:04:44,000
getting-started

97
00:04:46,000 --> 00:04:47,000
with nextjs,

98
00:04:48,000 --> 00:04:50,000
and then I'll add a title off,

99
00:04:50,000 --> 00:04:52,000
Getting Started

100
00:04:52,000 --> 00:04:54,000
with NextJS,

101
00:04:54,000 --> 00:04:56,000
so that could be a block post title,

102
00:04:56,000 --> 00:04:58,000
then a image,

103
00:04:58,000 --> 00:05:00,000
which I'll name,

104
00:05:00,000 --> 00:05:04,000
getting-started-nextjs, just like this,

105
00:05:04,000 --> 00:05:06,000
and then(indistinct) the dot png.

106
00:05:06,000 --> 00:05:09,000
I will soon provide this file to you,

107
00:05:09,000 --> 00:05:11,000
so it would be half this image.

108
00:05:11,000 --> 00:05:15,000
Then add an excerpt, where I say something like,

109
00:05:15,000 --> 00:05:17,000
NextJS is

110
00:05:17,000 --> 00:05:22,000
the React framework for production,

111
00:05:22,000 --> 00:05:27,000
it makes building fullstack React apps and sites

112
00:05:27,000 --> 00:05:27,000
a

113
00:05:27,000 --> 00:05:28,000
breeze

114
00:05:28,000 --> 00:05:31,000
and ships with built-in

115
00:05:31,000 --> 00:05:33,000
server-side rendering.

116
00:05:34,000 --> 00:05:36,000
Now you can come up with any texts you want,

117
00:05:36,000 --> 00:05:38,000
it just shouldn't be too long

118
00:05:38,000 --> 00:05:41,000
because it's just a short review text in the end.

119
00:05:42,000 --> 00:05:44,000
And then I'll add a date,

120
00:05:44,000 --> 00:05:46,000
which should be in the format of

121
00:05:46,000 --> 00:05:47,000
year dash,

122
00:05:47,000 --> 00:05:50,000
month dash day.

123
00:05:50,000 --> 00:05:54,000
That will be a date which then later can be parsed and used

124
00:05:54,000 --> 00:05:56,000
by the date constructor.

125
00:05:58,000 --> 00:06:00,000
So that's some dummy data,

126
00:06:00,000 --> 00:06:02,000
and I'll add more than one posts here.

127
00:06:02,000 --> 00:06:05,000
I'll repeat this four times,

128
00:06:05,000 --> 00:06:08,000
and I'll just add it to the slug slightly,

129
00:06:08,000 --> 00:06:12,000
so getting started with nextjs2, and three, and four,

130
00:06:12,000 --> 00:06:14,000
so that this is unique,

131
00:06:14,000 --> 00:06:17,000
and all the other data is duplicated for the moment

132
00:06:17,000 --> 00:06:20,000
just because I don't wanna waste time

133
00:06:20,000 --> 00:06:21,000
setting up dummy data here,

134
00:06:21,000 --> 00:06:25,000
we'll just need this to see of our grid works correctly.

135
00:06:25,000 --> 00:06:27,000
So that is what it is,

136
00:06:27,000 --> 00:06:29,000
that is the DUMMY POSTS I wanna work with,

137
00:06:29,000 --> 00:06:32,000
and that's the DUMMY POSTS parsed to Featured Posts.

138
00:06:33,000 --> 00:06:37,000
Now, in order to see anything on the screen

139
00:06:37,000 --> 00:06:41,000
we now need that image, which we are relying on.

140
00:06:41,000 --> 00:06:44,000
And I do provide a dummy image for you,

141
00:06:44,000 --> 00:06:47,000
you can use that image, which you find attached,

142
00:06:47,000 --> 00:06:51,000
the getting-started nextjs png file.

143
00:06:51,000 --> 00:06:52,000
You can download that

144
00:06:52,000 --> 00:06:56,000
and add it in your public images posts folder,

145
00:06:56,000 --> 00:07:01,000
there at this getting-started nextjs png file,

146
00:07:01,000 --> 00:07:04,000
which has a little dummy file I created for you,

147
00:07:04,000 --> 00:07:07,000
of course, you can also add your own files.

148
00:07:07,000 --> 00:07:10,000
And now double check that the value

149
00:07:10,000 --> 00:07:12,000
you set up for the image property here

150
00:07:12,000 --> 00:07:14,000
in the DUMMY POSTS data,

151
00:07:14,000 --> 00:07:17,000
is equal to that image file name you just added,

152
00:07:17,000 --> 00:07:19,000
that you have no typo here.

153
00:07:20,000 --> 00:07:23,000
With that, we should have everything we need.

154
00:07:23,000 --> 00:07:26,000
If we now save that I get an error,

155
00:07:26,000 --> 00:07:27,000
if I reload,

156
00:07:27,000 --> 00:07:32,000
because a forgot to set the href property, makes sense.

157
00:07:32,000 --> 00:07:35,000
In a PostItem, I'm wrapping the entire post

158
00:07:35,000 --> 00:07:38,000
in the end with a link, but I'm not linking anywhere.

159
00:07:38,000 --> 00:07:41,000
I forgot to set my href.

160
00:07:41,000 --> 00:07:45,000
And of course we wanna set the href here.

161
00:07:45,000 --> 00:07:46,000
Now, what should be the link,

162
00:07:46,000 --> 00:07:49,000
or the path this link leads to though?

163
00:07:50,000 --> 00:07:51,000
It showed in the end

164
00:07:51,000 --> 00:07:55,000
be the individual page board this selected post.

165
00:07:56,000 --> 00:07:59,000
So we wanna load this slug page here at the end

166
00:07:59,000 --> 00:08:02,000
for that concrete post slug.

167
00:08:03,000 --> 00:08:07,000
Hence here, we wanna derive that path dynamically,

168
00:08:07,000 --> 00:08:10,000
and I'll do that by adding a separate constant,

169
00:08:10,000 --> 00:08:11,000
linkPath,

170
00:08:11,000 --> 00:08:14,000
which again is a template literal

171
00:08:14,000 --> 00:08:17,000
where we start with, slash posts

172
00:08:17,000 --> 00:08:20,000
because that slug file is in the posts folder,

173
00:08:20,000 --> 00:08:22,000
in the pages folder,

174
00:08:22,000 --> 00:08:24,000
and then slash,

175
00:08:24,000 --> 00:08:26,000
and then some dynamic value.

176
00:08:26,000 --> 00:08:28,000
Here we wanna use the slug then

177
00:08:28,000 --> 00:08:30,000
because that's luck, that unique,

178
00:08:30,000 --> 00:08:33,000
human and search engine friendly text

179
00:08:33,000 --> 00:08:37,000
that should be part of the URL.

180
00:08:37,000 --> 00:08:41,000
And then it's this linkPath which we use here.

181
00:08:41,000 --> 00:08:43,000
So that is something we have to add.

182
00:08:43,000 --> 00:08:47,000
And once we do add this, we do render Featured Posts.

183
00:08:47,000 --> 00:08:51,000
Now the cards are showing up, the images not though.

184
00:08:51,000 --> 00:08:53,000
And that makes sense,

185
00:08:53,000 --> 00:08:57,000
If we take another look at PostItem and the imagePath

186
00:08:57,000 --> 00:08:59,000
we're constructing here.

187
00:08:59,000 --> 00:09:03,000
I point at images posts and then the slug of the posts

188
00:09:03,000 --> 00:09:07,000
as an extra sub folder, and then the image file name.

189
00:09:08,000 --> 00:09:12,000
Now I have the image directly in the post folder,

190
00:09:12,000 --> 00:09:15,000
so that extra slug folder in between is missing.

191
00:09:15,000 --> 00:09:17,000
We should add it.

192
00:09:17,000 --> 00:09:20,000
We should add it, we go back to indexjs,

193
00:09:20,000 --> 00:09:22,000
and then add our slugs here,

194
00:09:22,000 --> 00:09:27,000
which we have in the dummy data as sub folders in posts.

195
00:09:27,000 --> 00:09:31,000
So I'll add a sub folder with a slug of

196
00:09:31,000 --> 00:09:33,000
getting-started-with-nextjs,

197
00:09:33,000 --> 00:09:35,000
and I'll drag the image in there.

198
00:09:38,000 --> 00:09:42,000
And I'll repeat that for my other DUMMY POSTS,

199
00:09:42,000 --> 00:09:43,000
of course it's always the same image

200
00:09:43,000 --> 00:09:45,000
but still to be able to render this,

201
00:09:45,000 --> 00:09:49,000
I'll add more sub folders in the posts folder.

202
00:09:52,000 --> 00:09:54,000
So not inside of the other slug folder

203
00:09:54,000 --> 00:09:58,000
but in the posts folder, there, I will add more sub folders

204
00:10:00,000 --> 00:10:04,000
with those different slug names as a folder names,

205
00:10:04,000 --> 00:10:07,000
because data's required to find the image correctly.

206
00:10:07,000 --> 00:10:10,000
And then we can drag and drop the image

207
00:10:10,000 --> 00:10:14,000
by copying it into those other select sub folders.

208
00:10:14,000 --> 00:10:16,000
So then we have to same image, four times

209
00:10:16,000 --> 00:10:20,000
in those different sub folders for those different slugs.

210
00:10:21,000 --> 00:10:24,000
Now the image should be fetched correctly.

211
00:10:24,000 --> 00:10:29,000
If we save this again and load low closed (indistinct),

212
00:10:29,000 --> 00:10:30,000
we see it.

213
00:10:31,000 --> 00:10:35,000
Now what we also see, is that here on this big screen,

214
00:10:35,000 --> 00:10:37,000
it's a little bit too small.

215
00:10:37,000 --> 00:10:40,000
If I open up the dev tools and I resized this,

216
00:10:40,000 --> 00:10:45,000
you see it doesn't really fit my card that nicely,

217
00:10:45,000 --> 00:10:47,000
it doesn't really fit in there,

218
00:10:47,000 --> 00:10:50,000
and that's not the behavior I want.

219
00:10:50,000 --> 00:10:53,000
To fix this, we can go back to the PostItem

220
00:10:53,000 --> 00:10:55,000
where we rendered that image,

221
00:10:55,000 --> 00:10:58,000
and add the special layout prop.

222
00:10:58,000 --> 00:11:01,000
Now I mentioned that we have a couple of values

223
00:11:01,000 --> 00:11:04,000
we can set there, and the default is intrinsic,

224
00:11:04,000 --> 00:11:06,000
which means, the width and height we specify here,

225
00:11:06,000 --> 00:11:09,000
this is the width and height which is being used.

226
00:11:09,000 --> 00:11:12,000
Now we wanna set this to responsive instead.

227
00:11:12,000 --> 00:11:13,000
By setting this,

228
00:11:13,000 --> 00:11:17,000
it will fill out the entire surrounding container,

229
00:11:17,000 --> 00:11:19,000
this div in this case,

230
00:11:19,000 --> 00:11:21,000
which has certain CSS styles

231
00:11:21,000 --> 00:11:23,000
that control its width and height,

232
00:11:23,000 --> 00:11:26,000
and then it will shrink and grow together

233
00:11:26,000 --> 00:11:28,000
with that container.

234
00:11:28,000 --> 00:11:30,000
So if you set layout to responsive

235
00:11:30,000 --> 00:11:31,000
now that looks much better.

236
00:11:31,000 --> 00:11:34,000
Now we take the full available space

237
00:11:34,000 --> 00:11:36,000
as we moved this around.

238
00:11:37,000 --> 00:11:38,000
Now, of course, it's up to you

239
00:11:38,000 --> 00:11:40,000
how exactly that should be styled.

240
00:11:40,000 --> 00:11:43,000
I just have some basic starting styles here.

241
00:11:43,000 --> 00:11:46,000
You can, of course, fine tuned it to change the size,

242
00:11:46,000 --> 00:11:50,000
and fine tuned it to your exact requirements.

243
00:11:50,000 --> 00:11:52,000
I have some basic style here though,

244
00:11:52,000 --> 00:11:55,000
and as you see that doesn't look too bad.

245
00:11:55,000 --> 00:11:57,000
It is growing and shrinking,

246
00:11:57,000 --> 00:12:01,000
and we take advantage of this automatically optimized image.

247
00:12:02,000 --> 00:12:06,000
So with that we have our Featured Posts being rendered here,

248
00:12:06,000 --> 00:12:10,000
and therefore the starting page of our blog is finished,

249
00:12:10,000 --> 00:12:14,000
with that's dummy data, but better than nothing.

250
00:12:14,000 --> 00:12:18,000
Now we can move on to the other pages and work on those.

251
00:12:18,000 --> 00:12:20,000
And I will move on to the posts page now,

252
00:12:20,000 --> 00:12:23,000
where I wanna render all my posts.