product and product recommendations

app/product/[handle]/page.tsx

@@ -7,7 +7,7 @@ import { Gallery } from 'components/product/gallery';
 import { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
-import { getProduct, getProductRecommendations } from 'lib/shopify';
+import { getProduct, getProductRecommendations } from 'lib/fourthwall';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';

lib/fourthwall/index.ts

@@ -1,6 +1,6 @@
 import { Cart, Menu, Product } from "lib/shopify/types";
-import { reshapeCart, reshapeProducts } from "./reshape";
+import { reshapeCart, reshapeProduct, reshapeProducts } from "./reshape";
-import { FourthwallCart } from "./types";
+import { FourthwallCart, FourthwallProduct } from "./types";
 
 /**
  * Helpers
@@ -72,7 +72,7 @@ export async function getCollectionProducts({
   reverse?: boolean;
   sortKey?: string;
 }): Promise<Product[]> {
-  const res = await fourthwallGet<{results: any[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${collection}/products?secret=${process.env.FW_SECRET}`, {
+  const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${collection}/products?secret=${process.env.FW_SECRET}`, {
     headers: {
       'X-ShopId': process.env.FW_SHOPID || ''
     }
@@ -87,6 +87,27 @@ export async function getCollectionProducts({
   return reshapeProducts(res.body.results);
 }
 
+/**
+ * Product operations
+ */
+export async function getProduct(handle: string): Promise<Product | undefined> {
+  // TODO: replace with real URL
+  const res = await fourthwallGet<{results: FourthwallProduct[]}>(`${process.env.FW_URL}/api/public/v1.0/collections/${process.env.FW_COLLECTION}/products?secret=${process.env.FW_SECRET}`, {
+    headers: {
+      'X-ShopId': process.env.FW_SHOPID || ''
+    }
+  });
+
+  return res.body.results.filter((product) => {
+    return product.slug === handle
+  }).map((p: any) => reshapeProduct(p))[0];
+}
+
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
+  // TODO: replace with real URL
+  return [];
+}
+
 /**
  * Cart operations
  */

lib/fourthwall/reshape.ts

@@ -38,7 +38,7 @@ export const reshapeProducts = (products: FourthwallProduct[]) => {
   return reshapedProducts;
 };
 
-const reshapeProduct = (product: FourthwallProduct): Product | undefined => {
+export const reshapeProduct = (product: FourthwallProduct): Product | undefined => {
   if (!product) {
     return undefined;
   }
@@ -117,6 +117,7 @@ const reshapeCartItem = (item: FourthwallCartItem): CartItem => {
       // TODO: Stubbed out
       selectedOptions: [],
       product: {
+        // TODO: need this product info in model
         id: 'TT', 
         handle: 'TT',
         title: 'TT',

lib/shopify/index.ts

@@ -10,8 +10,6 @@ import {
 } from './queries/collection';
 import { getPageQuery, getPagesQuery } from './queries/page';
 import {
-  getProductQuery,
-  getProductRecommendationsQuery,
   getProductsQuery
 } from './queries/product';
 import {
@@ -28,8 +26,6 @@ import {
   ShopifyPageOperation,
   ShopifyPagesOperation,
   ShopifyProduct,
-  ShopifyProductOperation,
-  ShopifyProductRecommendationsOperation,
   ShopifyProductsOperation
 } from './types';
 
@@ -243,30 +239,6 @@ export async function getPages(): Promise<Page[]> {
   return removeEdgesAndNodes(res.body.data.pages);
 }
 
-export async function getProduct(handle: string): Promise<Product | undefined> {
-  const res = await shopifyFetch<ShopifyProductOperation>({
-    query: getProductQuery,
-    tags: [TAGS.products],
-    variables: {
-      handle
-    }
-  });
-
-  return reshapeProduct(res.body.data.product, false);
-}
-
-export async function getProductRecommendations(productId: string): Promise<Product[]> {
-  const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
-    query: getProductRecommendationsQuery,
-    tags: [TAGS.products],
-    variables: {
-      productId
-    }
-  });
-
-  return reshapeProducts(res.body.data.productRecommendations);
-}
-
 export async function getProducts({
   query,
   reverse,