From ac58e4a35108b5312a133ec5404109453e32844e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 10 Jan 2021 16:16:49 -0300 Subject: [PATCH] Normalizer --- .../api/operations/get-all-products.ts | 38 +------------------ .../bigcommerce/api/operations/get-product.ts | 6 ++- framework/bigcommerce/lib/normalize.ts | 33 ++++++++++++++++ framework/types.d.ts | 24 ++++++------ pages/product/[slug].tsx | 2 - 5 files changed, 52 insertions(+), 51 deletions(-) create mode 100644 framework/bigcommerce/lib/normalize.ts diff --git a/framework/bigcommerce/api/operations/get-all-products.ts b/framework/bigcommerce/api/operations/get-all-products.ts index 7c91c4f1d..599109a7d 100644 --- a/framework/bigcommerce/api/operations/get-all-products.ts +++ b/framework/bigcommerce/api/operations/get-all-products.ts @@ -7,41 +7,7 @@ import filterEdges from '../utils/filter-edges' import setProductLocaleMeta from '../utils/set-product-locale-meta' import { productConnectionFragment } from '../fragments/product' import { BigcommerceConfig, getConfig } from '..' - -function productsNormalizer(arr: any[]): Product[] { - // Normalizes products arr response and flattens node edges - return arr.map( - ({ - node: { - entityId: id, - images, - variants, - productOptions, - prices, - path, - ...rest - }, - }) => ({ - id, - path, - slug: path.slice(1, -1), - images: images.edges.map( - ({ node: { urlOriginal, altText, ...rest } }: any) => ({ - url: urlOriginal, - alt: altText, - ...rest, - }) - ), - variants: variants.edges.map(({ node }: any) => node), - productOptions: productOptions.edges.map(({ node }: any) => node), - price: { - value: prices.price.value, - currencyCode: prices.price.currencyCode, - }, - ...rest, - }) - ) -} +import { normalizeProduct } from '../../lib/normalize' export const getAllProductsQuery = /* GraphQL */ ` query getAllProducts( @@ -161,7 +127,7 @@ async function getAllProducts({ }) } - return { products: productsNormalizer(products) } + return { products: products.map(normalizeProduct) } } export default getAllProducts diff --git a/framework/bigcommerce/api/operations/get-product.ts b/framework/bigcommerce/api/operations/get-product.ts index e75e87607..50efb97aa 100644 --- a/framework/bigcommerce/api/operations/get-product.ts +++ b/framework/bigcommerce/api/operations/get-product.ts @@ -2,6 +2,7 @@ import type { GetProductQuery, GetProductQueryVariables } from '../../schema' import setProductLocaleMeta from '../utils/set-product-locale-meta' import { productInfoFragment } from '../fragments/product' import { BigcommerceConfig, getConfig } from '..' +import { normalizeProduct } from '@framework/lib/normalize' export const getProductQuery = /* GraphQL */ ` query getProduct( @@ -92,7 +93,7 @@ async function getProduct({ variables: ProductVariables config?: BigcommerceConfig preview?: boolean -}): Promise { +}): Promise { config = getConfig(config) const locale = vars.locale || config.locale @@ -109,7 +110,8 @@ async function getProduct({ if (locale && config.applyLocale) { setProductLocaleMeta(product) } - return { product } + + return { product: normalizeProduct(product as any) } } return {} diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts new file mode 100644 index 000000000..f3a316319 --- /dev/null +++ b/framework/bigcommerce/lib/normalize.ts @@ -0,0 +1,33 @@ +import { ProductNode } from '@framework/api/operations/get-all-products' + +export function normalizeProduct(productNode: ProductNode | any): Product { + const { + entityId: id, + images, + variants, + productOptions, + prices, + path, + ...rest + } = productNode + + return { + id, + path, + slug: path.slice(1, -1), + images: images.edges?.map( + ({ node: { urlOriginal, altText, ...rest } }: any) => ({ + url: urlOriginal, + alt: altText, + ...rest, + }) + ), + variants: variants?.edges?.map(({ node }: any) => node), + productOptions: productOptions?.edges?.map(({ node }: any) => node), + price: { + value: prices?.price.value, + currencyCode: prices?.price.currencyCode, + }, + ...rest, + } +} diff --git a/framework/types.d.ts b/framework/types.d.ts index 87347da7b..6d4e573fc 100644 --- a/framework/types.d.ts +++ b/framework/types.d.ts @@ -1,11 +1,15 @@ -interface Product { +interface Entity { id: string | number + [prop: string]: any +} + +interface Product extends Entity { name: string description: string slug: string path?: string - images: ProductImage[] - variants: ProductVariant[] + images: ProductImage[] | any[] | undefined + variants: ProductVariant[] | any[] | undefined price: ProductPrice } interface ProductImage { @@ -19,25 +23,23 @@ interface ProductVariant { interface ProductPrice { value: number - currencyCode: 'USD' | 'ARS' + currencyCode: 'USD' | 'ARS' | string | undefined retailValue?: number saleValue?: number } -interface Cart { +interface Cart extends Entity { id: string products: Pick[] } -interface Wishlist { - id: string +interface Wishlist extends Entity { products: Pick[] } interface Order {} -interface Customer { - id: string | number | undefined +interface Customer extends Entity { [prop: string]: any } @@ -45,12 +47,12 @@ type UseCustomerResponse = { customer: Customer } | null -interface Category { +interface Category extends Entity { id: string name: string } -interface Brand { +interface Brand extends Entity { id: string name: string } diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 008cd95d6..4f17dcbad 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -7,8 +7,6 @@ import { useRouter } from 'next/router' import { Layout } from '@components/common' import { ProductView } from '@components/product' -// Data - import { getConfig } from '@framework/api' import getProduct from '@framework/api/operations/get-product' import getAllPages from '@framework/api/operations/get-all-pages'