From 694c3ac78305f4622e2c24b109df4687a9cbb568 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Tue, 12 Oct 2021 14:33:35 +0700 Subject: [PATCH 1/2] feat: get favorite products --- framework/vendure/schema.d.ts | 16 ++++++++++ .../utils/queries/active-customer-query.ts | 11 ------- .../queries/get-favorite-product-query.ts | 27 ++++++++++++++++ .../common/ProductList/ProductList.tsx | 12 +++---- src/components/hooks/account/index.ts | 1 + .../hooks/account/useGetFavoriteProduct.tsx | 25 +++++++++++++++ .../hooks/auth/useActiveCustomer.tsx | 2 +- .../AccountPage/AccountPage.module.scss | 13 +++++++- .../account/AccountPage/AccountPage.tsx | 29 ++++++++++++++--- .../FavouriteProducts/FavouriteProducts.tsx | 32 ++++++++++++++----- 10 files changed, 136 insertions(+), 32 deletions(-) create mode 100644 framework/vendure/utils/queries/get-favorite-product-query.ts create mode 100644 src/components/hooks/account/index.ts create mode 100644 src/components/hooks/account/useGetFavoriteProduct.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 705e340c2..d3ca320f0 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3203,6 +3203,16 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { >, > } + +export type QueryFavorite = { + options: FavoriteListOptions +} + +export type FavoriteListOptions = { + skip?: Maybe + take?: Maybe +} + 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 }> diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts index 7384dde78..014ea130e 100644 --- a/framework/vendure/utils/queries/active-customer-query.ts +++ b/framework/vendure/utils/queries/active-customer-query.ts @@ -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 - } } } } diff --git a/framework/vendure/utils/queries/get-favorite-product-query.ts b/framework/vendure/utils/queries/get-favorite-product-query.ts new file mode 100644 index 000000000..aff1a2bf5 --- /dev/null +++ b/framework/vendure/utils/queries/get-favorite-product-query.ts @@ -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 + } + } +} +` diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index de9cb94d5..111173fa9 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -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
{ - data.map((product, index) => { + data?.map((product, index) => { let activeWishlist = wishlistId?.findIndex((val:string) => val == product.id) !== -1; return }) } { - data.length === 0 &&
+ data?.length === 0 &&
Show all products
}
-
- +
+
) diff --git a/src/components/hooks/account/index.ts b/src/components/hooks/account/index.ts new file mode 100644 index 000000000..73fbcc66b --- /dev/null +++ b/src/components/hooks/account/index.ts @@ -0,0 +1 @@ +export { default as useGetFavoriteProduct } from './useGetFavoriteProduct' \ No newline at end of file diff --git a/src/components/hooks/account/useGetFavoriteProduct.tsx b/src/components/hooks/account/useGetFavoriteProduct.tsx new file mode 100644 index 000000000..4cc94ed5e --- /dev/null +++ b/src/components/hooks/account/useGetFavoriteProduct.tsx @@ -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([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 diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index a3d8ce34a..6f841c523 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -5,7 +5,7 @@ import useSWR from 'swr' const useActiveCustomer = () => { const { data, ...rest } = useSWR([activeCustomerQuery], gglFetcher) - console.log(data); + return { customer: data?.activeCustomer, userInfo:{ diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss index 89beebd86..240c369a8 100644 --- a/src/components/modules/account/AccountPage/AccountPage.module.scss +++ b/src/components/modules/account/AccountPage/AccountPage.module.scss @@ -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; } } + } \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index 5a83135cb..d1fe6625e 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -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(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) => { - + diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx index f88605242..f82266c81 100644 --- a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx +++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx @@ -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 (
- +
) } From de664810999bd3c03466624dd72859ba57e6656f Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 14 Oct 2021 10:33:12 +0700 Subject: [PATCH 2/2] bug: fix favorite products --- .../api/operations/get-all-products.ts | 4 +-- framework/vendure/utils/normalize.ts | 14 +++++++++- .../queries/get-favorite-product-query.ts | 3 +- pages/index.tsx | 21 ++++++++++---- .../hooks/account/useGetFavoriteProduct.tsx | 14 ++-------- .../account/AccountPage/AccountPage.tsx | 28 ++++++++++--------- .../home/FreshProducts/FreshProducts.tsx | 1 + .../modules/home/HomeSpice/HomeSpice.tsx | 8 +++--- src/utils/constanst.utils.ts | 1 + 9 files changed, 56 insertions(+), 38 deletions(-) diff --git a/framework/vendure/api/operations/get-all-products.ts b/framework/vendure/api/operations/get-all-products.ts index 5fb458f67..f70b4bcf3 100644 --- a/framework/vendure/api/operations/get-all-products.ts +++ b/framework/vendure/api/operations/get-all-products.ts @@ -5,7 +5,7 @@ import { normalizeSearchResult } from '../../utils/normalize' import { getAllProductsQuery } from '../../utils/queries/get-all-products-query' import { OperationContext } from '@commerce/api/operations' -export type ProductVariables = { first?: number, facetValueIds?: string[] } +export type ProductVariables = { first?: number, facetValueIds?: string[],collectionSlug?:string } export default function getAllProductsOperation({ commerce, @@ -31,13 +31,13 @@ export default function getAllProductsOperation({ input: { take: vars.first, facetValueIds: vars.facetValueIds, + collectionSlug: vars.collectionSlug, groupByProduct: true, }, } const { data } = await config.fetch(query, { variables, }) - return { products: data.search.items.map((item) => normalizeSearchResult(item)), totalItems: data.search.totalItems as number, diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts index cc76e5f97..d088b2579 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 } from '@commerce/types/product' -import { CartFragment, SearchResultFragment } from '../schema' +import { CartFragment, SearchResultFragment,Favorite,ActiveCustomerQuery } from '../schema' export function normalizeSearchResult(item: SearchResultFragment): ProductCard { return { @@ -21,6 +21,18 @@ export function normalizeSearchResult(item: SearchResultFragment): ProductCard { } } +export function normalizeFavoriteProductResult(item: Favorite) { + return { + id: item.product.id, + name: item.product.name, + slug: item.product.slug, + imageSrc: item.product.assets[0].preview ? item.product.assets[0].preview + '?w=800&mode=crop' : '', + price: item.product.variants[0].priceWithTax as number / 100, + currencyCode: item.product.variants[0].currencyCode, + } +} + + export function normalizeCart(order: CartFragment): Cart { return { id: order.id.toString(), diff --git a/framework/vendure/utils/queries/get-favorite-product-query.ts b/framework/vendure/utils/queries/get-favorite-product-query.ts index aff1a2bf5..f73e0fb26 100644 --- a/framework/vendure/utils/queries/get-favorite-product-query.ts +++ b/framework/vendure/utils/queries/get-favorite-product-query.ts @@ -16,7 +16,8 @@ query activeCustomer($options: FavoriteListOptions) { preview } variants{ - price + priceWithTax + currencyCode } } } diff --git a/pages/index.tsx b/pages/index.tsx index 010094de4..ab86005e5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,7 +6,7 @@ import { GetStaticPropsContext } from 'next'; import { Layout } from 'src/components/common'; import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice'; -import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED } from 'src/utils/constanst.utils'; +import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED,COLLECTION_SLUG_SPICE } from 'src/utils/constanst.utils'; import { getAllFacetValueIdsByParentCode, getAllFacetValuesForFeatuedProducts, getAllPromies, getFreshFacetId } from 'src/utils/funtion.utils'; import { PromiseWithKey } from 'src/utils/types.utils'; @@ -15,11 +15,12 @@ interface Props { freshProducts: ProductCard[], featuredProducts: ProductCard[], collections: Collection[] - + spiceProducts:ProductCard[] } export default function Home({ featuredAndDiscountFacetsValue, freshProducts, featuredProducts, - collections }: Props) { + collections,spiceProducts }: Props) { + return ( <> @@ -28,7 +29,7 @@ export default function Home({ featuredAndDiscountFacetsValue, - + {spiceProducts.length>0 && } @@ -99,16 +100,24 @@ export async function getStaticProps({ }) promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' }) + // spiceProducts + const spiceProducts = commerce.getAllProducts({ + variables: { + collectionSlug: COLLECTION_SLUG_SPICE, + }, + config, + preview, + }) + promisesWithKey.push({ key: 'spiceProducts', promise: spiceProducts, keyResult: 'products' }) try { const promises = getAllPromies(promisesWithKey) const rs = await Promise.all(promises) - + promisesWithKey.map((item, index) => { props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index] return null }) - return { props, revalidate: 60, diff --git a/src/components/hooks/account/useGetFavoriteProduct.tsx b/src/components/hooks/account/useGetFavoriteProduct.tsx index 4cc94ed5e..157bc91a3 100644 --- a/src/components/hooks/account/useGetFavoriteProduct.tsx +++ b/src/components/hooks/account/useGetFavoriteProduct.tsx @@ -1,22 +1,14 @@ import { ActiveCustomerQuery,QueryFavorite,Favorite } from '@framework/schema' +import { normalizeFavoriteProductResult } from '@framework/utils/normalize' 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([getFavoriteProductQuery, options], gglFetcher) - console.log(options); + // console.log( data?.activeCustomer?.favorites?.items); 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 - }) - ), + itemWishlist: data?.activeCustomer?.favorites?.items?.map((item:Favorite) => normalizeFavoriteProductResult(item)), totalItems: data?.activeCustomer?.favorites?.totalItems, ...rest } diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index d1fe6625e..ffba6b811 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -1,20 +1,20 @@ +import { QueryFavorite } from "@framework/schema" +import commerce from '@lib/api/commerce' +import { GetStaticPropsContext } from 'next' +import { useRouter } from "next/router" import React, { useEffect, useState } from "react" -import s from './AccountPage.module.scss' - import { HeadingCommon, TabPane } from "src/components/common" - +import { useGetFavoriteProduct } from 'src/components/hooks/account' +import { ACCOUNT_TAB, DEFAULT_PAGE_SIZE, QUERY_KEY } from "src/utils/constanst.utils" +import { getPageFromQuery } from 'src/utils/funtion.utils' +import { PromiseWithKey } from 'src/utils/types.utils' import AccountNavigation from '../AccountNavigation/AccountNavigation' +import s from './AccountPage.module.scss' import AccountInfomation from "./components/AccountInfomation/AccountInfomation" +import EditInfoModal from './components/EditInfoModal/EditInfoModal' 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,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 = [ { @@ -93,8 +93,9 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); const [optionQueryFavorite, setoptionQueryFavorite] = useState(DEFAULT_FAVORITE_ARGS) + const { itemWishlist,totalItems }= useGetFavoriteProduct(optionQueryFavorite); - console.log(itemWishlist,totalItems) + // skip useEffect(() => { @@ -143,4 +144,5 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { ) } -export default AccountPage \ No newline at end of file +export default AccountPage + diff --git a/src/components/modules/home/FreshProducts/FreshProducts.tsx b/src/components/modules/home/FreshProducts/FreshProducts.tsx index 6d30459f3..8a628fe2f 100644 --- a/src/components/modules/home/FreshProducts/FreshProducts.tsx +++ b/src/components/modules/home/FreshProducts/FreshProducts.tsx @@ -10,6 +10,7 @@ interface FreshProductsProps { } const FreshProducts = ({ data, collections }: FreshProductsProps) => { + const dataWithCategory = useMemo(() => { return data.map(item => { return { diff --git a/src/components/modules/home/HomeSpice/HomeSpice.tsx b/src/components/modules/home/HomeSpice/HomeSpice.tsx index 5c24f1809..25d528766 100644 --- a/src/components/modules/home/HomeSpice/HomeSpice.tsx +++ b/src/components/modules/home/HomeSpice/HomeSpice.tsx @@ -2,16 +2,16 @@ import React from 'react' import { ProductCarousel } from 'src/components/common' import { SPICE_DATA_TEST } from "../../../../utils/demo-data" import s from './HomeSpice.module.scss' - +import { ProductCard } from '@commerce/types/product' interface HomeSpice { - + data: ProductCard[] } -const HomeSpice = ({}: HomeSpice) => { +const HomeSpice = ({data}: HomeSpice) => { return (
- +
) } diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 7d0cf9ba5..108e96265 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -184,3 +184,4 @@ export const STATE_OPTIONS = [ }, ] +export const COLLECTION_SLUG_SPICE ="spice";