4
0
forked from crowetic/commerce

Type fixes

This commit is contained in:
Luis Alvarez 2020-10-19 12:40:26 -05:00
parent a3e021ec79
commit 9309bff517
5 changed files with 24 additions and 27 deletions

View File

@ -1,30 +1,24 @@
import cn from 'classnames' import cn from 'classnames'
import s from './ProductCard.module.css' import s from './ProductCard.module.css'
import { FC, ReactNode, Component } from 'react' import { FC, ReactNode, Component } from 'react'
import type { Product } from '@lib/bigcommerce/api/operations/get-all-products'
import { Heart } from '@components/icon' import { Heart } from '@components/icon'
import Link from 'next/link' import Link from 'next/link'
interface Props { interface Props {
className?: string className?: string
children?: ReactNode[] | Component[] | any[] children?: ReactNode[] | Component[] | any[]
node: ProductData product: Product['node']
variant?: 'slim' | 'simple' variant?: 'slim' | 'simple'
} }
interface ProductData { const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
name: string
images: any
prices: any
path: string
}
const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
if (variant === 'slim') { if (variant === 'slim') {
return ( return (
<div className="relative overflow-hidden box-border"> <div className="relative overflow-hidden box-border">
<img <img
className="object-scale-down h-48" className="object-scale-down h-48"
src={p.images.edges[0].node.urlSmall} src={p.images.edges?.[0]?.node.urlSmall}
/> />
<div className="absolute inset-0 flex items-center justify-end mr-8"> <div className="absolute inset-0 flex items-center justify-end mr-8">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words"> <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
@ -41,7 +35,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
<div className="absolute z-10 inset-0 flex items-center justify-center"> <div className="absolute z-10 inset-0 flex items-center justify-center">
<img <img
className="w-full object-cover" className="w-full object-cover"
src={p.images.edges[0].node.urlXL} src={p.images.edges?.[0]?.node.urlXL}
/> />
</div> </div>
<div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} /> <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
@ -50,7 +44,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
<p className={s.productTitle}> <p className={s.productTitle}>
<span>{p.name}</span> <span>{p.name}</span>
</p> </p>
<span className={s.productPrice}>${p.prices.price.value}</span> <span className={s.productPrice}>${p.prices?.price.value}</span>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>
<Heart /> <Heart />

View File

@ -43,11 +43,13 @@ export const getAllProductsQuery = /* GraphQL */ `
${productConnectionFragment} ${productConnectionFragment}
` `
export type Product = NonNullable< export type ProductEdge = NonNullable<
NonNullable<GetAllProductsQuery['site']['products']['edges']>[0] NonNullable<GetAllProductsQuery['site']['products']['edges']>[0]
> >
export type Products = Product[] export type Product = ProductEdge
export type Products = ProductEdge[]
export type GetAllProductsResult< export type GetAllProductsResult<
T extends Record<keyof GetAllProductsResult, any[]> = { products: Products } T extends Record<keyof GetAllProductsResult, any[]> = { products: Products }

View File

@ -6,7 +6,7 @@ export default async function fetchGraphqlApi<Q, V = any>(
query: string, query: string,
{ variables, preview }: CommerceAPIFetchOptions<V> = {} { variables, preview }: CommerceAPIFetchOptions<V> = {}
): Promise<Q> { ): Promise<Q> {
log.warn(query) // log.warn(query)
const config = getConfig() const config = getConfig()
const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), { const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
method: 'POST', method: 'POST',

View File

@ -28,13 +28,13 @@ export default function Home({
return ( return (
<div className="mt-3"> <div className="mt-3">
<Grid> <Grid>
{featuredProducts.map((p: any) => ( {featuredProducts.map(({ node }) => (
<ProductCard key={p.id} {...p} /> <ProductCard key={node.path} product={node} />
))} ))}
</Grid> </Grid>
<Marquee variant="secondary"> <Marquee variant="secondary">
{products.slice(0, 3).map((p: any) => ( {products.slice(0, 3).map(({ node }) => (
<ProductCard key={p.id} {...p} variant="slim" /> <ProductCard key={node.path} product={node} variant="slim" />
))} ))}
</Marquee> </Marquee>
<Hero <Hero
@ -48,13 +48,13 @@ export default function Home({
Natural." Natural."
/> />
<Grid layout="B"> <Grid layout="B">
{products.slice(3, 6).map((p: any) => ( {products.slice(3, 6).map(({ node }) => (
<ProductCard key={p.id} {...p} /> <ProductCard key={node.path} product={node} />
))} ))}
</Grid> </Grid>
<Marquee> <Marquee>
{products.slice(0, 3).map((p: any) => ( {products.slice(0, 3).map(({ node }) => (
<ProductCard key={p.id} {...p} variant="slim" /> <ProductCard key={node.path} product={node} variant="slim" />
))} ))}
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-row w-full px-12">
@ -84,8 +84,8 @@ export default function Home({
</div> </div>
<div className="flex-1"> <div className="flex-1">
<Grid layout="normal"> <Grid layout="normal">
{products.map((p: any) => ( {products.map(({ node }) => (
<ProductCard key={p.id} {...p} variant="simple" /> <ProductCard key={node.path} product={node} variant="simple" />
))} ))}
</Grid> </Grid>
</div> </div>

View File

@ -141,10 +141,11 @@ export default function Search({
{data ? ( {data ? (
<Grid layout="normal"> <Grid layout="normal">
{data.products.map((p: any) => ( {data.products.map(({ node }) => (
<ProductCard <ProductCard
key={node.path}
className="animate__animated animate__fadeIn" className="animate__animated animate__fadeIn"
{...p} product={node}
/> />
))} ))}
</Grid> </Grid>