forked from crowetic/commerce
Type fixes
This commit is contained in:
parent
a3e021ec79
commit
9309bff517
@ -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 />
|
||||||
|
@ -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 }
|
||||||
|
@ -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',
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user