🐛 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, {
variables,
})
return {
if(data.blog){
return {
blogDetail: {
id:data?.blog?.id,
title: data?.blog?.translations[0].title,
@@ -48,7 +50,12 @@ export default function getBlogDetailOperation({
createdAt: data?.blog?.createdAt,
relevantProducts: data?.blog?.relevantProducts.map(val=>val.id)
}
}
}else{
return {blogDetail:null}
}
}
return getBlogDetail

View File

@@ -34,6 +34,8 @@ export default function getRelevantBlogsOperation({
const { data } = await config.fetch<GetRelevantBlogsQuery>(query, {
variables,
})
if(data){
return {
relevantBlogs: data?.relevantBlogs?.items?.map((val:BlogList)=>({
id: val.id,
@@ -48,6 +50,9 @@ export default function getRelevantBlogsOperation({
createdAt: val.createdAt
})),
}
}else{
return {relevantBlogs:[]}
}
}
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 { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
import { BLOGS_DATA_TEST } from 'src/utils/demo-data'
import { GetStaticPropsContext,GetStaticPathsContext } from 'next';
import { REVALIDATE_TIME } from 'src/utils/constanst.utils';
import { formatDate, getAllPromies } from 'src/utils/funtion.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 {
blog:{blogDetail?: BlogCardProps},
relevant:{relevantBlogs?:BlogCardProps[]}
}
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 (
<>
<BlogDetailImg imgSrc={blog?.blogDetail?.imageSrc ?? ''} />
@@ -25,9 +20,9 @@ export default function BlogDetailPage({blog,relevant}:Props) {
content={blog?.blogDetail?.description}
imgAuthor={blog?.blogDetail?.authorAvatarAsset}
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,
preview,
})
if (blogDetailPromise.blogDetail === null) {
return { notFound: true };
}
props.blog = blogDetailPromise;
if (!blogDetailPromise) {
throw new Error(`Blog with slug '${params!.slug}' not found`)
}
// Relevant Blogs
const relevantProductId = blogDetailPromise.blogDetail.relevantProducts?.[0];
if (relevantProductId && blogDetailPromise.blogDetail.relevantProducts.length > 0) {
const relevantProductId = blogDetailPromise?.blogDetail?.relevantProducts?.[0];
if (relevantProductId && blogDetailPromise?.blogDetail?.relevantProducts?.length > 0) {
const relevantBlogs = commerce.getRelevantBlogs({
variables: { productId: relevantProductId },
variables: { productId: Number(relevantProductId) },
config,
preview,
})
promisesWithKey.push({ key: 'relevant', promise: relevantBlogs})
}else {
props.relevantBlogs = [];
}
try {
const promises = getAllPromies(promisesWithKey)
@@ -80,7 +74,6 @@ export async function getStaticProps({
return null
})
console.log(props.relevantBlogs);
return {
props,
revalidate: REVALIDATE_TIME,

View File

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