159 lines
4.7 KiB
TypeScript
159 lines
4.7 KiB
TypeScript
import { GetServerSideProps } from 'next';
|
|
import Head from 'next/head';
|
|
import { useRouter } from 'next/router';
|
|
import React, { useEffect } from 'react';
|
|
import ReactPaginate from 'react-paginate';
|
|
import { useDispatch } from 'react-redux';
|
|
import { ArticleCard } from '../../components/cards/ArticleCard';
|
|
import { ArticleCardFeature } from '../../components/cards/ArticleCardFeature';
|
|
import { CardGrid } from '../../components/cards/CardGrid';
|
|
import { Contained } from '../../components/Contained';
|
|
import { TagBlock } from '../../components/TagBlock';
|
|
import { CMS } from '../../constants';
|
|
import { CmsApi } from '../../services/cms';
|
|
import { PageType, setPageType } from '../../state/navigation';
|
|
import { IPost } from '../../types/cms';
|
|
import { generateTitle } from '../../utils/metadata';
|
|
|
|
export const getServerSideProps: GetServerSideProps = async context => {
|
|
const api = new CmsApi();
|
|
|
|
// Get tag query
|
|
const tag = String(context.query.tag ?? '') ?? null;
|
|
const page = Math.ceil(Number(context.query.page ?? 1));
|
|
|
|
// Fetch posts even when tag, for related etc
|
|
const { posts, total } = await api.fetchBlogEntries(
|
|
CMS.BLOG_RESULTS_PER_PAGE,
|
|
page,
|
|
);
|
|
|
|
const pageCount = Math.floor(total / CMS.BLOG_RESULTS_PER_PAGE);
|
|
|
|
// Todo, instead of making 2 reqs, filter over 1 req
|
|
// const tagPosts = tag ? await api.fetchBlogEntriesByTag(tag ?? '') : [];
|
|
const tagPosts = posts?.filter(post => post.tags.includes(tag)) ?? [];
|
|
|
|
return {
|
|
props: { posts, tagPosts, tag, pageCount, currentPage: page },
|
|
};
|
|
};
|
|
|
|
interface Props {
|
|
posts: IPost[];
|
|
tagPosts: IPost[];
|
|
tag: string | null;
|
|
currentPage: number;
|
|
pageCount: number;
|
|
}
|
|
|
|
const Blog = (props: Props) => {
|
|
const { posts, tagPosts, tag, currentPage, pageCount } = props;
|
|
|
|
const router = useRouter();
|
|
const dispatch = useDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(setPageType(PageType.BLOG));
|
|
}, []);
|
|
|
|
const tagHasPosts = tagPosts && tagPosts?.length > 0;
|
|
const [featuredPost, ...otherPosts] = posts;
|
|
const showPagination = posts.length > 0 && pageCount > 1;
|
|
|
|
console.log('index ➡️ tag:', tag);
|
|
console.log('index ➡️ tagHasPosts:', tagHasPosts);
|
|
|
|
const paginationHandler = page => {
|
|
const currentPath = router.pathname;
|
|
|
|
// Copy current query to avoid its removing
|
|
const currentQuery = { ...router.query };
|
|
currentQuery.page = page.selected + 1;
|
|
|
|
router.push({
|
|
pathname: currentPath,
|
|
query: currentQuery,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>{generateTitle('Blog')}</title>
|
|
</Head>
|
|
|
|
<div className="flex flex-col w-full mt-12 mb-6 space-y-6 bg-alt">
|
|
<Contained>
|
|
{!tag && posts.length && <ArticleCardFeature {...featuredPost} />}
|
|
|
|
{tag && (
|
|
<>
|
|
<div className="flex items-center w-full mt-4 space-x-2 font-sans">
|
|
<p className={tagHasPosts ? 'mb-0' : 'mb-10'}>
|
|
{tagHasPosts
|
|
? 'Tag Results:'
|
|
: 'There are no posts with the tag'}
|
|
</p>
|
|
<TagBlock size="large" tag={tag} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</Contained>
|
|
|
|
{/* Tag has posts */}
|
|
{tag && tagHasPosts && (
|
|
<>
|
|
<CardGrid>
|
|
{(tag ? posts : otherPosts)?.map(post => (
|
|
<ArticleCard key={post.id} {...post} />
|
|
))}
|
|
</CardGrid>
|
|
</>
|
|
)}
|
|
|
|
<Contained>
|
|
{tag && (
|
|
<h3 className="-mb-6 text-2xl font-prompt text-primary">
|
|
Recent Posts
|
|
</h3>
|
|
)}
|
|
</Contained>
|
|
|
|
<CardGrid>
|
|
{(tag ? posts : otherPosts)?.map(post => (
|
|
<ArticleCard key={post.id} {...post} />
|
|
))}
|
|
</CardGrid>
|
|
|
|
<Contained>
|
|
<div className="flex justify-center mb-4">
|
|
{showPagination && (
|
|
<div className="mt-4 mobile:mt-6">
|
|
<ReactPaginate
|
|
previousLabel={'<'}
|
|
nextLabel={'>'}
|
|
breakLabel={'...'}
|
|
breakClassName={'break-me'}
|
|
activeClassName={'active bg-secondary'}
|
|
containerClassName={
|
|
'pagination bg-primary text-white front-prompt'
|
|
}
|
|
subContainerClassName={''}
|
|
initialPage={currentPage - 1}
|
|
pageCount={pageCount}
|
|
marginPagesDisplayed={2}
|
|
pageRangeDisplayed={5}
|
|
onPageChange={paginationHandler}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Contained>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Blog;
|