1
00:00:03,000 --> 00:00:04,930
We're now generating the list

2
00:00:04,930 --> 00:00:07,061
of available posts automatically

3
00:00:07,061 --> 00:00:09,391
based on the Markdown files present

4
00:00:09,391 --> 00:00:11,256
inside our "content" folder.

5
00:00:11,955 --> 00:00:13,452
But there's another place

6
00:00:13,452 --> 00:00:16,027
where we still have a manual list of posts:

7
00:00:16,027 --> 00:00:17,284
that's the Home page.

8
00:00:17,903 --> 00:00:20,084
In fact right now we're only showing

9
00:00:20,084 --> 00:00:22,022
a link to the "First Post" here.

10
00:00:22,582 --> 00:00:24,781
We could change the HomePage code

11
00:00:24,781 --> 00:00:27,113
to call our new "getSlugs" function

12
00:00:27,679 --> 00:00:29,436
and automatically generate

13
00:00:29,436 --> 00:00:32,408
a list of links for all the available posts.

14
00:00:32,975 --> 00:00:35,481
Now, we know that there's a way to pass

15
00:00:35,481 --> 00:00:37,602
some "props" to a page component.

16
00:00:37,602 --> 00:00:39,851
So here's a mini-challenge for you:

17
00:00:39,851 --> 00:00:41,778
why don't you pause this video

18
00:00:41,778 --> 00:00:44,348
and try to implement this step yourself?

19
00:00:45,106 --> 00:00:47,351
We want the HomePage to receive

20
00:00:47,351 --> 00:00:49,089
the list of post "slugs"

21
00:00:49,089 --> 00:00:51,696
returned by the "getSlugs" function,

22
00:00:51,696 --> 00:00:53,579
and just log them for now.

23
00:00:53,579 --> 00:00:55,824
Do you remember how to do that?

24
00:00:55,824 --> 00:00:58,286
I'll wait just a couple of seconds

25
00:00:58,286 --> 00:01:00,676
before moving on to the solution.

26
00:01:01,611 --> 00:01:03,476
Ok, so the way we can pass

27
00:01:03,476 --> 00:01:05,772
some "props" to a page component

28
00:01:05,772 --> 00:01:08,786
is by writing a "getStaticProps" function.

29
00:01:09,576 --> 00:01:11,395
Here we can call "getSlugs",

30
00:01:11,395 --> 00:01:12,955
that we can auto-import.

31
00:01:13,519 --> 00:01:15,529
And this will return the "slugs"

32
00:01:15,529 --> 00:01:18,103
but as a Promise that we need to "await".

33
00:01:18,665 --> 00:01:21,464
The "getStaticProps" function always returns

34
00:01:21,464 --> 00:01:23,182
an object with the "props",

35
00:01:23,745 --> 00:01:25,853
and in this case we want our "props"

36
00:01:25,853 --> 00:01:27,199
to contain the "slugs".

37
00:01:27,757 --> 00:01:29,013
Ok, let's save this file

38
00:01:29,013 --> 00:01:30,112
and see what happens.

39
00:01:30,890 --> 00:01:32,487
We'll need to reload the page

40
00:01:32,487 --> 00:01:34,414
for "getStaticProps" to get called.

41
00:01:34,969 --> 00:01:37,758
But you can see that the HomePage component

42
00:01:37,758 --> 00:01:39,573
received an array of "slugs"

43
00:01:39,573 --> 00:01:41,324
with the 3 available posts.

44
00:01:41,953 --> 00:01:44,701
Ok. At this point we could use those "slugs"

45
00:01:44,701 --> 00:01:47,324
to generate the list of links in the page,

46
00:01:47,886 --> 00:01:50,084
by repeating the list item element

47
00:01:50,084 --> 00:01:52,539
using a different "slug" on each Link.

48
00:01:52,539 --> 00:01:54,542
There's a small problem though.

49
00:01:55,171 --> 00:01:56,719
In addition to the slug,

50
00:01:56,719 --> 00:01:59,297
in the link we also show the post title,

51
00:01:59,297 --> 00:02:01,360
and we don't currently have this

52
00:02:01,360 --> 00:02:02,198
in our props.

53
00:02:02,891 --> 00:02:06,135
So just calling "getSlugs" is not enough.

54
00:02:06,635 --> 00:02:08,925
We'll need to write another function

55
00:02:08,925 --> 00:02:10,960
that gives us not only the slugs

56
00:02:10,960 --> 00:02:13,059
but also the titles of all posts.

57
00:02:13,686 --> 00:02:15,818
Let's create that new function,

58
00:02:15,818 --> 00:02:17,742
as usual exported and async,

59
00:02:17,742 --> 00:02:19,736
and let's call it "getPosts".

60
00:02:20,986 --> 00:02:23,760
Here we can start by getting all the "slugs",

61
00:02:23,760 --> 00:02:26,473
by calling our existing "getSlugs" function.

62
00:02:27,034 --> 00:02:28,338
And then we can build

63
00:02:28,338 --> 00:02:29,579
an array of "posts",

64
00:02:30,600 --> 00:02:32,166
that is what we want to return

65
00:02:32,166 --> 00:02:33,157
from this function.

66
00:02:33,709 --> 00:02:35,809
And to fill that array we want to

67
00:02:35,809 --> 00:02:37,590
iterate through each "slug".

68
00:02:38,709 --> 00:02:40,325
Given a "slug" we can get

69
00:02:40,325 --> 00:02:42,328
a full "post" object by calling

70
00:02:42,328 --> 00:02:44,137
our other existing function,

71
00:02:44,137 --> 00:02:45,301
that is "getPost".

72
00:02:45,994 --> 00:02:47,752
And at this point we can simply

73
00:02:47,752 --> 00:02:49,397
add this "post" to the array.

74
00:02:50,494 --> 00:02:51,832
Ok. Let's see if this works.

75
00:02:54,127 --> 00:02:56,227
In our HomePage we want to use

76
00:02:56,227 --> 00:02:58,537
"getPosts" instead of "getSlugs".

77
00:02:59,106 --> 00:03:01,106
And we'll get a list of "posts",

78
00:03:01,106 --> 00:03:03,356
that's what we'll pass in the props.

79
00:03:03,919 --> 00:03:05,223
If we reload the page,

80
00:03:05,723 --> 00:03:07,610
we can see that the HomePage

81
00:03:07,610 --> 00:03:09,700
received an array with 3 posts.

82
00:03:10,268 --> 00:03:12,132
And each "post" object has

83
00:03:12,132 --> 00:03:14,141
"body", "date", and "title".

84
00:03:14,712 --> 00:03:17,011
So that's not quite what we wanted,

85
00:03:17,011 --> 00:03:19,966
because we also need the "slug" for each post

86
00:03:19,966 --> 00:03:21,214
to generate a link,

87
00:03:21,214 --> 00:03:23,906
and that's missing from these properties.

88
00:03:24,603 --> 00:03:25,874
So let's go and modify

89
00:03:25,874 --> 00:03:28,012
our "getPosts" function a little bit,

90
00:03:28,012 --> 00:03:29,803
and when we "push" each element

91
00:03:30,418 --> 00:03:31,659
we can create an object

92
00:03:31,659 --> 00:03:33,007
that includes the "slug",

93
00:03:33,560 --> 00:03:34,464
and then expand

94
00:03:34,464 --> 00:03:36,390
all the other "post" properties,

95
00:03:36,390 --> 00:03:37,835
using the spread syntax.

96
00:03:38,455 --> 00:03:39,731
Let's save these changes

97
00:03:39,731 --> 00:03:40,475
and try again.

98
00:03:42,088 --> 00:03:44,168
If we look at an individual post now,

99
00:03:44,168 --> 00:03:46,136
you can see that we have the "slug"

100
00:03:46,136 --> 00:03:48,159
in addition to the other properties.

101
00:03:48,771 --> 00:03:50,835
We only really need "slug" and "title",

102
00:03:50,835 --> 00:03:52,898
so we could actually remove the "body",

103
00:03:53,450 --> 00:03:54,949
but that's an optimization

104
00:03:54,949 --> 00:03:56,851
that I'm not going to worry about

105
00:03:56,851 --> 00:03:57,831
for this example.

106
00:03:58,447 --> 00:04:00,351
Rather, let's go and make use

107
00:04:00,351 --> 00:04:02,124
of those "posts" we receive

108
00:04:02,124 --> 00:04:03,963
in the HomePage "props" now.

109
00:04:06,212 --> 00:04:08,670
We want to repeat each list item element,

110
00:04:09,170 --> 00:04:10,770
so let's take the "posts"

111
00:04:10,770 --> 00:04:12,114
and "map" each "post"

112
00:04:14,170 --> 00:04:15,578
to the JSX elements

113
00:04:15,578 --> 00:04:17,874
displaying a link to that post.

114
00:04:18,449 --> 00:04:19,863
We can reuse our existing

115
00:04:19,863 --> 00:04:20,884
list item element,

116
00:04:21,949 --> 00:04:23,886
but we want to replace the "href"

117
00:04:23,886 --> 00:04:25,001
with an expression.

118
00:04:26,915 --> 00:04:29,060
And I'm using a template literal

119
00:04:29,060 --> 00:04:31,205
so we can insert the "post.slug"

120
00:04:31,205 --> 00:04:32,478
inside this string.

121
00:04:33,112 --> 00:04:35,983
Finally we can display the "post.title"

122
00:04:35,983 --> 00:04:37,234
as the link text.

123
00:04:37,879 --> 00:04:40,227
And let's not forget to add a "key"

124
00:04:40,227 --> 00:04:41,100
to each item.

125
00:04:41,100 --> 00:04:43,113
As you probably know, in React

126
00:04:43,113 --> 00:04:45,596
whenever we have an array of elements

127
00:04:45,596 --> 00:04:48,146
we need to set a "key" on each element

128
00:04:48,146 --> 00:04:50,025
that uniquely identifies it.

129
00:04:50,860 --> 00:04:53,035
So here we could use the "post.slug",

130
00:04:53,035 --> 00:04:54,329
that should be unique.

131
00:04:54,887 --> 00:04:56,258
And with this, we can save,

132
00:04:56,820 --> 00:04:58,891
and we see three links in the page,

133
00:04:58,891 --> 00:05:00,607
one for every available post.

134
00:05:01,166 --> 00:05:02,872
Let's refresh the page, just in case,

135
00:05:03,832 --> 00:05:05,403
and test those links.

136
00:05:05,903 --> 00:05:07,608
The "Second Post" works fine,

137
00:05:08,303 --> 00:05:10,959
and so does the third one, so looks like

138
00:05:10,959 --> 00:05:13,084
our task for this video is done.

139
00:05:13,650 --> 00:05:15,121
And this is how we can

140
00:05:15,121 --> 00:05:17,661
generate a list of links automatically

141
00:05:17,661 --> 00:05:18,731
in our HomePage.

142
00:05:19,364 --> 00:05:22,457
We're simply using a "getStaticProps" function

143
00:05:22,457 --> 00:05:25,146
to populate the list of available posts.