From aa56d2b031765a42cffe37a503753b36738b7eb5 Mon Sep 17 00:00:00 2001
From: QuangNhan <tranquangnhan1606@gmail.com>
Date: Mon, 25 Oct 2021 00:41:22 +0700
Subject: [PATCH] :bug: bug: fix bug handle 404 for blog detail

:%s
---
 .../vendure/api/operations/get-blog-detail.ts |  9 ++++-
 .../api/operations/get-relevant-blogs.ts      |  5 +++
 pages/blog/[slug].tsx                         | 35 ++++++++-----------
 src/utils/funtion.utils.ts                    |  5 +++
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/framework/vendure/api/operations/get-blog-detail.ts b/framework/vendure/api/operations/get-blog-detail.ts
index 6b8e92967..217d8a13a 100644
--- a/framework/vendure/api/operations/get-blog-detail.ts
+++ b/framework/vendure/api/operations/get-blog-detail.ts
@@ -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
diff --git a/framework/vendure/api/operations/get-relevant-blogs.ts b/framework/vendure/api/operations/get-relevant-blogs.ts
index 3b9259c6a..f903e3785 100644
--- a/framework/vendure/api/operations/get-relevant-blogs.ts
+++ b/framework/vendure/api/operations/get-relevant-blogs.ts
@@ -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
diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index 26325f5be..5274b690d 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -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,
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index f5f1cb146..5dc28827f 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -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();
+}
\ No newline at end of file