From a4c23a218151310f9c294f734cc671d81c53ea50 Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 30 Sep 2021 15:47:57 +0700 Subject: [PATCH] feat: getProductDetail --- framework/vendure/schema.d.ts | 2 +- next-env.d.ts | 3 -- src/components/hooks/product/index.tsx | 1 + .../hooks/product/useProductDetail.tsx | 31 +++++++++++++++++++ .../ProductImgItem/ProductImgItem.tsx | 8 ++--- .../components/ProductImgs/ProductImgs.tsx | 4 ++- .../components/ProductInfo/ProductInfo.tsx | 10 +++--- 7 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 src/components/hooks/product/index.tsx create mode 100644 src/components/hooks/product/useProductDetail.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 9d6b53c52..b664d8fa1 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3206,7 +3206,7 @@ export type GetProductQuery = { __typename?: 'Query' } & { variants: Array< { __typename?: 'ProductVariant' } & Pick< ProductVariant, - 'id' | 'priceWithTax' | 'currencyCode' + 'id' | 'priceWithTax' | 'currencyCode' | 'price' > & { options: Array< { __typename?: 'ProductOption' } & Pick< 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/hooks/product/index.tsx b/src/components/hooks/product/index.tsx new file mode 100644 index 000000000..bfe1abac2 --- /dev/null +++ b/src/components/hooks/product/index.tsx @@ -0,0 +1 @@ +export { default as useProductDetail } from './useProductDetail' \ No newline at end of file diff --git a/src/components/hooks/product/useProductDetail.tsx b/src/components/hooks/product/useProductDetail.tsx new file mode 100644 index 000000000..6a147d263 --- /dev/null +++ b/src/components/hooks/product/useProductDetail.tsx @@ -0,0 +1,31 @@ +import { GetProductQuery } from '@framework/schema' +import { gql } from 'graphql-request' +import gglFetcher from 'src/utils/gglFetcher' +import useSWR from 'swr' + +const query = gql` + query GetProductDetail($slug: String! = "hand-trowel") { + product(slug: $slug) { + name + description + variants { + price + priceWithTax + } + assets { + preview + name + } + } +} +` +interface ProductDetail { + slug: string +} + +const useProductDetail = () => { + const { data, ...rest } = useSWR([query],gglFetcher) + return { productDetail: data?.product, ...rest } +} + +export default useProductDetail \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx index 95236266c..931b0a36c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx @@ -3,15 +3,15 @@ import { ImgWithLink } from 'src/components/common' import s from './ProductImgItem.module.scss' export interface ProductImgItemProps { - src: string - alt?: string + preview: string + name?: string } -const ProductImgItem = ({ src, alt }: ProductImgItemProps) => { +const ProductImgItem = ({ preview, name }: ProductImgItemProps) => { return (
- +
) } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 475d0f22e..365faa73a 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ResponsiveType } from 'react-multi-carousel' import { CarouselCommon } from 'src/components/common' import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem' +import { useProductDetail } from 'src/components/hooks/product' import s from './ProductImgs.module.scss' interface Props { @@ -32,10 +33,11 @@ const RESPONSIVE: ResponsiveType = { }, } const ProductImgs = ({ }: Props) => { + const { productDetail } = useProductDetail() return (
- data={DATA} + data={productDetail?.assets ?? []} itemKey="product-detail-img" Component={ProductImgItem} responsive={RESPONSIVE} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 4abb62568..40779083c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' import { IconBuy } from 'src/components/icons' import { LANGUAGE } from 'src/utils/language.utils' +import { useProductDetail } from 'src/components/hooks/product' import s from './ProductInfo.module.scss' interface Props { @@ -10,20 +11,21 @@ interface Props { } const ProductInfo = ({ }: Props) => { + const {productDetail} = useProductDetail() return (
SEAFOOD -

SeaPAk

+

{productDetail?.name}

- Rp 32.000 + Rp {productDetail?.variants[0].priceWithTax} -15%
-
Rp 27.500
+
Rp {productDetail?.variants[0].price}
- In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley + {productDetail?.description}