Add to cart Typescript

Author: w3bdesign

refactor/src/components/Product/AddToCart.component.tsx

@@ -16,8 +16,70 @@ import { getFormattedCart } from '@/utils/functions/functions';
 import { GET_CART } from '@/utils/gql/GQL_QUERIES';
 import { ADD_TO_CART } from '@/utils/gql/GQL_MUTATIONS';
 
-interface IAddToCartProps {
-  product: { databaseId: number };
+interface IImage {
+  __typename: string;
+  id: string;
+  uri: string;
+  title: string;
+  srcSet: string;
+  sourceUrl: string;
+}
+
+interface IVariationNode {
+  __typename: string;
+  name: string;
+}
+
+interface IAllPaColors {
+  __typename: string;
+  nodes: IVariationNode[];
+}
+
+interface IAllPaSizes {
+  __typename: string;
+  nodes: IVariationNode[];
+}
+
+interface IVariationNodes {
+  __typename: string;
+  id: string;
+  databaseId: number;
+  name: string;
+  stockStatus: string;
+  stockQuantity: number;
+  purchasable: boolean;
+  onSale: boolean;
+  salePrice?: any;
+  regularPrice: string;
+}
+
+interface IVariations {
+  __typename: string;
+  nodes: IVariationNodes[];
+}
+
+export interface IProduct {
+  __typename: string;
+  id: string;
+  databaseId: number;
+  averageRating: number;
+  slug: string;
+  description: string;
+  onSale: boolean;
+  image: IImage;
+  name: string;
+  salePrice?: string;
+  regularPrice: string;
+  price: string;
+  stockQuantity: number;
+  allPaColors?: IAllPaColors;
+  allPaSizes?: IAllPaSizes;
+  variations?: IVariations;
+}
+
+export interface IProductRootObject {
+  product?: IProduct;
+  variationId?: number;
 }
 
 /**
@@ -26,13 +88,11 @@ interface IAddToCartProps {
  * @param {IAddToCartProps} product // Product data
  */
 
-const AddToCart = (product: IAddToCartProps) => {
+const AddToCart = ({ product, variationId }: IProductRootObject) => {
   const { setCart } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
-  const productId = product.product.databaseId
-    ? product.product.databaseId
-    : product.product;
+  const productId = product?.databaseId ? product?.databaseId : variationId;
 
   const productQueryInput = {
     clientMutationId: uuidv4(), // Generate a unique id.

refactor/src/components/Product/SingleProduct.component.tsx

@@ -6,15 +6,10 @@ import { useState, useEffect } from 'react';
 import { filteredVariantPrice, paddedPrice } from '@/utils/functions/functions';
 
 // Components
-import AddToCart from './AddToCart.component';
+import AddToCart, { IProduct } from './AddToCart.component';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.component';
 
-/**
- * Shows a single product with an Add To Cart button.
- * Uses GraphQL for product data
- * @param {Object} product // Product data
- */
-const SingleProduct = ({ product }: any) => {
+const SingleProduct = (product: IProduct) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [selectedVariation, setSelectedVariation] = useState<number>();
   let DESCRIPTION_WITHOUT_HTML;
@@ -122,11 +117,11 @@ const SingleProduct = ({ product }: any) => {
                     name="variant"
                     className="block w-80 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
                     onChange={(e) => {
-                      setSelectedVariation(e.target.value);
+                      setSelectedVariation(Number(e.target.value));
                     }}
                   >
                     {product.variations.nodes.map(
-                      ({ id, name, databaseId, stockQuantity }: any) => {
+                      ({ id, name, databaseId, stockQuantity }) => {
                         // Remove product name from variation name
                         const filteredName = name.split('- ').pop();
                         return (
@@ -145,7 +140,7 @@ const SingleProduct = ({ product }: any) => {
                   // If we do, send the variationId to AddToCart button
                 }
                 {product.variations && (
-                  <AddToCart product={selectedVariation} />
+                  <AddToCart variationId={selectedVariation} />
                 )}
                 {!product.variations && <AddToCart product={product} />}
               </div>