crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: fix bug blog

Browse Source
This commit is contained in:
Quangnhankie
2021-10-21 09:49:45 +07:00
parent 5b5aeec0d2
commit a343079d34
5 changed files with 23 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
framework/vendure/api/operations/get-all-blogs.ts
View File

@@ -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
}
},
}

10
framework/vendure/api/operations/get-featured-blog.ts
View File

@@ -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, {

2
package.json
View File

@@ -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",

11
pages/blogs.tsx
View File

@@ -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],

100
src/components/modules/blogs/BlogsList/BlogsList.tsx
View File

@@ -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