🐛 bug: fix bug handle 404 for blog detail

:%s
This commit is contained in:
QuangNhan
2021-10-25 00:41:22 +07:00
parent 4ce8143461
commit aa56d2b031
4 changed files with 32 additions and 22 deletions

View File

@@ -34,7 +34,9 @@ export default function getBlogDetailOperation({
const { data } = await config.fetch<GetBlogQuery>(query, { const { data } = await config.fetch<GetBlogQuery>(query, {
variables, variables,
}) })
return { if(data.blog){
return {
blogDetail: { blogDetail: {
id:data?.blog?.id, id:data?.blog?.id,
title: data?.blog?.translations[0].title, title: data?.blog?.translations[0].title,
@@ -48,7 +50,12 @@ export default function getBlogDetailOperation({
createdAt: data?.blog?.createdAt, createdAt: data?.blog?.createdAt,
relevantProducts: data?.blog?.relevantProducts.map(val=>val.id) relevantProducts: data?.blog?.relevantProducts.map(val=>val.id)
} }
}
}else{
return {blogDetail:null}
} }
} }
return getBlogDetail return getBlogDetail

View File

@@ -34,6 +34,8 @@ export default function getRelevantBlogsOperation({
const { data } = await config.fetch<GetRelevantBlogsQuery>(query, { const { data } = await config.fetch<GetRelevantBlogsQuery>(query, {
variables, variables,
}) })
if(data){
return { return {
relevantBlogs: data?.relevantBlogs?.items?.map((val:BlogList)=>({ relevantBlogs: data?.relevantBlogs?.items?.map((val:BlogList)=>({
id: val.id, id: val.id,
@@ -48,6 +50,9 @@ export default function getRelevantBlogsOperation({
createdAt: val.createdAt createdAt: val.createdAt
})), })),
} }
}else{
return {relevantBlogs:[]}
}
} }
return getRelevantBlogs return getRelevantBlogs

View File

@@ -1,22 +1,17 @@
import commerce from '@lib/api/commerce';
import { GetStaticPathsContext, GetStaticPropsContext } from 'next';
import { Layout, RelevantBlogPosts } from 'src/components/common'; import { Layout, RelevantBlogPosts } from 'src/components/common';
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent'; import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg'; import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
import { BLOGS_DATA_TEST } from 'src/utils/demo-data' import { REVALIDATE_TIME } from 'src/utils/constanst.utils';
import { GetStaticPropsContext,GetStaticPathsContext } from 'next'; import { formatDate, getAllPromies } from 'src/utils/funtion.utils';
import { PromiseWithKey } from 'src/utils/types.utils'; import { PromiseWithKey } from 'src/utils/types.utils';
import { getAllPromies } from 'src/utils/funtion.utils';
import commerce from '@lib/api/commerce';
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
import { REVALIDATE_TIME } from 'src/utils/constanst.utils'
interface Props { interface Props {
blog:{blogDetail?: BlogCardProps}, blog:{blogDetail?: BlogCardProps},
relevant:{relevantBlogs?:BlogCardProps[]} relevant:{relevantBlogs?:BlogCardProps[]}
} }
export default function BlogDetailPage({blog,relevant}:Props) { export default function BlogDetailPage({blog,relevant}:Props) {
let date = new Date(blog?.blogDetail?.createdAt ?? '' );
let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
return ( return (
<> <>
<BlogDetailImg imgSrc={blog?.blogDetail?.imageSrc ?? ''} /> <BlogDetailImg imgSrc={blog?.blogDetail?.imageSrc ?? ''} />
@@ -25,9 +20,9 @@ export default function BlogDetailPage({blog,relevant}:Props) {
content={blog?.blogDetail?.description} content={blog?.blogDetail?.description}
imgAuthor={blog?.blogDetail?.authorAvatarAsset} imgAuthor={blog?.blogDetail?.authorAvatarAsset}
authorName={blog?.blogDetail?.authorName} authorName={blog?.blogDetail?.authorName}
date={fullDate} date={formatDate(blog?.blogDetail?.createdAt ?? '')}
/> />
{relevant.relevantBlogs?.length> 0 && <RelevantBlogPosts data={relevant.relevantBlogs} title="You will like also" bgcolor="cream"/>} {(relevant?.relevantBlogs && relevant?.relevantBlogs?.length > 0) && <RelevantBlogPosts data={relevant.relevantBlogs} title="You will like also" bgcolor="cream"/>}
</> </>
) )
} }
@@ -49,27 +44,26 @@ export async function getStaticProps({
config, config,
preview, preview,
}) })
if (blogDetailPromise.blogDetail === null) {
return { notFound: true };
}
props.blog = blogDetailPromise; props.blog = blogDetailPromise;
if (!blogDetailPromise) {
throw new Error(`Blog with slug '${params!.slug}' not found`)
}
// Relevant Blogs // Relevant Blogs
const relevantProductId = blogDetailPromise.blogDetail.relevantProducts?.[0]; const relevantProductId = blogDetailPromise?.blogDetail?.relevantProducts?.[0];
if (relevantProductId && blogDetailPromise.blogDetail.relevantProducts.length > 0) { if (relevantProductId && blogDetailPromise?.blogDetail?.relevantProducts?.length > 0) {
const relevantBlogs = commerce.getRelevantBlogs({ const relevantBlogs = commerce.getRelevantBlogs({
variables: { productId: relevantProductId }, variables: { productId: Number(relevantProductId) },
config, config,
preview, preview,
}) })
promisesWithKey.push({ key: 'relevant', promise: relevantBlogs}) promisesWithKey.push({ key: 'relevant', promise: relevantBlogs})
}else { }else {
props.relevantBlogs = []; props.relevantBlogs = [];
} }
try { try {
const promises = getAllPromies(promisesWithKey) const promises = getAllPromies(promisesWithKey)
@@ -80,7 +74,6 @@ export async function getStaticProps({
return null return null
}) })
console.log(props.relevantBlogs);
return { return {
props, props,
revalidate: REVALIDATE_TIME, revalidate: REVALIDATE_TIME,

View File

@@ -178,3 +178,8 @@ export function getProductVariant(product: Product, opts: SelectedOptions) {
}) })
return variant return variant
} }
export function formatDate(dateTime:string){
let date = new Date(dateTime);
return date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
}