1
00:00:02,000 --> 00:00:03,000
So let's continue working

2
00:00:03,000 --> 00:00:05,000
on that index.js file,

3
00:00:05,000 --> 00:00:08,000
in the posts folder on the AllPostsPage.

4
00:00:09,000 --> 00:00:10,000
Here the goal is simple,

5
00:00:10,000 --> 00:00:13,000
I wanna output all my posts.

6
00:00:13,000 --> 00:00:16,000
So later once we don't just have dummy posts,

7
00:00:16,000 --> 00:00:18,000
but actual data source,

8
00:00:18,000 --> 00:00:21,000
we will fetch all posts for this page,

9
00:00:21,000 --> 00:00:25,000
and then output them in some way here.

10
00:00:25,000 --> 00:00:27,000
Now, for the actual JSX code,

11
00:00:27,000 --> 00:00:30,000
for the detailed HTML structure,

12
00:00:30,000 --> 00:00:32,000
I'll again create a separate component,

13
00:00:32,000 --> 00:00:34,000
to keep my page component lean,

14
00:00:34,000 --> 00:00:37,000
and focused on data fetching.

15
00:00:37,000 --> 00:00:39,000
And therefore in the posts folder,

16
00:00:39,000 --> 00:00:43,000
in the components folder, I'll add an all-posts.js file.

17
00:00:44,000 --> 00:00:49,000
Now attached you'll also find out all-posts.module.css file,

18
00:00:49,000 --> 00:00:51,000
which you should download,

19
00:00:51,000 --> 00:00:55,000
and add next to the all-posts.js file.

20
00:00:55,000 --> 00:00:58,000
And then in this all-posts.js file,

21
00:00:58,000 --> 00:01:02,000
we define our all posts functional component,

22
00:01:02,000 --> 00:01:05,000
as we always do like this.

23
00:01:05,000 --> 00:01:10,000
And we can also already import the CSS styles,

24
00:01:10,000 --> 00:01:14,000
so important clauses from all-posts.module.css,

25
00:01:16,000 --> 00:01:20,000
and then work on the JSX code that should be returned here.

26
00:01:20,000 --> 00:01:25,000
And I'll keep this AllPosts page fairly simple.

27
00:01:25,000 --> 00:01:29,000
I'll just add a section which gets some styling,

28
00:01:29,000 --> 00:01:34,000
with classes.posts.

29
00:01:34,000 --> 00:01:35,000
And then I'll add a h1 tag,

30
00:01:35,000 --> 00:01:40,000
for the main title off this page where I just say All Posts,

31
00:01:41,000 --> 00:01:44,000
and then, I'll again use the PostsGrid,

32
00:01:44,000 --> 00:01:46,000
so we will reuse this component.

33
00:01:46,000 --> 00:01:49,000
And therefore, of course you also need to add this import.

34
00:01:50,000 --> 00:01:53,000
Now I do expect that I get posts,

35
00:01:53,000 --> 00:01:55,000
through props here from the page,

36
00:01:55,000 --> 00:01:58,000
because the page component should be responsible,

37
00:01:58,000 --> 00:02:01,000
for fetching and preparing the data.

38
00:02:01,000 --> 00:02:05,000
And hence on PostsGrid, we need to set that posts prop,

39
00:02:05,000 --> 00:02:09,000
and I'll just point at prop.posts for this.

40
00:02:09,000 --> 00:02:11,000
And that is already yet,

41
00:02:11,000 --> 00:02:14,000
it is a real simple component in the end.

42
00:02:15,000 --> 00:02:20,000
Now back on the posts page, on the AllPostsPage,

43
00:02:20,000 --> 00:02:25,000
I therefore, now wanna return the AllPosts component,

44
00:02:25,000 --> 00:02:26,000
we just worked on.

45
00:02:26,000 --> 00:02:29,000
And for this of course, also add to that import.

46
00:02:29,000 --> 00:02:31,000
And now here we again,

47
00:02:31,000 --> 00:02:34,000
need to prepare the posts that should be used.

48
00:02:35,000 --> 00:02:38,000
For the moment we can again use the dummy posts.

49
00:02:38,000 --> 00:02:43,000
So copy that DUMMY POSTS array from the starting page,

50
00:02:43,000 --> 00:02:46,000
but soon we will add a real data source.

51
00:02:46,000 --> 00:02:48,000
For the moment it's this though,

52
00:02:48,000 --> 00:02:50,000
so that's our dummy posts.

53
00:02:50,000 --> 00:02:53,000
And then here in AllPosts,

54
00:02:53,000 --> 00:02:57,000
I'll just pass in posts,

55
00:02:57,000 --> 00:03:00,000
and point at my dummy posts.

56
00:03:01,000 --> 00:03:03,000
And then with that done, if we save this

57
00:03:03,000 --> 00:03:06,000
and click on posts here, we're taken to that page.

58
00:03:06,000 --> 00:03:09,000
We got the navigation bar there as well,

59
00:03:09,000 --> 00:03:12,000
because we wrapped the layout around all pages,

60
00:03:12,000 --> 00:03:15,000
and we got our post grid here.

61
00:03:15,000 --> 00:03:18,000
So that is working just as it should,

62
00:03:18,000 --> 00:03:21,000
and that's the AllPostsPage finished.

63
00:03:21,000 --> 00:03:24,000
Now we got two pages left.

64
00:03:24,000 --> 00:03:27,000
We got the page for individual posts,

65
00:03:27,000 --> 00:03:31,000
if we click on it and we got this contact page.

66
00:03:31,000 --> 00:03:33,000
Now we could start with either of the two,

67
00:03:33,000 --> 00:03:37,000
but I would say let's start with the post detailed page,

68
00:03:37,000 --> 00:03:38,000
so that when we click on a post,

69
00:03:38,000 --> 00:03:43,000
we load a page and we displayed the actual post content here

70
00:03:43,000 --> 00:03:47,000
because that will then also get us closer,

71
00:03:47,000 --> 00:03:49,000
to setting up an actual data source,

72
00:03:49,000 --> 00:03:51,000
and to setting up actual posts,

73
00:03:51,000 --> 00:03:55,000
which we can then fetch and pre-render and so on,

74
00:03:55,000 --> 00:03:57,000
so that's there for what we'll do next.