From 1126030abc2775fec7d0aa1786224071514314f2 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Sun, 10 Oct 2021 14:45:44 +0700 Subject: [PATCH 1/4] feat: edit activeCustomer --- .../vendure/utils/queries/active-customer-query.ts | 7 +++++++ next-env.d.ts | 3 --- src/components/common/ItemWishList/ItemWishList.tsx | 10 ++++++++-- src/components/common/ProductCard/ProductCard.tsx | 4 +++- src/components/common/ProductList/ProductList.tsx | 2 ++ 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts index 65b280743..014ea130e 100644 --- a/framework/vendure/utils/queries/active-customer-query.ts +++ b/framework/vendure/utils/queries/active-customer-query.ts @@ -5,6 +5,13 @@ export const activeCustomerQuery = /* GraphQL */ ` firstName lastName emailAddress + favorites{ + items{ + product{ + id + } + } + } } } ` diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 74d0b3b04..f8be07cd4 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -4,16 +4,22 @@ import React, { memo } from 'react' import s from './ItemWishList.module.scss' interface Props { + id:string, isActive?: boolean, - onChange?: () => void + onChange?: () => string } -const ItemWishList = memo(({isActive=false, onChange}:Props) => { +const ItemWishList = memo(({id,isActive=false, onChange}:Props) => { + // function toggleFavorite(id:string):string|undefined{ + // // alert(id); + // return id; + // } return(
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index 4761aac92..50df7695f 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -17,6 +17,7 @@ export interface ProductCardProps extends ProductCard { } const ProductCardComponent = ({ + id, collection, name, slug, @@ -34,6 +35,7 @@ const ProductCardComponent = ({
} + return (
@@ -63,7 +65,7 @@ const ProductCardComponent = ({
{price} {currencyCode}
- +
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index c901b4d46..5c3d9058a 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -33,6 +33,8 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
{ data.map((product, index) => { + console.log(product); + return }) } From 391bba5d31a2e35723d16d801b952563edd27fd9 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Sun, 10 Oct 2021 22:06:14 +0700 Subject: [PATCH 2/4] feat: toggle wishlist --- framework/vendure/schema.d.ts | 9 +++++++-- src/components/common/ProductList/ProductList.tsx | 8 +++++--- src/components/hooks/auth/useActiveCustomer.tsx | 9 ++++++--- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index d83b0276a..a6ab64d19 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3198,10 +3198,15 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { activeCustomer?: Maybe< { __typename?: 'Customer' } & Pick< Customer, - 'id' | 'firstName' | 'lastName' | 'emailAddress' - > + 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'favorites' + >, > } +export type FavoriteList = { + items: [Favorite!]! + totalItems: Int! +} + export type GetAllProductPathsQueryVariables = Exact<{ first?: Maybe diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index 5c3d9058a..59884eca8 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames' import { useRouter } from 'next/router' import React from 'react' +import { useActiveCustomer } from 'src/components/hooks/auth' import { DEFAULT_PAGE_SIZE, ROUTE } from 'src/utils/constanst.utils' import { ButtonCommon, EmptyCommon } from '..' import PaginationCommon from '../PaginationCommon/PaginationCommon' import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard' import s from "./ProductList.module.scss" - +import { FavoriteList } from '@framework/schema' interface ProductListProps { data: ProductCardProps[], total?: number, @@ -16,6 +17,8 @@ interface ProductListProps { const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => { const router = useRouter() + const {wishlist:FavoriteList } = useActiveCustomer(); + const handlePageChange = (page: number) => { onPageChange && onPageChange(page) } @@ -33,8 +36,7 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
{ data.map((product, index) => { - console.log(product); - + return }) } diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index f0f4f6fef..b4891c44d 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -1,11 +1,14 @@ -import { ActiveCustomerQuery } from '@framework/schema' +import { ActiveCustomerQuery,FavoriteList } from '@framework/schema' import { activeCustomerQuery } from '@framework/utils/queries/active-customer-query' import gglFetcher from 'src/utils/gglFetcher' import useSWR from 'swr' - const useActiveCustomer = () => { const { data, ...rest } = useSWR([activeCustomerQuery], gglFetcher) - return { customer: data?.activeCustomer, ...rest } + + return { + customer: data?.activeCustomer, + wishlist:data?.activeCustomer?.favorites, + ...rest } } export default useActiveCustomer From 279c20e1af9e62250cff43b44e9e3f1487872541 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Mon, 11 Oct 2021 09:59:46 +0700 Subject: [PATCH 3/4] feat: create toggle product wishlist --- framework/vendure/schema.d.ts | 10 ++++- .../mutations/toggle-wishlist-mutation.tsx | 9 ++++ .../utils/queries/active-customer-query.ts | 11 +++++ .../common/ItemWishList/ItemWishList.tsx | 25 ++++++++--- .../common/ProductCard/ProductCard.tsx | 4 +- .../common/ProductList/ProductList.tsx | 9 ++-- .../hooks/auth/useActiveCustomer.tsx | 21 ++++++--- src/components/hooks/product/index.ts | 1 + .../product/useToggleProductWishlist.tsx | 44 +++++++++++++++++++ .../account/AccountPage/AccountPage.tsx | 3 ++ 10 files changed, 118 insertions(+), 19 deletions(-) create mode 100644 framework/vendure/utils/mutations/toggle-wishlist-mutation.tsx create mode 100644 src/components/hooks/product/useToggleProductWishlist.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index a6ab64d19..705e340c2 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3198,15 +3198,23 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { activeCustomer?: Maybe< { __typename?: 'Customer' } & Pick< Customer, + FavoriteList, 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'favorites' >, > } -export type FavoriteList = { +export type FavoriteList = PaginatedList & { items: [Favorite!]! totalItems: Int! } +type Favorite = Node & { + id: ID! + createdAt: DateTime! + updatedAt: DateTime! + product: Product + customer: Customer! +} export type GetAllProductPathsQueryVariables = Exact<{ first?: Maybe diff --git a/framework/vendure/utils/mutations/toggle-wishlist-mutation.tsx b/framework/vendure/utils/mutations/toggle-wishlist-mutation.tsx new file mode 100644 index 000000000..d3dcb7c18 --- /dev/null +++ b/framework/vendure/utils/mutations/toggle-wishlist-mutation.tsx @@ -0,0 +1,9 @@ +export const toggleWishlistMutation = /* GraphQL */ ` + mutation toggleFavorite($productId:ID!){ + toggleFavorite(productId:$productId){ + items{ + id + } + } + } +` diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts index 014ea130e..7384dde78 100644 --- a/framework/vendure/utils/queries/active-customer-query.ts +++ b/framework/vendure/utils/queries/active-customer-query.ts @@ -1,3 +1,5 @@ +import { searchResultFragment } from '../fragments/search-result-fragment' + export const activeCustomerQuery = /* GraphQL */ ` query activeCustomer { activeCustomer { @@ -9,6 +11,15 @@ export const activeCustomerQuery = /* GraphQL */ ` items{ product{ id + name + slug + assets{ + source + preview + } + variants{ + price + } } } } diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index f8be07cd4..ac72c6879 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -2,7 +2,9 @@ import classNames from 'classnames' import IconHeart from 'src/components/icons/IconHeart' import React, { memo } from 'react' import s from './ItemWishList.module.scss' - +import { useToggleProductWishlist } from '../../../../src/components/hooks/product' +import { useMessage } from 'src/components/contexts' +import { LANGUAGE } from 'src/utils/language.utils' interface Props { id:string, isActive?: boolean, @@ -10,17 +12,28 @@ interface Props { } const ItemWishList = memo(({id,isActive=false, onChange}:Props) => { - // function toggleFavorite(id:string):string|undefined{ - // // alert(id); - // return id; - // } + const {onToggleProductWishlist} = useToggleProductWishlist(); + const { showMessageSuccess, showMessageError } = useMessage(); + + function toggleWishlist(){ + onToggleProductWishlist({productId:id},onSignupCallBack) + } + + const onSignupCallBack = (isSuccess: boolean, message?: string) => { + if (isSuccess) { + // showMessageSuccess("Create account successfully. Please verify your email to login.", 15000) + } else { + showMessageError(message || LANGUAGE.MESSAGE.ERROR) + } + } + return(
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index 50df7695f..51038c9d6 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -14,6 +14,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell' export interface ProductCardProps extends ProductCard { buttonText?: string isSingleButton?: boolean, + activeWishlist?:boolean } const ProductCardComponent = ({ @@ -28,6 +29,7 @@ const ProductCardComponent = ({ imageSrc, isNotSell, isSingleButton, + activeWishlist }: ProductCardProps) => { if (isNotSell) { return
@@ -65,7 +67,7 @@ const ProductCardComponent = ({
{price} {currencyCode}
- +
diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index 59884eca8..041ccbf94 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -7,7 +7,6 @@ import { ButtonCommon, EmptyCommon } from '..' import PaginationCommon from '../PaginationCommon/PaginationCommon' import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard' import s from "./ProductList.module.scss" -import { FavoriteList } from '@framework/schema' interface ProductListProps { data: ProductCardProps[], total?: number, @@ -17,8 +16,8 @@ interface ProductListProps { const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => { const router = useRouter() - const {wishlist:FavoriteList } = useActiveCustomer(); - + const {wishlist } = useActiveCustomer(); + const handlePageChange = (page: number) => { onPageChange && onPageChange(page) } @@ -36,8 +35,8 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
{ data.map((product, index) => { - - return + let activeWishlist = wishlist?.findIndex((val:string) => val == product.id) !== -1; + return }) } { diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index b4891c44d..67aa798cf 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -1,14 +1,23 @@ -import { ActiveCustomerQuery,FavoriteList } from '@framework/schema' +import { ActiveCustomerQuery,Favorite } from '@framework/schema' import { activeCustomerQuery } from '@framework/utils/queries/active-customer-query' import gglFetcher from 'src/utils/gglFetcher' import useSWR from 'swr' + const useActiveCustomer = () => { const { data, ...rest } = useSWR([activeCustomerQuery], gglFetcher) - - return { - customer: data?.activeCustomer, - wishlist:data?.activeCustomer?.favorites, - ...rest } + console.log(data); + return { + customer: data?.activeCustomer, + userInfo:{ + firstName: data?.activeCustomer?.firstName, + lastName:data?.activeCustomer?.lastName, + email:data?.activeCustomer?.emailAddress, + phoneNumber: data?.activeCustomer?.phoneNumber, + address: data?.activeCustomer?.addresses?.[0] + }, + wishlist: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id), + ...rest + } } export default useActiveCustomer diff --git a/src/components/hooks/product/index.ts b/src/components/hooks/product/index.ts index ea2afe03a..68325a40b 100644 --- a/src/components/hooks/product/index.ts +++ b/src/components/hooks/product/index.ts @@ -1,3 +1,4 @@ export { default as useSearchProducts } from './useSearchProducts' +export { default as useToggleProductWishlist } from './useToggleProductWishlist' diff --git a/src/components/hooks/product/useToggleProductWishlist.tsx b/src/components/hooks/product/useToggleProductWishlist.tsx new file mode 100644 index 000000000..452707f46 --- /dev/null +++ b/src/components/hooks/product/useToggleProductWishlist.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react' +import useActiveCustomer from '../auth/useActiveCustomer' +import { FavoriteList } from '@framework/schema' +import fetcher from 'src/utils/fetcher' +import { CommonError } from 'src/domains/interfaces/CommonError' +import { toggleWishlistMutation } from '@framework/utils/mutations/toggle-wishlist-mutation' + +interface Props { + productId?:string +} + +const useToggleProductWishlist = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const { mutate } = useActiveCustomer() + + const onToggleProductWishlist = ( + { productId }:Props , + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + fetcher({ + query: toggleWishlistMutation, + variables: { + productId + }, + }) + .then((data) => { + mutate() + fCallBack(true) + return data + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + } + + return { loading, onToggleProductWishlist, error } +} + +export default useToggleProductWishlist diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index db5801235..5a83135cb 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -12,6 +12,7 @@ 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 { useRouter } from "next/router" +import { useActiveCustomer } from 'src/components/hooks/auth' const waiting = [ { @@ -82,6 +83,8 @@ 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) useEffect(() => { const query = router.query[QUERY_KEY.TAB] as string From 71475d66ec69a2370b7b94ed4840343e03c688ed Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Mon, 11 Oct 2021 10:05:16 +0700 Subject: [PATCH 4/4] bug: edit const --- src/components/common/ProductList/ProductList.tsx | 4 ++-- src/components/hooks/auth/useActiveCustomer.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index 041ccbf94..de9cb94d5 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -16,7 +16,7 @@ interface ProductListProps { const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => { const router = useRouter() - const {wishlist } = useActiveCustomer(); + const {wishlistId } = useActiveCustomer(); const handlePageChange = (page: number) => { onPageChange && onPageChange(page) @@ -35,7 +35,7 @@ const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChan
{ data.map((product, index) => { - let activeWishlist = wishlist?.findIndex((val:string) => val == product.id) !== -1; + let activeWishlist = wishlistId?.findIndex((val:string) => val == product.id) !== -1; return }) } diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index 67aa798cf..a3d8ce34a 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -15,7 +15,8 @@ const useActiveCustomer = () => { phoneNumber: data?.activeCustomer?.phoneNumber, address: data?.activeCustomer?.addresses?.[0] }, - wishlist: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id), + itemWishlist:data?.activeCustomer?.favorites?.items, + wishlistId: data?.activeCustomer?.favorites?.items.map((val:Favorite)=>val.product.id), ...rest } }