From 148326c7ef32f475784b9720f11dd8052e27a455 Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 7 Oct 2021 16:16:24 +0700 Subject: [PATCH] feat: get-product-detail --- framework/commerce/types/product.ts | 2 + .../vendure/api/operations/get-product.ts | 3 +- .../utils/queries/get-product-query.ts | 3 + pages/product/[slug].tsx | 2 +- .../ProductInfoDetail/ProductInfoDetail.tsx | 85 ++++--------------- .../ProductImgItem/ProductImgItem.tsx | 8 +- .../components/ProductImgs/ProductImgs.tsx | 24 +----- .../components/ProductInfo/ProductInfo.tsx | 19 ++--- .../ReleventProducts/ReleventProducts.tsx | 1 - 9 files changed, 40 insertions(+), 107 deletions(-) diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index e02113814..ddf51c518 100644 --- a/framework/commerce/types/product.ts +++ b/framework/commerce/types/product.ts @@ -47,6 +47,8 @@ export type Product = { currencyCode: CurrencyCode options: ProductOption[] facetValueIds?: string[] + collectionIds?: string[] + collection?: string, } export type ProductCard = { diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts index 38eca93b4..0aa761ab0 100644 --- a/framework/vendure/api/operations/get-product.ts +++ b/framework/vendure/api/operations/get-product.ts @@ -53,7 +53,8 @@ export default function getProductOperation({ displayName: og.name, values: og.options.map((o) => ({ label: o.name })), })), - facetValueIds: product.facetValues.map(item=> item.id) + facetValueIds: product.facetValues.map(item=> item.id), + collectionIds: product.collections.map(item => item.id) } as Product } diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts index 3d2742383..6db960a96 100644 --- a/framework/vendure/utils/queries/get-product-query.ts +++ b/framework/vendure/utils/queries/get-product-query.ts @@ -39,6 +39,9 @@ export const getProductQuery = /* GraphQL */ ` facetValues { id } + collections { + id + } } } ` diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 24901277e..2da14a995 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -12,7 +12,7 @@ import { PromiseWithKey } from 'src/utils/types.utils' export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType) { return <> - + diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx index 2578a865f..072c1fd56 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -1,83 +1,28 @@ -import React from 'react' +import React, { useMemo } from 'react'; import ProductImgs from './components/ProductImgs/ProductImgs' import ProductInfo from './components/ProductInfo/ProductInfo' import s from './ProductInfoDetail.module.scss' -import { GetStaticPropsContext, GetStaticPathsContext, InferGetStaticPropsType } from 'next' -import commerce from '@lib/api/commerce' -import { PromiseWithKey } from 'src/utils/types.utils' -import { getAllPromies } from 'src/utils/funtion.utils' -import { ProductCard } from '@commerce/types/product'; -import { useRouter } from 'next/router' +import { Product } from '@commerce/types/product' +import { Collection } from '@framework/schema' +import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils'; interface Props { - productDetail: ProductCard[], + productDetail: Product, + collections: Collection[] } -const ProductInfoDetail = ({ product }: InferGetStaticPropsType) => { - console.log(product) +const ProductInfoDetail = ({ productDetail, collections }: Props) => { + const dataWithCategoryName = useMemo(() => { + return { + ...productDetail, + collection: getCategoryNameFromCollectionId(collections, productDetail.collectionIds ? productDetail.collectionIds[0] : undefined) + } + }, [productDetail, collections]) return (
- - + +
) } - -export async function getStaticProps({ - params, - locale, - locales, - preview, - }: GetStaticPropsContext<{ slug: string }>) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const productPromise = commerce.getProduct({ - variables: { slug: params!.slug }, - config, - preview, - }) - - // const allProductsPromise = commerce.getAllProducts({ - // variables: { first: 4 }, - // config, - // preview, - // }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - const { product } = await productPromise - // const { products: relatedProducts } = await allProductsPromise - - if (!product) { - throw new Error(`Product with slug '${params!.slug}' not found`) - } - - return { - props: { - pages, - product, - // relatedProducts, - categories, - }, - revalidate: 200, - } - } - -// export async function getStaticPaths({ locales }: GetStaticPathsContext) { -// const { products } = await commerce.getAllProductPaths() - -// return { -// paths: locales -// ? locales.reduce((arr, locale) => { -// // Add a product path for every locale -// products.forEach((product: any) => { -// arr.push(`/${locale}/product${product.path}`) -// }) -// return arr -// }, []) -// : products.map((product: any) => `/product${product.path}`), -// fallback: 'blocking', -// } -// } - export default ProductInfoDetail 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 931b0a36c..bebee187c 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 { - preview: string - name?: string + url: string + alt?: string } -const ProductImgItem = ({ preview, name }: ProductImgItemProps) => { +const ProductImgItem = ({ url, alt }: 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 365faa73a..c5624dc52 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -2,28 +2,13 @@ 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' +import { ProductImage } from '@commerce/types/product'; interface Props { - className?: string - children?: any, + productImage: ProductImage[] } -const DATA = [ - { - src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png', - alt: 'Meat', - }, - { - src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', - alt: 'Broccoli', - }, - { - src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', - alt: 'Broccoli', - } -] const RESPONSIVE: ResponsiveType = { desktop: { @@ -32,12 +17,11 @@ const RESPONSIVE: ResponsiveType = { slidesToSlide: 1, // optional, default to 1. }, } -const ProductImgs = ({ }: Props) => { - const { productDetail } = useProductDetail() +const ProductImgs = ({ productImage }: Props) => { return (
- data={productDetail?.assets ?? []} + data={productImage} 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 40779083c..c3e51d46d 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -1,31 +1,30 @@ +import { Product } from '@commerce/types/product' 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 { - className?: string - children?: any, + productInfoDetail: Product } -const ProductInfo = ({ }: Props) => { - const {productDetail} = useProductDetail() +const ProductInfo = ({ productInfoDetail }: Props) => { + console.log(productInfoDetail) return (
- SEAFOOD -

{productDetail?.name}

+ {productInfoDetail.collection} +

{productInfoDetail.name}

- Rp {productDetail?.variants[0].priceWithTax} + Rp {productInfoDetail.price} -15%
-
Rp {productDetail?.variants[0].price}
+
Rp {productInfoDetail.price}
- {productDetail?.description} + {productInfoDetail.description}
diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx index 147115dc2..d1afde538 100644 --- a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -23,7 +23,6 @@ const ReleventProducts = ({ data, collections }: Props) => { if (data.length === 0) { return null } - return (