feat: getProductDetail

This commit is contained in:
Tan Le 2021-09-30 15:47:57 +07:00
parent 128a9f0537
commit a4c23a2181
7 changed files with 46 additions and 13 deletions

View File

@ -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<

3
next-env.d.ts vendored
View File

@ -1,6 +1,3 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

View File

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

View File

@ -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<GetProductQuery>([query],gglFetcher)
return { productDetail: data?.product, ...rest }
}
export default useProductDetail

View File

@ -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 (
<section className={s.productImgItem}>
<ImgWithLink src={src} alt={alt} />
<ImgWithLink src={preview} alt={name} />
</section >
)
}

View File

@ -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 (
<section className={s.productImgs}>
<CarouselCommon<ProductImgItemProps>
data={DATA}
data={productDetail?.assets ?? []}
itemKey="product-detail-img"
Component={ProductImgItem}
responsive={RESPONSIVE}

View File

@ -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 (
<section className={s.productInfo}>
<div className={s.info}>
<LabelCommon shape='half'>SEAFOOD</LabelCommon>
<h2 className={s.heading}>SeaPAk</h2>
<h2 className={s.heading}>{productDetail?.name}</h2>
<div className={s.price}>
<div className={s.old}>
<span className={s.number}>Rp 32.000</span>
<span className={s.number}>Rp {productDetail?.variants[0].priceWithTax}</span>
<LabelCommon type='discount'>-15%</LabelCommon>
</div>
<div className={s.current}>Rp 27.500</div>
<div className={s.current}>Rp {productDetail?.variants[0].price}</div>
</div>
<div className={s.description}>
In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
{productDetail?.description}
</div>
</div>
<div className={s.actions}>