bug: fix bug blog

framework/vendure/api/operations/get-all-blogs.ts

@@ -7,7 +7,11 @@ export type BlogVariables = {
   excludeBlogIds?: string[],
   take?: number,
   skip?:number,
-  isFeatured?:{eq?:Boolean},
+  filter?:{
+    isFeatured?:{
+      eq?:Boolean
+    }
+  },
 }
 
 export default function getAllBlogsOperation({
@@ -35,9 +39,8 @@ export default function getAllBlogsOperation({
       excludeBlogIds: vars.excludeBlogIds,
       options: {
         take: vars.take,
-        skip: vars.skip,
         filter: {
-          isFeatured: vars.isFeatured
+          isFeatured: vars.filter?.isFeatured
         }
       },
     }

framework/vendure/api/operations/get-featured-blog.ts

@@ -5,7 +5,12 @@ import { getFeatuedBlogQuery } from '../../utils/queries/get-featued-query'
 
 export type BlogVariables = {
   take?: number,
-  skip?:number
+  skip?:number,
+  filter?:{
+    isFeatured?:{
+      eq?:Boolean
+    }
+  },
 }
 
 export default function getFeaturedBlogOperation({
@@ -31,6 +36,9 @@ export default function getFeaturedBlogOperation({
     const variables = {
       options: {
         take: vars.take,
+        filter: {
+          isFeatured: vars.filter?.isFeatured
+        }
       },
     }
     const { data } = await config.fetch<GetFeaturedBlogQuery>(query, {

package.json

@@ -2,7 +2,7 @@
   "name": "nextjs-commerce",
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' PORT=3005 next dev",
+    "dev": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
     "dev-windows": "set NODE_OPTIONS='--inspect' && set PORT=3005 && next dev",
     "build": "next build",
     "start": "PORT=3005 next start",

pages/blogs.tsx

@@ -11,23 +11,26 @@ interface Props {
     blogsResult: { blogs?: BlogCardProps[],featuredBlog?: BlogCardProps[] },
     totalItems: number
 }
-export default function BlogsPage({blogsResult,totalItems}:Props) {
+export default function BlogsPage( { blogsResult, totalItems }:Props ) {
+
     let date = new Date(blogsResult.featuredBlog?.[0]?.createdAt ?? '' );
     let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
-  
+
     return(
         <>
             <BlogBreadCrumb />
             <BlogHeading />
+            { (blogsResult.featuredBlog?.length !=0 ) &&
             <FeaturedCardBlog 
             title={blogsResult.featuredBlog?.[0]?.title} 
             slug={blogsResult.featuredBlog?.[0]?.slug} 
             imgSrc={blogsResult.featuredBlog?.[0]?.imageSrc ?? ''}
             content={blogsResult.featuredBlog?.[0]?.description}
-            imgAuthor={blogsResult.featuredBlog?.[0]?.authorAvatarAsset}
+            imgAuthor={blogsResult.featuredBlog?.[0]?.authorAvatarAsset ?? ''}
             authorName={blogsResult.featuredBlog?.[0]?.authorName}
             date={fullDate}
             />
+            }
             <BlogsList blogList={blogsResult.blogs} total={totalItems} idFeatured={blogsResult.featuredBlog?.[0]?.id} />
         </>
     )
@@ -58,7 +61,7 @@ export async function getStaticProps({
   })
   
  // Blogs
-  const idFeaturedBlog = featuredBlogs[0].id;
+  const idFeaturedBlog = featuredBlogs?.[0]?.id;
   const blogsPromise = commerce.getAllBlogs({
     variables: {
       excludeBlogIds: [idFeaturedBlog],

src/components/modules/blogs/BlogsList/BlogsList.tsx

@@ -1,100 +0,0 @@
-import { useRouter } from 'next/router'
-import React, { useEffect, useState,useRef } from 'react'
-import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
-import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
-import { DEFAULT_BLOG_PAGE_SIZE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
-import s from "./BlogsList.module.scss"
-import { QueryBlogs } from '@framework/schema'
-import { useGetBlogList } from 'src/components/hooks/blog'
-import { getPageFromQuery } from 'src/utils/funtion.utils'
-import { ListProductCardSkeleton  } from 'src/components/common'
-
-interface BlogsListProps {
-    blogList?: BlogCardProps[],
-    total?: number,
-    idFeatured?:string
-}
-
-
-
-const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
-
-    const DEFAULT_BLOGS_ARGS = {
-        excludeBlogIds: [idFeatured],
-        options:{
-            take: DEFAULT_BLOG_PAGE_SIZE,
-            filter: {
-                isFeatured: {
-                    eq:false
-                }
-            }
-        }
-    }
-
-    const router = useRouter();
-    const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
-
-    const [optionQueryBlog, setOptionQueryBlog] = useState<QueryBlogs>(DEFAULT_BLOGS_ARGS)
-    const { blogs, totalItems, loading } = useGetBlogList(optionQueryBlog);
-
-
-
-
-    const onPageChange = (page:number) => {
-        router.push({
-            pathname: ROUTE.BLOGS,
-            query: {
-              ...router.query,
-              [QUERY_KEY.PAGE]: page
-            }
-          },
-            undefined, { shallow: true }
-        )
-    }
-
-      // skip
-      const firstRender = useRef(true);
-      useEffect(() => {
-        firstRender.current = false;
-        const query = { ...DEFAULT_BLOGS_ARGS } as QueryBlogs;
-        const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
-        query.options.skip = page * DEFAULT_BLOG_PAGE_SIZE;
-        setOptionQueryBlog(query);
-        setInitialQueryFlag(false);
-    },[router.query])
-
-       
-    let data;
-    if(initialQueryFlag == true){
-        data = blogList;
-    }else{
-        data = blogs
-    }
-    
-    return (
-        <section>
-            <div className={s.wrapper}>
-                {(!initialQueryFlag && loading && !blogs) && <ListProductCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap isBlog={true} />}
-                <div className={s.list}>
-                    
-                    {
-                        data?.map((blog,index)=> {
-                        return(
-                                <div className={s.card} key={`${blog.title}-${index}`}>
-                                    {blog.isPublish && !blog.isFeatured && <CardBlog {...blog} /> }
-                                </div>
-                            )
-                        })
-                    }
-                </div>
-                <div className={s.pagination}>
-                    <PaginationCommon total={totalItems !== undefined ? totalItems : total} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
-                </div>
-            </div>
-        </section>
-    )
-}
-
-export default BlogsList
-
-