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

feat: get favorite products

Browse Source
This commit is contained in:
Quangnhankie
2021-10-12 14:33:35 +07:00
parent 71475d66ec
commit 694c3ac783
10 changed files with 136 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
framework/vendure/schema.d.ts vendored
View File

@@ -3203,6 +3203,16 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
>,
>
}
export type QueryFavorite = {
options: FavoriteListOptions
}
export type FavoriteListOptions = {
skip?: Maybe<Scalars['Int']>
take?: Maybe<Scalars['Int']>
}
export type FavoriteList = PaginatedList & {
items: [Favorite!]!
totalItems: Int!
@@ -3216,6 +3226,12 @@ type Favorite = Node & {
customer: Customer!
}
type FavouriteOption = Customer & {
favorites(options: FavoriteListOptions): FavoriteList!
}
export type GetAllProductPathsQueryVariables = Exact<{
first?: Maybe<Scalars['Int']>
}>

11
framework/vendure/utils/queries/active-customer-query.ts
View File

@@ -1,5 +1,3 @@
import { searchResultFragment } from '../fragments/search-result-fragment'
export const activeCustomerQuery = /* GraphQL */ `
query activeCustomer {
activeCustomer {
@@ -11,15 +9,6 @@ export const activeCustomerQuery = /* GraphQL */ `
items{
product{
id
name
slug
assets{
source
preview
}
variants{
price
}
}
}
}

27
framework/vendure/utils/queries/get-favorite-product-query.ts Normal file
View File

@@ -0,0 +1,27 @@
export const getFavoriteProductQuery = /* GraphQL */ `
query activeCustomer($options: FavoriteListOptions) {
activeCustomer {
id
firstName
lastName
emailAddress
favorites(options: $options){
items{
product{
id
name
slug
assets{
source
preview
}
variants{
price
}
}
}
totalItems
}
}
}
`

12
src/components/common/ProductList/ProductList.tsx
View File

@@ -14,10 +14,10 @@ interface ProductListProps {
onPageChange?: (page: number) => void
}
const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
const ProductList = ({ data, total = data?.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
const router = useRouter()
const {wishlistId } = useActiveCustomer();
const handlePageChange = (page: number) => {
onPageChange && onPageChange(page)
}
@@ -34,20 +34,20 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
<div className={s.wrapper}>
<div className={s.list}>
{
data.map((product, index) => {
data?.map((product, index) => {
let activeWishlist = wishlistId?.findIndex((val:string) => val == product.id) !== -1;
return <ProductCard activeWishlist={activeWishlist} {...product} key={index} />
})
}
{
data.length === 0 && <div className={s.empty}>
data?.length === 0 && <div className={s.empty}>
<EmptyCommon />
<ButtonCommon onClick={handleShowAllProduct}>Show all products</ButtonCommon>
</div>
}
</div>
<div className={classNames(s.pagination, { [s.hide]: data.length === 0 })}>
<PaginationCommon defaultCurrent={defaultCurrentPage} total={total} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
<div className={classNames(s.pagination, { [s.hide]: data?.length === 0 })}>
<PaginationCommon defaultCurrent={defaultCurrentPage} total={total ?? 0} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
</div>
</div>
)

1
src/components/hooks/account/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as useGetFavoriteProduct } from './useGetFavoriteProduct'

25
src/components/hooks/account/useGetFavoriteProduct.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { ActiveCustomerQuery,QueryFavorite,Favorite } from '@framework/schema'
import { getFavoriteProductQuery } from '@framework/utils/queries/get-favorite-product-query'
import gglFetcher from 'src/utils/gglFetcher'
import useSWR from 'swr'
const useGetFavoriteProduct = (options:QueryFavorite) => {
const { data, ...rest } = useSWR<ActiveCustomerQuery>([getFavoriteProductQuery, options], gglFetcher)
console.log(options);
return {
itemWishlist:
data?.activeCustomer?.favorites?.items?.map((val:Favorite)=>({
id: val.product?.id,
name:val.product?.name,
slug:val.product?.slug,
price:val.product?.variants?.[0].price,
imageSrc: val.product?.assets?.[0].preview,
currencyCode: val.product?.variants?.[0].currencyCode
})
),
totalItems: data?.activeCustomer?.favorites?.totalItems,
...rest
}
}
export default useGetFavoriteProduct

2
src/components/hooks/auth/useActiveCustomer.tsx
View File

@@ -5,7 +5,7 @@ import useSWR from 'swr'
const useActiveCustomer = () => {
const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
console.log(data);
return {
customer: data?.activeCustomer,
userInfo:{

13
src/components/modules/account/AccountPage/AccountPage.module.scss
View File

@@ -4,7 +4,17 @@
@apply bg-background-gray;
padding: 3.2rem 2rem;
min-height: 70rem;
@screen xl {
section{
div{
div{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
}
}
@screen md {
padding-left: 2.8rem;
padding-right: 2.8rem;
@@ -28,4 +38,5 @@
margin-bottom: 3.8rem;
}
}
}

29
src/components/modules/account/AccountPage/AccountPage.tsx
View File

@@ -8,11 +8,13 @@ import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
import OrderInfomation from './components/OrderInformation/OrderInformation'
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils"
import { ACCOUNT_TAB, QUERY_KEY,DEFAULT_PAGE_SIZE } from "src/utils/constanst.utils"
import { useRouter } from "next/router"
import { useActiveCustomer } from 'src/components/hooks/auth'
import { useGetFavoriteProduct } from 'src/components/hooks/account'
import { QueryFavorite } from "@framework/schema"
import { getPageFromQuery} from 'src/utils/funtion.utils'
const waiting = [
{
@@ -79,13 +81,30 @@ const getTabIndex = (tab?: string): number => {
}
}
const DEFAULT_FAVORITE_ARGS = {
options:{
skip:1, take:DEFAULT_PAGE_SIZE
}
}
const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
const router = useRouter()
const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
const [modalVisible, setModalVisible] = useState(false);
// const { itemWishlist } = useActiveCustomer();
// console.log(itemWishlist)
const [optionQueryFavorite, setoptionQueryFavorite] = useState<QueryFavorite>(DEFAULT_FAVORITE_ARGS)
const { itemWishlist,totalItems }= useGetFavoriteProduct(optionQueryFavorite);
console.log(itemWishlist,totalItems)
// skip
useEffect(() => {
const query = { ...DEFAULT_FAVORITE_ARGS } as QueryFavorite;
const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
query.options.skip = page * DEFAULT_PAGE_SIZE;
setoptionQueryFavorite(query);
},[router.query])
useEffect(() => {
const query = router.query[QUERY_KEY.TAB] as string
const index = getTabIndex(query)
@@ -115,7 +134,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
<OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
</TabPane>
<TabPane tabName="Favourite">
<FavouriteProducts products={PRODUCT_CART_DATA_TEST} />
<FavouriteProducts products={itemWishlist} totalItems={totalItems} />
</TabPane>
</AccountNavigation>
</section>

32
src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
View File

@@ -1,18 +1,34 @@
import React from "react"
import s from './FavouriteProducts.module.scss'
import {ProductList} from '../../../../../common'
import { useRouter } from 'next/router'
import React, { useState } from "react"
import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import { ProductList } from '../../../../../common'
import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard'
import s from './FavouriteProducts.module.scss'
interface FavouriteProductsProps {
products: ProductCardProps[];
products: ProductCardProps[],
totalItems:number
}
const FavouriteProducts = ({ products } : FavouriteProductsProps) => {
const FavouriteProducts = ({ products,totalItems } : FavouriteProductsProps) => {
const router = useRouter()
const [currentPage, setCurrentPage] = useState(0);
function onPageChange(page:number){
setCurrentPage(page)
router.push({
pathname: ROUTE.ACCOUNT,
query: {
...router.query,
[QUERY_KEY.PAGE]: page
}
},
undefined, { shallow: true }
)
}
return (
<section className={s.favouriteProducts}>
<ProductList data={products} />
<ProductList data={products} total={totalItems} onPageChange={onPageChange}/>
</section>
)
}