Posts

The core responsibility of this component is to render a collection of posts.

The Posts component is responsible to display a collection of posts. This collection is made possible due to the taxonomies, tags and categories. The posts that you want to display as a collection should have a common category. Posts component will render if the url matches one the below ones.

/posts/:category
/category/:category
/tag/:tag

The navigation menu can contain a category, or a page. The category will always be a collection of posts.

Data

Since we are using typescript, you will have the advantage to know what data props.data will have.

{
loading: true,
rows: {
count: 4,
rows:[
{
id: 1,
title: "Another day on the terrace",
body: "...[truncated]",
status: "publish",
createdAt: "March 1, 2020",
publishedAt: "March 1, 2020",
updatedAt: "March 1, 2020",
excerpt: "Beatae alias ullam. Commodi modi et voluptatem quam. Nostrum occaecati ut id rem omnis soluta. Distinctio facere quia laudantium quia numquam vero iste.",
cover_image: "/uploads/6.jpg",
cover_image_width: 1100,
cover_image_height: 600,
slug: "post-6",
featured: true,
type: "post",
reading_time: '3 min read',
author: {
fname: "John1",
lname: "Dave",
avatar: "/admin/images/avatar.png",
bio: "Provident quis sed perferendis sed.",
__typename: "Author"
},
tags: [
{id: 2, name: "sports", type: "post_tag", slug: "sports", __typename: "Taxonomy"}
],
categories: [
{id: 1, name: "Abstract", type: "post_category", slug: "abstract", __typename: "Taxonomy"}
]
__typename: "Post"
}
]
}
}

Check this complete example of the Posts container.

Posts.tsx
// - src/client/types.ts
import { IThemeContainer } from "../../../types"
import React from "react";
const Posts: IThemeContainer["Posts"] = ({
router,
settings,
initialProps,
loading,
data,
helpers
...rest
}) => {
const posts = data;
if (loading) return <Loader />;
if (!posts) {
return null;
}
if (posts.rows.length === 0) {
return null;
}
return (
<div>
<button onClick={() => loadMore(2)}>Load more</button>
{(result as Post[]).map(post => (
<li key={post.id}>{post.title}</li>
))}
</div>
);
};