From 50c50b6d53122401df3c7446cdf05d903580f5f3 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Sun, 25 Oct 2020 19:50:33 -0500 Subject: [PATCH] Removed code related to unused image sizes API --- .../core/EnhancedImage/EnhancedImage.tsx | 2 +- .../product/ProductCard/ProductCard.tsx | 4 +- .../product/ProductView/ProductView.tsx | 4 +- components/ui/Marquee/Marquee.tsx | 10 --- lib/bigcommerce/api/fragments/product.ts | 21 ++----- lib/bigcommerce/api/index.ts | 63 +++---------------- .../api/operations/get-all-products.ts | 20 ++---- lib/bigcommerce/api/operations/get-product.ts | 19 ++---- lib/bigcommerce/schema.d.ts | 36 +++-------- 9 files changed, 36 insertions(+), 143 deletions(-) diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx index 0c7bdd96d..3ff97224b 100644 --- a/components/core/EnhancedImage/EnhancedImage.tsx +++ b/components/core/EnhancedImage/EnhancedImage.tsx @@ -27,7 +27,7 @@ type Props = Omit< const EnhancedImage: FC = ({ ...props }) => { - const [ref, inView] = useInView({ + const [ref] = useInView({ triggerOnce: true, rootMargin: '220px 0px', }) diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 4d352c794..c7b2c7aa2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -25,7 +25,7 @@ const ProductCard: FC = ({ imgHeight, priority, }) => { - const src = p.images.edges?.[0]?.node.urlLarge! + const src = p.images.edges?.[0]?.node.urlOriginal! const { price } = usePrice({ amount: p.prices?.price?.value, baseAmount: p.prices?.retailPrice?.value, @@ -41,7 +41,7 @@ const ProductCard: FC = ({ = ({ product, className }) => {
{product.images.edges?.map((image, i) => ( -
+
{product.name} = ({ className = '', children, variant = 'primary' }) => { className ) - // return ( - //
- //
- // {items.map((p: any) => ( - // - // ))} - //
- //
- // ) - return (
diff --git a/lib/bigcommerce/api/fragments/product.ts b/lib/bigcommerce/api/fragments/product.ts index 751179b99..73856ca2c 100644 --- a/lib/bigcommerce/api/fragments/product.ts +++ b/lib/bigcommerce/api/fragments/product.ts @@ -1,15 +1,3 @@ -export const responsiveImageFragment = /* GraphQL */ ` - fragment responsiveImage on Image { - urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight) - urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight) - urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight) - urlXL: url(width: $imgXLWidth, height: $imgXLHeight) - urlOriginal - altText - isDefault - } -` - export const swatchOptionFragment = /* GraphQL */ ` fragment swatchOption on SwatchOptionValue { isDefault @@ -59,7 +47,9 @@ export const productInfoFragment = /* GraphQL */ ` images { edges { node { - ...responsiveImage + urlOriginal + altText + isDefault } } } @@ -68,7 +58,9 @@ export const productInfoFragment = /* GraphQL */ ` node { entityId defaultImage { - ...responsiveImage + urlOriginal + altText + isDefault } } } @@ -93,7 +85,6 @@ export const productInfoFragment = /* GraphQL */ ` } } - ${responsiveImageFragment} ${multipleChoiceOptionFragment} ` diff --git a/lib/bigcommerce/api/index.ts b/lib/bigcommerce/api/index.ts index 3406bd964..78118b432 100644 --- a/lib/bigcommerce/api/index.ts +++ b/lib/bigcommerce/api/index.ts @@ -1,48 +1,18 @@ import type { RequestInit } from '@vercel/fetch' -import { CommerceAPIConfig } from 'lib/commerce/api' -import { GetAllProductsQueryVariables } from '../schema' +import type { CommerceAPIConfig } from 'lib/commerce/api' import fetchGraphqlApi from './utils/fetch-graphql-api' import fetchStoreApi from './utils/fetch-store-api' -export interface Images { - small?: ImageOptions - medium?: ImageOptions - large?: ImageOptions - xl?: ImageOptions -} - -export interface ImageOptions { - width: number - height?: number -} - -export type ProductImageVariables = Pick< - GetAllProductsQueryVariables, - | 'imgSmallWidth' - | 'imgSmallHeight' - | 'imgMediumWidth' - | 'imgMediumHeight' - | 'imgLargeWidth' - | 'imgLargeHeight' - | 'imgXLWidth' - | 'imgXLHeight' -> - -export interface BigcommerceConfigOptions extends CommerceAPIConfig { +export interface BigcommerceConfig extends CommerceAPIConfig { // Indicates if the returned metadata with translations should be applied to the // data or returned as it is applyLocale?: boolean - images?: Images storeApiUrl: string storeApiToken: string storeApiClientId: string storeApiFetch(endpoint: string, options?: RequestInit): Promise } -export interface BigcommerceConfig extends BigcommerceConfigOptions { - readonly imageVariables?: ProductImageVariables -} - const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL @@ -70,39 +40,20 @@ if (!(STORE_API_URL && STORE_API_TOKEN && STORE_API_CLIENT_ID)) { export class Config { private config: BigcommerceConfig - constructor(config: Omit) { + constructor(config: Omit) { this.config = { ...config, // The customerCookie is not customizable for now, BC sets the cookie and it's // not important to rename it customerCookie: 'SHOP_TOKEN', - imageVariables: this.getImageVariables(config.images), } } - getImageVariables(images?: Images) { - return images - ? { - imgSmallWidth: images.small?.width, - imgSmallHeight: images.small?.height, - imgMediumWidth: images.medium?.height, - imgMediumHeight: images.medium?.height, - imgLargeWidth: images.large?.height, - imgLargeHeight: images.large?.height, - imgXLWidth: images.xl?.height, - imgXLHeight: images.xl?.height, - } - : undefined - } - getConfig(userConfig: Partial = {}) { - const { images: configImages, ...config } = this.config - const images = { ...configImages, ...userConfig.images } - - return Object.assign(config, userConfig, { - images, - imageVariables: this.getImageVariables(images), - }) + return Object.entries(userConfig).reduce( + (cfg, [key, value]) => Object.assign(cfg, { [key]: value }), + { ...this.config } + ) } setConfig(newConfig: Partial) { diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts index 64c9e7baa..dbd439d9e 100644 --- a/lib/bigcommerce/api/operations/get-all-products.ts +++ b/lib/bigcommerce/api/operations/get-all-products.ts @@ -6,7 +6,7 @@ import type { RecursivePartial, RecursiveRequired } from '../utils/types' import filterEdges from '../utils/filter-edges' import setProductLocaleMeta from '../utils/set-product-locale-meta' import { productConnectionFragment } from '../fragments/product' -import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..' +import { BigcommerceConfig, getConfig } from '..' export const getAllProductsQuery = /* GraphQL */ ` query getAllProducts( @@ -14,14 +14,6 @@ export const getAllProductsQuery = /* GraphQL */ ` $locale: String = "null" $entityIds: [Int!] $first: Int = 10 - $imgSmallWidth: Int = 320 - $imgSmallHeight: Int - $imgMediumWidth: Int = 640 - $imgMediumHeight: Int - $imgLargeWidth: Int = 960 - $imgLargeHeight: Int - $imgXLWidth: Int = 1280 - $imgXLHeight: Int $products: Boolean = false $featuredProducts: Boolean = false $bestSellingProducts: Boolean = false @@ -71,11 +63,10 @@ export type ProductTypes = | 'bestSellingProducts' | 'newestProducts' -export type ProductVariables = { field?: ProductTypes } & Images & - Omit< - GetAllProductsQueryVariables, - ProductTypes | keyof ProductImageVariables | 'hasLocale' - > +export type ProductVariables = { field?: ProductTypes } & Omit< + GetAllProductsQueryVariables, + ProductTypes | 'hasLocale' +> async function getAllProducts(opts?: { variables?: ProductVariables @@ -104,7 +95,6 @@ async function getAllProducts({ const locale = vars.locale || config.locale const variables: GetAllProductsQueryVariables = { - ...config.imageVariables, ...vars, locale, hasLocale: !!locale, diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts index 2fe06413f..229d402bc 100644 --- a/lib/bigcommerce/api/operations/get-product.ts +++ b/lib/bigcommerce/api/operations/get-product.ts @@ -5,21 +5,13 @@ import type { import type { RecursivePartial, RecursiveRequired } from '../utils/types' import setProductLocaleMeta from '../utils/set-product-locale-meta' import { productInfoFragment } from '../fragments/product' -import { BigcommerceConfig, getConfig, Images } from '..' +import { BigcommerceConfig, getConfig } from '..' export const getProductQuery = /* GraphQL */ ` query getProduct( $hasLocale: Boolean = false $locale: String = "null" $path: String! - $imgSmallWidth: Int = 320 - $imgSmallHeight: Int - $imgMediumWidth: Int = 640 - $imgMediumHeight: Int - $imgLargeWidth: Int = 960 - $imgLargeHeight: Int - $imgXLWidth: Int = 1280 - $imgXLHeight: Int ) { site { route(path: $path) { @@ -45,10 +37,10 @@ export type GetProductResult< T extends { product?: any } = { product?: ProductNode } > = T -export type ProductVariables = Images & { locale?: string } & ( - | { path: string; slug?: never } - | { path?: never; slug: string } - ) +export type ProductVariables = { locale?: string } & ( + | { path: string; slug?: never } + | { path?: never; slug: string } +) async function getProduct(opts: { variables: ProductVariables @@ -74,7 +66,6 @@ async function getProduct({ const locale = vars.locale || config.locale const variables: GetProductQueryVariables = { - ...config.imageVariables, ...vars, locale, hasLocale: !!locale, diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts index 393bfdbb9..69cff1ea6 100644 --- a/lib/bigcommerce/schema.d.ts +++ b/lib/bigcommerce/schema.d.ts @@ -1684,16 +1684,6 @@ export type CategoryTreeItemFragment = { 'entityId' | 'name' | 'path' | 'description' | 'productCount' > -export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick< - Image, - 'urlOriginal' | 'altText' | 'isDefault' -> & { - urlSmall: Image['url'] - urlMedium: Image['url'] - urlLarge: Image['url'] - urlXL: Image['url'] - } - export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick< SwatchOptionValue, 'isDefault' | 'hexColors' @@ -1749,7 +1739,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick< Array< Maybe< { __typename?: 'ImageEdge' } & { - node: { __typename?: 'Image' } & ResponsiveImageFragment + node: { __typename?: 'Image' } & Pick< + Image, + 'urlOriginal' | 'altText' | 'isDefault' + > } > > @@ -1762,7 +1755,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick< { __typename?: 'VariantEdge' } & { node: { __typename?: 'Variant' } & Pick & { defaultImage?: Maybe< - { __typename?: 'Image' } & ResponsiveImageFragment + { __typename?: 'Image' } & Pick< + Image, + 'urlOriginal' | 'altText' | 'isDefault' + > > } } @@ -1869,14 +1865,6 @@ export type GetAllProductsQueryVariables = Exact<{ locale?: Maybe entityIds?: Maybe> first?: Maybe - imgSmallWidth?: Maybe - imgSmallHeight?: Maybe - imgMediumWidth?: Maybe - imgMediumHeight?: Maybe - imgLargeWidth?: Maybe - imgLargeHeight?: Maybe - imgXLWidth?: Maybe - imgXLHeight?: Maybe products?: Maybe featuredProducts?: Maybe bestSellingProducts?: Maybe @@ -1902,14 +1890,6 @@ export type GetProductQueryVariables = Exact<{ hasLocale?: Maybe locale?: Maybe path: Scalars['String'] - imgSmallWidth?: Maybe - imgSmallHeight?: Maybe - imgMediumWidth?: Maybe - imgMediumHeight?: Maybe - imgLargeWidth?: Maybe - imgLargeHeight?: Maybe - imgXLWidth?: Maybe - imgXLHeight?: Maybe }> export type GetProductQuery = { __typename?: 'Query' } & {