From 29b56ec6a39831bc727932aae2663055a0284fb6 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 21 Oct 2021 12:21:18 +0700 Subject: [PATCH 1/3] bug: fix type --- framework/commerce/api/operations.ts | 8 ++++---- framework/commerce/types/blogs.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/framework/commerce/api/operations.ts b/framework/commerce/api/operations.ts index 898c322e3..9f2682d7e 100644 --- a/framework/commerce/api/operations.ts +++ b/framework/commerce/api/operations.ts @@ -151,13 +151,13 @@ export type Operations

= { getAllBlogs: { - (opts: { + (opts: { variables?: T['variables'] config?: P['config'] preview?: boolean }): Promise - ( + ( opts: { variables?: T['variables'] config?: P['config'] @@ -167,13 +167,13 @@ export type Operations

= { } getFeaturedBlog: { - (opts: { + (opts: { variables?: T['variables'] config?: P['config'] preview?: boolean }): Promise - ( + ( opts: { variables?: T['variables'] config?: P['config'] diff --git a/framework/commerce/types/blogs.ts b/framework/commerce/types/blogs.ts index 9b6ce14c1..14feeb561 100644 --- a/framework/commerce/types/blogs.ts +++ b/framework/commerce/types/blogs.ts @@ -4,7 +4,7 @@ import { Asset, BlogTranslation, Maybe, Product } from './../../vendure/schema.d export type BlogList = Node &{ id: string featuredAsset?: Maybe - isHidden:Boolean + isPublic:Boolean translations: Array authorName: string authorAvatarAsset:Array From e4ad5bef4bdcf322cca4d2b2a50dfc7d42b6328a Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 21 Oct 2021 16:10:58 +0700 Subject: [PATCH 2/3] :bug: bug: fix code follow by review Ly Tran :%s --- framework/commerce/api/operations.ts | 6 ++-- framework/commerce/types/blogs.ts | 7 ++-- .../api/operations/get-featured-blog.ts | 4 +-- framework/vendure/utils/normalize.ts | 17 +++++++++- .../utils/queries/get-featued-query.ts | 4 +-- pages/blogs.tsx | 32 ++++++++++--------- src/components/common/CardBlog/CardBlog.tsx | 2 +- .../ListBlogCardSkeleton.module.scss | 18 +++++++++++ .../ListBlogCardSkeleton.tsx | 20 ++++++++++++ .../ListProductCardSkeleton.tsx | 8 ++--- src/components/common/index.ts | 1 + src/components/hooks/blog/useGetBlogList.tsx | 14 ++------ .../modules/blogs/BlogsList/BlogsList.tsx | 11 ++++--- 13 files changed, 94 insertions(+), 50 deletions(-) create mode 100644 src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss create mode 100644 src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx diff --git a/framework/commerce/api/operations.ts b/framework/commerce/api/operations.ts index 9f2682d7e..efbbce35d 100644 --- a/framework/commerce/api/operations.ts +++ b/framework/commerce/api/operations.ts @@ -11,7 +11,7 @@ import type { } from '../types/product' import type { GetAllBlogsOperation, - GetFeaturedOperation + GetFeaturedBlogsOperation } from '../types/blogs' import type { APIProvider, CommerceAPI } from '.' import { GetAllCollectionsOperation } from '@commerce/types/collection'; @@ -167,13 +167,13 @@ export type Operations

= { } getFeaturedBlog: { - (opts: { + (opts: { variables?: T['variables'] config?: P['config'] preview?: boolean }): Promise - ( + ( opts: { variables?: T['variables'] config?: P['config'] diff --git a/framework/commerce/types/blogs.ts b/framework/commerce/types/blogs.ts index 14feeb561..fcdca972d 100644 --- a/framework/commerce/types/blogs.ts +++ b/framework/commerce/types/blogs.ts @@ -1,13 +1,12 @@ -import { SearchResultSortParameter } from "@framework/schema"; import { Asset, BlogTranslation, Maybe, Product } from './../../vendure/schema.d'; export type BlogList = Node &{ id: string featuredAsset?: Maybe isPublic:Boolean - translations: Array + translations: BlogTranslation[] authorName: string - authorAvatarAsset:Array + authorAvatarAsset:Asset[] relevantProducts: Product } export type BlogsType = { @@ -23,7 +22,7 @@ export type GetAllBlogsOperation = { } -export type GetFeaturedOperation = { +export type GetFeaturedBlogsOperation = { data: { items: T['items'][] } variables: { take?: number diff --git a/framework/vendure/api/operations/get-featured-blog.ts b/framework/vendure/api/operations/get-featured-blog.ts index 8f26e4288..727db46ed 100644 --- a/framework/vendure/api/operations/get-featured-blog.ts +++ b/framework/vendure/api/operations/get-featured-blog.ts @@ -1,7 +1,7 @@ import { OperationContext } from '@commerce/api/operations' import { Provider, VendureConfig } from '..' import { GetFeaturedBlogQuery,BlogList } from '../../schema' -import { getFeatuedBlogQuery } from '../../utils/queries/get-featued-query' +import { getFeatuedBlogsQuery } from '../../utils/queries/get-featued-query' export type BlogVariables = { take?: number, @@ -18,7 +18,7 @@ export default function getFeaturedBlogOperation({ }): Promise<{ featuredBlogs: GetFeaturedBlogQuery[],totalItems:number }> async function getFeaturedBlog({ - query = getFeatuedBlogQuery, + query = getFeatuedBlogsQuery, variables: { ...vars } = {}, config: cfg, }: { diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index 871352070..c095ec030 100644 --- a/framework/vendure/utils/normalize.ts +++ b/framework/vendure/utils/normalize.ts @@ -1,6 +1,6 @@ import { Cart } from '@commerce/types/cart' import { ProductCard, Product } from '@commerce/types/product' -import { CartFragment, SearchResultFragment,Favorite } from '../schema' +import { CartFragment, SearchResultFragment,Favorite, BlogList } from '../schema' export function normalizeSearchResult(item: SearchResultFragment): ProductCard { return { @@ -83,4 +83,19 @@ export function normalizeProductCard(product: Product): ProductCard { facetValueIds: product.facetValueIds, collectionIds: product.collectionIds, } +} + +export function normalizeBlogList(blog: BlogList) { + return { + id: blog.id, + title: blog.translations[0]?.title, + imageSrc: blog.featuredAsset?.preview ?? null, + slug: blog.translations[0]?.slug, + description: blog.translations[0]?.description, + isPublish: blog.isPublish, + isFeatured:blog.isFeatured, + authorName: blog.authorName, + authorAvatarAsset : blog.authorAvatarAsset?.preview, + createdAt: blog.createdAt + } } \ No newline at end of file diff --git a/framework/vendure/utils/queries/get-featued-query.ts b/framework/vendure/utils/queries/get-featued-query.ts index 63ed82736..ff0a77e5b 100644 --- a/framework/vendure/utils/queries/get-featued-query.ts +++ b/framework/vendure/utils/queries/get-featued-query.ts @@ -1,5 +1,5 @@ -export const getFeatuedBlogQuery = /* GraphQL */ ` - query GetFeaturedBlog($options: BlogListOptions) { +export const getFeatuedBlogsQuery = /* GraphQL */ ` + query GetFeaturedBlogs($options: BlogListOptions) { featuredBlogs( options: $options){ items { id diff --git a/pages/blogs.tsx b/pages/blogs.tsx index 7c3483a94..715d9fe24 100644 --- a/pages/blogs.tsx +++ b/pages/blogs.tsx @@ -8,27 +8,29 @@ import { getAllPromies } from 'src/utils/funtion.utils'; import { PromiseWithKey } from 'src/utils/types.utils'; interface Props { - blogsResult: { blogs?: BlogCardProps[],featuredBlog?: BlogCardProps[] }, + blogs?: BlogCardProps[], + featuredBlog?: BlogCardProps[], totalItems: number } -export default function BlogsPage({blogsResult,totalItems}:Props) { - let date = new Date(blogsResult.featuredBlog?.[0]?.createdAt ?? '' ); +export default function BlogsPage({ blogs, featuredBlog, totalItems }:Props) { + + let date = new Date(featuredBlog?.[0]?.createdAt ?? '' ); let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear(); - + return( <> - + ) } @@ -43,17 +45,16 @@ export async function getStaticProps({ let promisesWithKey = [] as PromiseWithKey[] let props = {} as any; - const {featuredBlogs} = await commerce.getFeaturedBlog({ variables: { - take: DEFAULT_BLOG_PAGE_SIZE + take: 1 }, config, preview, }) // Blogs - const idFeaturedBlog = featuredBlogs[0].id; + const idFeaturedBlog = featuredBlogs?.[0]?.id; const blogsPromise = commerce.getAllBlogs({ variables: { excludeBlogIds: [idFeaturedBlog], @@ -74,8 +75,9 @@ export async function getStaticProps({ return null }) - props['blogsResult']['featuredBlog'] = featuredBlogs; + props.featuredBlog = featuredBlogs; + console.log(props) return { props, revalidate: 60 diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx index 27a6c32b5..babf2e987 100644 --- a/src/components/common/CardBlog/CardBlog.tsx +++ b/src/components/common/CardBlog/CardBlog.tsx @@ -19,7 +19,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {

- +
diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss new file mode 100644 index 000000000..2f6541e7e --- /dev/null +++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss @@ -0,0 +1,18 @@ +.listBlogCardSkeleton { + display: flex; + overflow: hidden; + width: 90%; + justify-content: space-between; + div{ + min-width: 32rem; + } + + &.wrap { + flex-wrap: wrap; + overflow: unset; + > div { + margin-bottom: 1.6rem; + } + } + +} diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx new file mode 100644 index 000000000..015a97374 --- /dev/null +++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx @@ -0,0 +1,20 @@ +import classNames from 'classnames' +import { ProductCardSkeleton } from '..' +import s from './ListBlogCardSkeleton.module.scss' + +type Props = { + count?: number + isWrap?: boolean, +} +const ListBlogCardSkeleton = ({ count = 3, isWrap }: Props) => { + + return ( +
+ { + Array.from(Array(count).keys()).map(item => ) + } +
+ ) +} + +export default ListBlogCardSkeleton diff --git a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx index 9063f1968..20447851a 100644 --- a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx +++ b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx @@ -5,15 +5,13 @@ import s from './ListProductCardSkeleton.module.scss' type Props = { count?: number isWrap?: boolean, - isBlog?:boolean } -const ListProductCardSkeleton = ({ count = 3, isWrap,isBlog=false }: Props) => { +const ListProductCardSkeleton = ({ count = 3, isWrap }: Props) => { return ( -
+
{ - Array.from(Array(count).keys()).map(item => ) - + Array.from(Array(count).keys()).map(item => ) }
) diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 2b7724b73..e2c28e186 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -55,4 +55,5 @@ export { default as FormForgot} from './ForgotPassword/FormForgot/FormForgot' export { default as FormResetPassword} from './ForgotPassword/FormResetPassword/FormResetPassword' export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton' export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton' +export { default as ListBlogCardSkeleton} from './ListBlogCardSkeleton/ListBlogCardSkeleton' diff --git a/src/components/hooks/blog/useGetBlogList.tsx b/src/components/hooks/blog/useGetBlogList.tsx index d844ae911..9db7a3a5a 100644 --- a/src/components/hooks/blog/useGetBlogList.tsx +++ b/src/components/hooks/blog/useGetBlogList.tsx @@ -1,4 +1,5 @@ import { GetAllBlogsQuery, QueryBlogs,BlogList } from '@framework/schema' +import { normalizeBlogList } from '@framework/utils/normalize' import { getAllBlogsQuery } from '@framework/utils/queries/get-all-blog-query' import gglFetcher from 'src/utils/gglFetcher' import useSWR from 'swr' @@ -7,18 +8,7 @@ const useGetBlogList = (options?: QueryBlogs) => { const { data, isValidating, ...rest } = useSWR([getAllBlogsQuery, options], gglFetcher) return { - blogs: data?.blogs?.items?.map((val:BlogList)=>({ - id: val.id, - title: val.translations[0]?.title, - imageSrc: val.featuredAsset?.preview ?? null, - slug: val.translations[0]?.slug, - description: val.translations[0]?.description, - isPublish: val.isPublish, - isFeatured:val.isFeatured, - authorName: val.authorName, - authorAvatarAsset : val.authorAvatarAsset?.preview, - createdAt: val.createdAt - })), + blogs: data?.blogs?.items?.map((blog:BlogList)=>normalizeBlogList(blog)), totalItems: data?.blogs?.totalItems || null, loading: isValidating, ...rest diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx index dd88d073b..d9dbf26ed 100644 --- a/src/components/modules/blogs/BlogsList/BlogsList.tsx +++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx @@ -1,5 +1,5 @@ import { useRouter } from 'next/router' -import React, { useEffect, useState,useRef } from 'react' +import React, { useEffect, useState,useRef, useMemo } 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' @@ -7,7 +7,7 @@ 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' +import { ListBlogCardSkeleton } from 'src/components/common' interface BlogsListProps { blogList?: BlogCardProps[], @@ -19,12 +19,13 @@ interface BlogsListProps { const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => { - const DEFAULT_BLOGS_ARGS = { + const DEFAULT_BLOGS_ARGS = useMemo(()=> ({ excludeBlogIds: [idFeatured], options:{ skip: 1, take: DEFAULT_BLOG_PAGE_SIZE } - } + }),[idFeatured]); + const router = useRouter(); const [initialQueryFlag, setInitialQueryFlag] = useState(true) @@ -69,7 +70,7 @@ const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => { return (
- {(!initialQueryFlag && loading && !blogs) && } + {(!initialQueryFlag && loading && !blogs) && }
{ From 0e91041a7da7577aabaed8ccbc9a1eac5b0b7e0e Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Fri, 22 Oct 2021 09:47:40 +0700 Subject: [PATCH 3/3] :bug: bug: fix bug show blogs :%s --- pages/blogs.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/blogs.tsx b/pages/blogs.tsx index 715d9fe24..35369b931 100644 --- a/pages/blogs.tsx +++ b/pages/blogs.tsx @@ -16,7 +16,8 @@ export default function BlogsPage({ blogs, featuredBlog, totalItems }:Props) { let date = new Date(featuredBlog?.[0]?.createdAt ?? '' ); let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear(); - + + return( <> @@ -63,7 +64,7 @@ export async function getStaticProps({ config, preview, }) - promisesWithKey.push({ key: 'blogsResult', promise: blogsPromise }) + promisesWithKey.push({ key: 'blogs', promise: blogsPromise , keyResult: 'blogs' }) try { @@ -77,7 +78,6 @@ export async function getStaticProps({ props.featuredBlog = featuredBlogs; - console.log(props) return { props, revalidate: 60