build changes

components/product/ProductGrid/ProductGrid.tsx

@@ -5,15 +5,15 @@ import ProductCard from '@components/product/ProductCard'
 interface Props {
   className?: string
   children?: any
-  products: [any]
+  products: [any] | any
 }
 
 const ProductView: FC<Props> = ({ products, className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
-      {products.slice(0, 6).map(({ node }) => (
+      {products.map((data: any) => (
-        <ProductCard productData={node} />
+        <ProductCard productData={data.node} />
       ))}
     </div>
   )

components/product/ProductView/ProductView.tsx

@@ -3,7 +3,15 @@ import { FC } from 'react'
 import s from './ProductView.module.css'
 import { Button } from '@components/ui'
 import { Swatch } from '@components/product'
-
+import { Colors } from '@components/ui/types'
+interface ProductData {
+  name: string
+  images: any
+  prices: any
+  description: string
+  colors?: any[]
+  sizes?: any[]
+}
 interface Props {
   className?: string
   children?: any
@@ -12,15 +20,15 @@ interface Props {
 
 const ProductView: FC<Props> = ({ productData, className }) => {
   const rootClassName = cn(s.root, className)
-  console.log(productData)
+  const colors: Colors[] = ['pink', 'black', 'white']
   return (
     <div className={rootClassName}>
       <div className="absolute">
         <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
-          {productData.title}
+          {productData.name}
         </h1>
         <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
-          {productData.price}
+          {productData.prices}
         </div>
       </div>
       <div className="flex-1 h-full p-24">
@@ -30,7 +38,7 @@ const ProductView: FC<Props> = ({ productData, className }) => {
         <section className="pb-4">
           <h2 className="uppercase font-medium">Color</h2>
           <div className="flex flex-row py-4">
-            {productData.colors.map((c) => (
+            {colors.map((c) => (
               <Swatch color={c} />
             ))}
           </div>

components/product/types.ts

@@ -1,10 +1 @@
 import { Colors } from '@components/ui/types'
-export { Product } from '@lib/bigcommerce'
-
-// export type ProductData = {
-//   title: string;
-//   price: string;
-//   description: string;
-//   colors: [Colors];
-//   sizes: [string];
-// };

components/ui/ClickOutside/ClickOutside.tsx

@@ -1,46 +0,0 @@
-import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
-
-import { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export interface ClickOutsideProps {
-  onClickOutside: (e?: MouseEvent) => void
-  children: React.ReactNode | any
-  render: () => void
-}
-
-export default class ClickOutside extends Component<ClickOutsideProps> {
-  public domNode: Element | null = null
-
-  handleRef = (element) => {
-    this.domNode = element
-  }
-
-  public componentDidMount() {
-    document.addEventListener('click', this.handleClick, true)
-  }
-
-  public componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClick, true)
-    document.removeEventListener('touchstart', this.handleClick, true)
-  }
-
-  public handleClick = (event) => {
-    function hasParent(element, root) {
-      return root && root.contains(element)
-    }
-
-    if (!hasParent(event.target, this.domNode)) {
-      if (typeof this.props.onClickOutside === 'function') {
-        this.props.onClickOutside(event)
-      }
-    }
-  }
-
-  render() {
-    return null
-    // return this.props.render({
-    //   innerRef: this.handleRef,
-    // });
-  }
-}

components/ui/ClickOutside/index.ts

@@ -1 +0,0 @@
-export { default } from './ClickOutside'

components/ui/context.tsx

@@ -1,25 +1,29 @@
 import React, { FC } from 'react'
 
-export interface UIState {
+export interface State {
   displaySidebar: boolean
-  openSidebar: () => {}
-  closeSidebar: () => {}
 }
 
 const initialState = {
   displaySidebar: false,
-  openSidebar: null,
-  closeSidebar: null,
 }
 
-export const UIContext = React.createContext(initialState)
+type Action =
+  | {
+      type: 'OPEN_SIDEBAR'
+    }
+  | {
+      type: 'CLOSE_SIDEBAR'
+    }
+
+export const UIContext = React.createContext<State | any>(initialState)
 UIContext.displayName = 'UIContext'
 
 export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
-  const openSidebar = () => dispatch('OPEN_SIDEBAR')
+  const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
-  const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
+  const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
 
   const value = {
     ...state,
@@ -38,8 +42,8 @@ export const useUI = () => {
   return context
 }
 
-function uiReducer(state, action) {
+function uiReducer(state: State, action: Action) {
-  switch (action) {
+  switch (action.type) {
     case 'OPEN_SIDEBAR': {
       return {
         ...state,

lib/bigcommerce/cart.tsx

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

lib/bigcommerce/index.tsx

@@ -3,6 +3,7 @@ import {
   Connector,
   useCommerce as useCoreCommerce,
 } from 'lib/commerce'
+import { ReactNode } from 'react'
 
 async function getText(res: Response) {
   try {
@@ -35,8 +36,12 @@ export const bigcommerce: Connector = {
   fetcher,
 }
 
+interface Props {
+  children?: ReactNode | any
+}
+
 // TODO: The connector should be extendable when a developer is using it
-export function CommerceProvider({ children }) {
+export function CommerceProvider({ children }: Props) {
   return (
     <CoreCommerceProvider connector={bigcommerce}>
       {children}

lib/commerce/cart.tsx

@@ -1,6 +1,9 @@
-import { createContext, useContext } from 'react'
+import { createContext, useContext, FunctionComponent } from 'react'
 import useSWR, { responseInterface } from 'swr'
 import { useCommerce } from '.'
+interface Props {
+  children?: any
+}
 
 export type Cart = any
 
@@ -8,14 +11,14 @@ export type CartResponse<C extends Cart> = responseInterface<C, Error> & {
   isEmpty: boolean
 }
 
-const CartContext = createContext<CartResponse<Cart>>(null)
+const CartContext = createContext<CartResponse<Cart> | any>(null)
 
 function getCartCookie() {
   // TODO: Figure how the cart should be persisted
   return null
 }
 
-export function CartProvider({ children }) {
+const CartProvider: FunctionComponent<Props> = ({ children }) => {
   const { hooks, fetcher } = useCommerce<Cart>()
   const { useCart } = hooks
   const cartId = getCartCookie()
@@ -32,6 +35,8 @@ export function CartProvider({ children }) {
   )
 }
 
-export function useCart<C extends Cart>() {
+function useCart<C extends Cart>() {
   return useContext(CartContext) as CartResponse<C>
 }
+
+export { CartProvider, useCart }

lib/commerce/index.tsx

@@ -1,9 +1,9 @@
 import { createContext, ReactNode, useContext } from 'react'
 
-const Commerce = createContext<Connector>(null)
+const Commerce = createContext<Connector | any>(null)
 
 export type CommerceProps = {
-  children?: ReactNode
+  children?: ReactNode | any
   connector: Connector
 }
 

pages/index.tsx

@@ -6,14 +6,13 @@ import { ProductGrid } from '@components/product'
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
   return {
-    props: { products },
+    props: { products: products.slice(0, 6) },
   }
 }
 
 export default function Home({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PRODUCTS', products)
   return <ProductGrid products={products} />
 }
 

pages/product/[slug].tsx

@@ -10,7 +10,7 @@ export async function getStaticProps({
 }: GetStaticPropsContext<{ slug: string }>) {
   const { product } = await getProduct({ variables: { slug: params!.slug } })
   const productData = {
-    title: 'T-Shirt',
+    name: 'T-Shirt',
     description: `
       Nothing undercover about this tee. Nope. This is the official Bad
       Boys tee. Printed in white or black ink on Black, Brown, or Oatmeal.
@@ -19,7 +19,8 @@ export async function getStaticProps({
       run. Printing starts when the drop ends. Reminder: Bad Boys For
       Life. Shipping may take 10+ days due to COVID-19.
     `,
-    price: '$50',
+    images: null,
+    prices: '$50',
     colors: ['black', 'white', 'pink'],
     sizes: ['s', 'm', 'l', 'xl', 'xxl'],
   }
@@ -47,8 +48,6 @@ export default function Slug({
   product,
   productData,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  console.log('PRODUCT', product)
-
   const router = useRouter()
 
   return router.isFallback ? (

postcss.config.js

@@ -1,13 +1,8 @@
 module.exports = {
   plugins: [
-<<<<<<< HEAD
-    "tailwindcss",
-    "postcss-nesting",
-    "postcss-flexbugs-fixes",
-=======
     'tailwindcss',
+    'postcss-nesting',
     'postcss-flexbugs-fixes',
->>>>>>> f2108ca97faf54a18680b608356012700971c450
     [
       'postcss-preset-env',
       {