Merge branch 'master' of github.com:okbel/e-comm-example

.vercelignore

@@ -1 +0,0 @@
-lib

lib/bigcommerce/api/operations/get-all-product-paths.ts

@@ -23,7 +23,6 @@ export interface GetAllProductPathsResult<T> {
 }
 
 async function getAllProductPaths(opts?: {
-  query?: string
   config?: BigcommerceConfig
 }): Promise<GetAllProductPathsResult<GetAllProductPathsQuery>>
 

lib/bigcommerce/api/operations/get-all-products.ts

@@ -47,7 +47,6 @@ export type ProductVariables = Images &
   Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
-  query?: string
   variables?: ProductVariables
   config?: BigcommerceConfig
 }): Promise<GetAllProductsResult<GetAllProductsQuery>>

lib/bigcommerce/api/operations/get-product.ts

@@ -43,7 +43,6 @@ export type ProductVariables = Images &
   ({ path: string; slug?: never } | { path?: never; slug: string })
 
 async function getProduct(opts: {
-  query?: string
   variables: ProductVariables
   config?: BigcommerceConfig
 }): Promise<GetProductResult<GetProductQuery>>

lib/bigcommerce/cart.tsx

@@ -1,21 +1,15 @@
+import { FC } from 'react'
 import {
   CartProvider as CommerceCartProvider,
   useCart as useCommerceCart,
 } from 'lib/commerce/cart'
-import { FunctionComponent } from 'react'
 
 export type Cart = any
 
-interface Props {
-  children?: any
+export const CartProvider: FC = ({ children }) => {
+  return <CommerceCartProvider query="">{children}</CommerceCartProvider>
 }
 
-function useCart() {
+export function useCart() {
   return useCommerceCart<Cart>()
 }
-
-const CartProvider: FunctionComponent<Props> = ({ children }) => {
-  return <CommerceCartProvider>{children}</CommerceCartProvider>
-}
-
-export { CartProvider, useCart }

lib/bigcommerce/index.tsx

@@ -1,9 +1,9 @@
+import { ReactNode } from 'react'
 import {
+  CommerceConfig,
   CommerceProvider as CoreCommerceProvider,
-  Connector,
   useCommerce as useCoreCommerce,
 } from 'lib/commerce'
-import { ReactNode } from 'react'
 
 async function getText(res: Response) {
   try {
@@ -31,19 +31,21 @@ async function fetcher(url: string, query: string) {
   throw await getError(res)
 }
 
-export const bigcommerce: Connector = {
+export const bigcommerceConfig: CommerceConfig = {
   locale: 'en-us',
   fetcher,
 }
 
-interface Props {
-  children?: ReactNode | any
+export type BigcommerceConfig = Partial<CommerceConfig>
+
+export type BigcommerceProps = {
+  children?: ReactNode
+  config: BigcommerceConfig
 }
 
-// TODO: The connector should be extendable when a developer is using it
-export function CommerceProvider({ children }: Props) {
+export function CommerceProvider({ children, config }: BigcommerceProps) {
   return (
-    <CoreCommerceProvider connector={bigcommerce}>
+    <CoreCommerceProvider config={{ ...config, ...bigcommerceConfig }}>
       {children}
     </CoreCommerceProvider>
   )

lib/commerce/cart.tsx

@@ -1,31 +1,27 @@
-import { createContext, useContext, FunctionComponent } from 'react'
+import { createContext, useContext, FC } from 'react'
 import useSWR, { responseInterface } from 'swr'
 import { useCommerce } from '.'
-interface Props {
-  children?: any
-}
 
-export type Cart = any
-
-export type CartResponse<C extends Cart> = responseInterface<C, Error> & {
+export type CartResponse<C> = responseInterface<C, Error> & {
   isEmpty: boolean
 }
 
-const CartContext = createContext<CartResponse<Cart> | any>(null)
+export type CartProviderProps =
+  | { query: string; url?: string }
+  | { query?: string; url: string }
+
+const CartContext = createContext<CartResponse<any> | null>(null)
 
 function getCartCookie() {
   // TODO: Figure how the cart should be persisted
   return null
 }
 
-const CartProvider: FunctionComponent<Props> = ({ children }) => {
-  const { hooks, fetcher } = useCommerce<Cart>()
-  const { useCart } = hooks
+const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
+  const { fetcher } = useCommerce()
   const cartId = getCartCookie()
-  const response = useSWR(
-    () => (cartId ? [useCart.url, useCart.query, useCart.resolver] : null),
-    fetcher
-  )
+  const response = useSWR(() => (cartId ? [url, query] : null), fetcher)
+  // TODO: Do something to make this prop work
   const isEmpty = true
 
   return (
@@ -35,7 +31,7 @@ const CartProvider: FunctionComponent<Props> = ({ children }) => {
   )
 }
 
-function useCart<C extends Cart>() {
+function useCart<C>() {
   return useContext(CartContext) as CartResponse<C>
 }
 

lib/commerce/index.tsx

@@ -1,29 +1,27 @@
 import { createContext, ReactNode, useContext } from 'react'
 
-const Commerce = createContext<Connector | any>(null)
+const Commerce = createContext<CommerceConfig | null>(null)
 
 export type CommerceProps = {
-  children?: ReactNode | any
-  connector: Connector
+  children?: ReactNode
+  config: CommerceConfig
 }
 
-export type Connector = {
+export type CommerceConfig = {
   fetcher: Fetcher<any>
   locale: string
 }
 
 export type Fetcher<T> = (...args: any) => T | Promise<T>
 
-export function CommerceProvider({ children, connector }: CommerceProps) {
-  if (!connector) {
-    throw new Error(
-      'CommerceProvider requires a valid headless commerce connector'
-    )
+export function CommerceProvider({ children, config }: CommerceProps) {
+  if (!config) {
+    throw new Error('CommerceProvider requires a valid config object')
   }
 
-  return <Commerce.Provider value={connector}>{children}</Commerce.Provider>
+  return <Commerce.Provider value={config}>{children}</Commerce.Provider>
 }
 
-export function useCommerce<T extends Connector>() {
+export function useCommerce<T extends CommerceConfig>() {
   return useContext(Commerce) as T
 }

pages/product/[slug].tsx

@@ -1,6 +1,6 @@
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { useRouter } from 'next/router'
-import getProduct from 'lib/bigcommerce/api/operations/get-product'
+import getProduct from '@lib/bigcommerce/api/operations/get-product'
 import { Layout } from '@components/core'
 import { ProductView } from '@components/product'
 import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths'
@@ -37,11 +37,7 @@ export async function getStaticPaths() {
   const { products } = await getAllProductPaths()
 
   return {
-    paths: products.map((product) => {
-      const { path } = product!.node
-      // Exclude the slashes: `/slug/` -> `slug`
-      return { params: { slug: path.substring(1, path.length - 1) } }
-    }),
+    paths: products.map((product) => `/product${product!.node.path}`),
     fallback: 'unstable_blocking',
   }
 }

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -20,6 +20,6 @@
       "@components/*": ["components/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
   "exclude": ["node_modules"]
 }