import { useEffect, ReactElement } from 'react';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import { CMS, METADATA } from '../../constants';
import { CmsApi } from '../../services/cms';
import { PageType, setPageType } from '../../state/navigation';
import { IPath } from '../../types';
import { IPost } from '../../types/cms';
import CustomHead from '../../components/CustomHead';
import { ArticleCard } from '../../components/cards/ArticleCard';
import { CardGrid } from '../../components/cards/CardGrid';
import { Contained } from '../../components/Contained';
import { TagBlock } from '../../components/TagBlock';
import Pagination from '../../components/Pagination';
interface Props {
posts: IPost[];
tagPosts: IPost[];
tag: string;
currentPage: number;
pageCount: number;
}
export default function Tag(props: Props): ReactElement {
const { posts, tagPosts, tag, currentPage, pageCount } = props;
const router = useRouter();
const dispatch = useDispatch();
const tagHasPosts = tagPosts && tagPosts?.length > 0;
const paginationHandler = page => {
const newRoute = `/tag/${tag}/${page.selected + 1}`;
router.push(newRoute);
};
useEffect(() => {
dispatch(setPageType(PageType.BLOG));
}, []);
return (
<>
Oxen Blogs
{tagHasPosts
? 'Tag Results:'
: 'There are no posts with the tag:'}
{tagHasPosts && (
<>
{tagPosts?.map(post => (
))}
>
)}
Recent Posts
{posts?.map(post => (
))}
>
);
}
export const getStaticProps: GetStaticProps = async (
context: GetStaticPropsContext,
) => {
console.log(
`Building Results for tag "%c${context.params.slug[0]}" page ${
context.params.slug && context.params.slug[1]
? context.params.slug[1]
: ''
}`,
'color: purple;',
);
const cms = new CmsApi();
const tag = String(context.params.slug[0] ?? '') ?? null;
const page = Number(context.params.slug[1] ?? 1);
try {
const {
entries: tagPosts = [],
total: tagTotalPosts,
} = await cms.fetchBlogEntriesByTag(
tag,
CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
page,
);
const { entries: posts, total: totalPosts } = await cms.fetchBlogEntries(
CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
);
const pageCount = Math.ceil(
tagTotalPosts / CMS.BLOG_RESULTS_PER_PAGE_TAGGED,
);
if (page > pageCount && page > 1) {
throw 'Page results exceeded!';
}
return {
props: {
posts,
pageCount,
currentPage: page,
tag,
tagPosts,
},
revalidate: CMS.CONTENT_REVALIDATE_RATE,
};
} catch (err) {
console.error(err);
return {
notFound: true,
revalidate: CMS.CONTENT_REVALIDATE_RATE,
};
}
};
export const getStaticPaths: GetStaticPaths = async () => {
const cms = new CmsApi();
const tags = Object.values(await cms.fetchTagList());
const paths: IPath[] = [];
for (let i = 0; i < tags.length; i++) {
const { entries, total } = await cms.fetchBlogEntriesByTag(tags[i]);
const pageCount = Math.ceil(total / CMS.BLOG_RESULTS_PER_PAGE);
const _paths = [];
for (let i = 1; i <= pageCount; i++) {
_paths.push({ params: { slug: [tags[i], String(i)] } });
}
paths.push(..._paths);
}
return {
paths,
fallback: 'blocking',
};
};