All language subtitles for 010 Adding the _All Posts_ Page_Downloadly.ir_en

So let's continue working

on that index.js file,

in the posts folder on the AllPostsPage.

Here the goal is simple,

I wanna output all my posts.

So later once we don't just have dummy posts,

but actual data source,

we will fetch all posts for this page,

and then output them in some way here.

Now, for the actual JSX code,

for the detailed HTML structure,

I'll again create a separate component,

to keep my page component lean,

and focused on data fetching.

And therefore in the posts folder,

in the components folder, I'll add an all-posts.js file.

Now attached you'll also find out all-posts.module.css file,

which you should download,

and add next to the all-posts.js file.

And then in this all-posts.js file,

we define our all posts functional component,

as we always do like this.

And we can also already import the CSS styles,

so important clauses from all-posts.module.css,

and then work on the JSX code that should be returned here.

And I'll keep this AllPosts page fairly simple.

I'll just add a section which gets some styling,

with classes.posts.

And then I'll add a h1 tag,

for the main title off this page where I just say All Posts,

and then, I'll again use the PostsGrid,

so we will reuse this component.

And therefore, of course you also need to add this import.

Now I do expect that I get posts,

through props here from the page,

because the page component should be responsible,

for fetching and preparing the data.

And hence on PostsGrid, we need to set that posts prop,

and I'll just point at prop.posts for this.

And that is already yet,

it is a real simple component in the end.

Now back on the posts page, on the AllPostsPage,

I therefore, now wanna return the AllPosts component,

we just worked on.

And for this of course, also add to that import.

And now here we again,

need to prepare the posts that should be used.

For the moment we can again use the dummy posts.

So copy that DUMMY POSTS array from the starting page,

but soon we will add a real data source.

For the moment it's this though,

so that's our dummy posts.

And then here in AllPosts,

I'll just pass in posts,

and point at my dummy posts.

And then with that done, if we save this

and click on posts here, we're taken to that page.

We got the navigation bar there as well,

because we wrapped the layout around all pages,

and we got our post grid here.

So that is working just as it should,

and that's the AllPostsPage finished.

Now we got two pages left.

We got the page for individual posts,

if we click on it and we got this contact page.

Now we could start with either of the two,

but I would say let's start with the post detailed page,

so that when we click on a post,

we load a page and we displayed the actual post content here

because that will then also get us closer,

to setting up an actual data source,

and to setting up actual posts,

which we can then fetch and pre-render and so on,

so that's there for what we'll do next.