crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-26 19:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix code

Browse Source
This commit is contained in:
Quangnhankie
2021-10-18 22:54:55 +07:00
parent 111e831d3d
commit dd31beb260
18 changed files with 236 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/CardBlog/CardBlog.tsx
View File

@@ -6,8 +6,11 @@ import { ImgWithLink } from '..'
import s from './CardBlog.module.scss'
export interface BlogCardProps extends BlogProps {
// todo: edit when intergrate API
isHidden:Boolean
isPublish?:Boolean,
isFeatured?:Boolean,
authorAvatarAsset?:string,
authorName?:string,
createdAt?:string
}
const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {

7
src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
View File

@@ -9,4 +9,11 @@
margin-bottom: 1.6rem;
}
}
&.isBlog{
width: 90%;
justify-content: space-between;
div{
min-width: 32rem;
}
}
}

9
src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
View File

@@ -4,14 +4,15 @@ import s from './ListProductCardSkeleton.module.scss'
type Props = {
count?: number
isWrap?: boolean
isWrap?: boolean,
isBlog?:boolean
}
const ListProductCardSkeleton = ({ count = 3, isWrap }: Props) => {
const ListProductCardSkeleton = ({ count = 3, isWrap,isBlog=false }: Props) => {
return (
<div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
<div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap }, { [s.isBlog]: isBlog })}>
{
Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} isBlog={isBlog} />)
}
</div>

8
src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
View File

@@ -1,14 +1,16 @@
import SkeletonImage from "../SkeletonCommon/SkeletonImage/SkeletonImage"
import SkeletonParagraph from "../SkeletonCommon/SkeletonParagraph/SkeletonParagraph"
import s from './ProductCardSkeleton.module.scss'
const ProductCardSkeleton = ({ }) => {
type Props = {
isBlog?:boolean
}
const ProductCardSkeleton = ({isBlog=false }) => {
return (
<div className={s.productCardSkeleton}>
<SkeletonImage />
<div className={s.content}>
<SkeletonParagraph rows={3} />
<SkeletonParagraph rows={isBlog ? 2 : 3} />
</div>
</div>
)

8
src/components/hooks/blog/useGetBlogList.tsx
View File

@@ -5,7 +5,7 @@ import useSWR from 'swr'
const useGetBlogList = (options?: QueryBlogs) => {
const { data, isValidating, ...rest } = useSWR<GetAllBlogsQuery>([getAllBlogsQuery, options], gglFetcher)
console.log(isValidating);
return {
blogs: data?.blogs?.items?.map((val:BlogList)=>({
id: val.id,
@@ -13,7 +13,11 @@ const useGetBlogList = (options?: QueryBlogs) => {
imageSrc: val.featuredAsset?.preview ?? null,
slug: val.translations[0]?.slug,
description: val.translations[0]?.description,
isHidden: val.isHidden
isPublish: val.isPublish,
isFeatured:val.isFeatured,
authorName: val.authorName,
authorAvatarAsset : val.authorAvatarAsset?.preview,
createdAt: val.createdAt
})),
totalItems: data?.blogs?.totalItems || null,
loading: isValidating,

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

@@ -15,19 +15,20 @@ interface BlogsListProps {
}
const DEFAULT_BLOGS_ARGS = {
excludeBlogIds: ["28"],
options:{
skip: 1, take: DEFAULT_BLOG_PAGE_SIZE
}
}
const BlogsList = ({ blogList,total }:BlogsListProps) => {
const router = useRouter();
const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
const [optionQueryBlog, setOptionQueryBlog] = useState<QueryBlogs>(DEFAULT_BLOGS_ARGS)
const { blogs, totalItems, loading } = useGetBlogList(optionQueryBlog);
// console.log(blogs);
const onPageChange = (page:number) => {
@@ -49,7 +50,7 @@ const BlogsList = ({ blogList,total }:BlogsListProps) => {
query.options.skip = page * DEFAULT_BLOG_PAGE_SIZE;
setOptionQueryBlog(query);
setInitialQueryFlag(false);
console.log(query)
},[router.query])
@@ -59,18 +60,19 @@ const BlogsList = ({ blogList,total }:BlogsListProps) => {
}else{
data = blogs
}
console.log(blogList);
return (
<section>
<div className={s.wrapper}>
{(!initialQueryFlag && loading && !blogs) && <ListProductCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap />}
{(!initialQueryFlag && loading && !blogs) && <ListProductCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap isBlog={true} />}
<div className={s.list}>
{
data?.map((product,index)=> {
return(
<div className={s.card} key={`${product.title}-${index}`}>
{!product.isHidden && <CardBlog {...product} /> }
{product.isPublish && <CardBlog {...product} /> }
</div>
)
})

2
src/utils/constanst.utils.ts
View File

@@ -171,6 +171,8 @@ export const FEATURED = [
export const DEFAULT_BLOG_PAGE_SIZE = 6;
export const DEFAULT_FEATURED_BLOG_PAGE_SIZE = 1;
export const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
export const STATE_OPTIONS = [

8
src/utils/funtion.utils.ts
View File

@@ -1,3 +1,4 @@
import { BlogList } from '@framework/schema';
import { Facet } from "@commerce/types/facet";
import { Collection, FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
@@ -127,4 +128,9 @@ export const getCategoryNameFromCollectionId = (colelctions: Collection[], colle
export function getAllPromies(promies: PromiseWithKey[]) {
return promies.map(item => item.promise)
}
}
export function getIdFeaturedBlog(blog: BlogList) {
return blog?.id
}