Skip to content

Commit

Permalink
Changes/ Stable
Browse files Browse the repository at this point in the history
  • Loading branch information
okbel committed Oct 1, 2020
2 parents de94909 + 35ac41e commit 1c83344
Show file tree
Hide file tree
Showing 12 changed files with 268 additions and 6,740 deletions.
2 changes: 1 addition & 1 deletion components/product/ProductCard/ProductCard.module.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.root {
@apply flex flex-row px-2;
@apply w-full h-full flex flex-row px-2;
}
13 changes: 8 additions & 5 deletions components/product/ProductCard/ProductCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cn from "classnames";
import s from "./ProductCard.module.css";
import React, { FunctionComponent } from "react";

import { Heart } from "@components/icon";
interface Props {
className?: string;
children?: any;
Expand All @@ -12,13 +12,16 @@ const ProductCard: FunctionComponent<Props> = ({ className }) => {
return (
<div className={rootClassName}>
<div className="absolute">
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
{/* {productData.title} */}
<h1 className="px-8 py-2 bg-white text-black font-bold text-3xl">
T-Shirt
</h1>
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
{/* {productData.price} */}
<div className="px-6 py-2 pb-4 bg-white text-black font-semibold inline-block">
$50
</div>
</div>
<div className="absolute flex items-center justify-center h-12 w-12 bg-white text-black">
<Heart />
</div>
<div className="flex-1 h-full p-24">
<div className="bg-violet h-full"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/product/ProductGrid/ProductGrid.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import s from "./ProductGrid.module.css";

import ProductCard from "@components/ProductCard";
interface Props {
className?: string;
children?: any;
Expand Down
23 changes: 13 additions & 10 deletions lib/bigcommerce/api/operations/get-all-products.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {
import type {
GetAllProductsQuery,
GetAllProductsQueryVariables,
} from "lib/bigcommerce/schema";
import type { RecursivePartial, RecursiveRequired } from "../types";
import { getConfig, Images, ProductImageVariables } from "..";
import { RecursivePartial } from "../types";

export const getAllProductsQuery = /* GraphQL */ `
query getAllProducts(
Expand Down Expand Up @@ -104,42 +104,45 @@ export const getAllProductsQuery = /* GraphQL */ `

export interface GetAllProductsResult<T> {
products: T extends GetAllProductsQuery
? T["site"]["products"]["edges"]
? NonNullable<T["site"]["products"]["edges"]>
: unknown;
}

export type ProductVariables = Images &
Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>;

async function getAllProducts<T, V = any>(opts: {
query: string;
variables?: V;
}): Promise<GetAllProductsResult<T>>;

async function getAllProducts(opts?: {
query?: string;
variables?: ProductVariables;
}): Promise<GetAllProductsResult<GetAllProductsQuery>>;

async function getAllProducts<T, V = any>(opts: {
query: string;
variables?: V;
}): Promise<GetAllProductsResult<T>>;

async function getAllProducts({
query = getAllProductsQuery,
variables: vars,
}: {
query?: string;
variables?: ProductVariables;
} = {}): Promise<GetAllProductsResult<RecursivePartial<GetAllProductsQuery>>> {
} = {}): Promise<GetAllProductsResult<GetAllProductsQuery>> {
const config = getConfig();
const variables: GetAllProductsQueryVariables = {
...config.imageVariables,
...vars,
};
// RecursivePartial forces the method to check for every prop in the data, which is
// required in case there's a custom `query`
const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
query,
{ variables }
);
const products = data.site?.products?.edges;

return {
products: data?.site?.products?.edges,
products: (products as RecursiveRequired<typeof products>) ?? [],
};
}

Expand Down
131 changes: 131 additions & 0 deletions lib/bigcommerce/api/operations/get-product.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import type {
GetProductQuery,
GetProductQueryVariables,
} from 'lib/bigcommerce/schema';
import type { RecursivePartial, RecursiveRequired } from '../types';
import { getConfig, Images, ProductImageVariables } from '..';

export const getProductQuery = /* GraphQL */ `
query getProduct(
$slug: String!
$imgSmallWidth: Int = 320
$imgSmallHeight: Int
$imgMediumWidth: Int = 640
$imgMediumHeight: Int
$imgLargeWidth: Int = 960
$imgLargeHeight: Int
$imgXLWidth: Int = 1280
$imgXLHeight: Int
) {
site {
route(path: $slug) {
node {
__typename
... on Product {
entityId
name
path
brand {
name
}
description
prices {
price {
currencyCode
value
}
salePrice {
currencyCode
value
}
}
images {
edges {
node {
urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
urlMedium: url(
width: $imgMediumWidth
height: $imgMediumHeight
)
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
}
}
}
variants {
edges {
node {
entityId
}
}
}
options {
edges {
node {
entityId
displayName
isRequired
values {
edges {
node {
entityId
label
}
}
}
}
}
}
}
}
}
}
}
`;

export interface GetProductResult<T> {
product?: T extends GetProductQuery
? Extract<T['site']['route']['node'], { __typename: 'Product' }>
: unknown;
}

export type ProductVariables = Images &
Omit<GetProductQueryVariables, keyof ProductImageVariables>;

async function getProduct(opts: {
query?: string;
variables: ProductVariables;
}): Promise<GetProductResult<GetProductQuery>>;

async function getProduct<T, V = any>(opts: {
query: string;
variables: V;
}): Promise<GetProductResult<T>>;

async function getProduct({
query = getProductQuery,
variables: vars,
}: {
query?: string;
variables: ProductVariables;
}): Promise<GetProductResult<GetProductQuery>> {
const config = getConfig();
const variables: GetProductQueryVariables = {
...config.imageVariables,
...vars,
};
const data = await config.fetch<RecursivePartial<GetProductQuery>>(query, {
variables,
});
const product = data.site?.route?.node;

if (product?.__typename === 'Product') {
return {
product: product as RecursiveRequired<typeof product>,
};
}

return {};
}

export default getProduct;
4 changes: 4 additions & 0 deletions lib/bigcommerce/api/types/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export type RecursivePartial<T> = {
[P in keyof T]?: RecursivePartial<T[P]>;
};

export type RecursiveRequired<T> = {
[P in keyof T]-?: RecursiveRequired<T[P]>;
};
77 changes: 77 additions & 0 deletions lib/bigcommerce/schema.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1736,3 +1736,80 @@ export type GetAllProductsQuery = (
) }
) }
);

export type GetProductQueryVariables = Exact<{
slug: Scalars['String'];
imgSmallWidth?: Maybe<Scalars['Int']>;
imgSmallHeight?: Maybe<Scalars['Int']>;
imgMediumWidth?: Maybe<Scalars['Int']>;
imgMediumHeight?: Maybe<Scalars['Int']>;
imgLargeWidth?: Maybe<Scalars['Int']>;
imgLargeHeight?: Maybe<Scalars['Int']>;
imgXLWidth?: Maybe<Scalars['Int']>;
imgXLHeight?: Maybe<Scalars['Int']>;
}>;


export type GetProductQuery = (
{ __typename?: 'Query' }
& { site: (
{ __typename?: 'Site' }
& { route: (
{ __typename?: 'Route' }
& { node?: Maybe<{ __typename: 'Brand' } | { __typename: 'Category' } | (
{ __typename: 'Product' }
& Pick<Product, 'entityId' | 'name' | 'path' | 'description'>
& { brand?: Maybe<(
{ __typename?: 'Brand' }
& Pick<Brand, 'name'>
)>, prices?: Maybe<(
{ __typename?: 'Prices' }
& { price: (
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
), salePrice?: Maybe<(
{ __typename?: 'Money' }
& Pick<Money, 'currencyCode' | 'value'>
)> }
)>, images: (
{ __typename?: 'ImageConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'ImageEdge' }
& { node: (
{ __typename?: 'Image' }
& { urlSmall: Image['url'], urlMedium: Image['url'], urlLarge: Image['url'], urlXL: Image['url'] }
) }
)>>> }
), variants: (
{ __typename?: 'VariantConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'VariantEdge' }
& { node: (
{ __typename?: 'Variant' }
& Pick<Variant, 'entityId'>
) }
)>>> }
), options: (
{ __typename?: 'OptionConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionEdge' }
& { node: (
{ __typename?: 'ProductOption' }
& Pick<ProductOption, 'entityId' | 'displayName' | 'isRequired'>
& { values: (
{ __typename?: 'OptionValueConnection' }
& { edges?: Maybe<Array<Maybe<(
{ __typename?: 'OptionValueEdge' }
& { node: (
{ __typename?: 'ProductOptionValue' }
& Pick<ProductOptionValue, 'entityId' | 'label'>
) }
)>>> }
) }
) }
)>>> }
) }
) | { __typename: 'Variant' }> }
) }
) }
);
Loading

0 comments on commit 1c83344

Please sign in to comment.