Vulcan Products: Load via the API

frontend/templates/troubleshooting/Resource.tsx

@@ -18,12 +18,9 @@ import { FaIcon } from '@ifixit/icons';
 import { faClock } from '@fortawesome/pro-solid-svg-icons';
 import Prerendered from './prerendered';
 import { DifficultyThemeLookup, GuideDifficultyNames } from './DifficultyBadge';
-import { Product } from '@models/product';
-import { useSelectedVariant } from '@templates/product/hooks/useSelectedVariant';
-import { useIsProductForSale } from '../product/hooks/useIsProductForSale';
 import { Rating } from '@components/ui';
 import { Money, formatMoney, shouldShowProductRating } from '@ifixit/helpers';
-import { SectionGuide } from './hooks/useTroubleshootingProps';
+import { SectionProduct, SectionGuide } from './hooks/useTroubleshootingProps';
 
 export function GuideResource({ guide }: { guide: SectionGuide }) {
    return (
@@ -51,31 +48,25 @@ export function GuideResource({ guide }: { guide: SectionGuide }) {
    );
 }
 
-export function ProductResource({ product }: { product: Product }) {
-   const [selectedVariant, _setSelectedVariant] = useSelectedVariant(product);
-   const isForSale = useIsProductForSale(product);
-   const productUrl = `/products/${product.handle}`;
+export function ProductResource({ product }: { product: SectionProduct }) {
+   const { image, url, title, price } = product;
 
    return (
       <Resource
-         href={productUrl}
-         title={product.title}
-         imageUrl={
-            selectedVariant.image?.url ||
-            product.images[0]?.thumbnailUrl ||
-            product.images[0]?.url
-         }
+         href={url}
+         title={title}
+         imageUrl={image}
          spacing="4px"
-         showBuyButton={isForSale}
+         showBuyButton={true}
          openInNewTab={true}
       >
-         {isForSale && <ResourceProductRating product={product} />}
-         {isForSale && <ResourceProductPrice price={selectedVariant.price} />}
+         <ResourceProductRating product={product} />
+         <ResourceProductPrice price={price} />
       </Resource>
    );
 }
 
-function ResourceProductRating({ product }: { product: Product }) {
+function ResourceProductRating({ product }: { product: SectionProduct }) {
    if (!shouldShowProductRating(product.reviews)) {
       return null;
    }

frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx

@@ -1,6 +1,5 @@
 import { WithProvidersProps } from '@components/common';
 import type { WithLayoutProps } from '@layouts/default/server';
-import { Product } from '@models/product';
 
 export type Section = {
    heading: string;
@@ -25,15 +24,30 @@ export type Problem = {
 
 export type ApiSolutionSection = Section & {
    guides: SectionGuide[];
-   products: string[];
+   products: SectionProduct[];
+};
+
+export type SectionProduct = {
+   image: string;
+   thumbnailUrl: string;
+   url: string;
+   title: string;
+   price: {
+      amount: number;
+      currencyCode: string;
+   };
+   reviews: {
+      rating: number;
+      count: number;
+   };
 };
 
 export type SolutionSection = Omit<
    ApiSolutionSection,
    'guides' | 'products'
 > & {
    guides: SectionGuide[];
-   products: Array<Product>;
+   products: Array<SectionProduct>;
 };
 
 export type SectionGuide = {

frontend/templates/troubleshooting/server.tsx

@@ -7,16 +7,8 @@ import {
    TroubleshootingProps,
    TroubleshootingData,
    TroubleshootingApiData,
-   ApiSolutionSection,
-   SolutionSection,
 } from './hooks/useTroubleshootingProps';
-import Product from '@pages/api/nextjs/cache/product';
-import type { Product as ProductType } from '@models/product';
-import {
-   hasDisableCacheGets,
-   withLogging,
-   withNoindexDevDomains,
-} from '@helpers/next-helpers';
+import { withLogging, withNoindexDevDomains } from '@helpers/next-helpers';
 import { withCacheLong } from '@helpers/cache-control-helpers';
 import compose from 'lodash/flowRight';
 
@@ -52,39 +44,10 @@ export const getServerSideProps: GetServerSideProps<TroubleshootingProps> =
          };
       }
 
-      async function fetchDataForSolution(
-         solution: ApiSolutionSection
-      ): Promise<SolutionSection> {
-         const products: ('' | null | ProductType)[] = await Promise.all(
-            solution.products.map((handle: string | null) => {
-               return (
-                  handle &&
-                  Product.get(
-                     {
-                        handle,
-                        storeCode: DEFAULT_STORE_CODE,
-                        ifixitOrigin,
-                     },
-                     { forceMiss: hasDisableCacheGets(context) }
-                  ).catch((error) => {
-                     rethrowUnless404(error);
-                     return null;
-                  })
-               );
-            })
-         );
-         return {
-            ...solution,
-            products: products.filter((product): product is ProductType =>
-               Boolean(product)
-            ),
-         };
-      }
-
       let troubleshootingData: TroubleshootingApiData;
       try {
          troubleshootingData = await client.get<TroubleshootingApiData>(
-            `Troubleshooting/${wikiname}?vulcan=1`,
+            `Troubleshooting/${wikiname}?vulcan=1&fullProducts=1`,
             'troubleshooting'
          );
       } catch (e) {
@@ -116,13 +79,8 @@ export const getServerSideProps: GetServerSideProps<TroubleshootingProps> =
          };
       }
 
-      const solutions: SolutionSection[] = await Promise.all(
-         troubleshootingData.solutions.map(fetchDataForSolution)
-      );
-
       const wikiData: TroubleshootingData = {
          ...troubleshootingData,
-         solutions,
       };
 
       const pageProps: TroubleshootingProps = {

frontend/templates/troubleshooting/solution.tsx

@@ -17,10 +17,13 @@ import {
    faSquareArrowUp,
 } from '@fortawesome/pro-solid-svg-icons';
 import { FaIcon } from '@ifixit/icons';
-import { SectionGuide, SolutionSection } from './hooks/useTroubleshootingProps';
+import {
+   SectionGuide,
+   SectionProduct,
+   SolutionSection,
+} from './hooks/useTroubleshootingProps';
 import Prerendered from './prerendered';
 import { GuideResource, ProductResource } from './Resource';
-import { Product } from '@models/product';
 import { HeadingSelfLink } from './components/HeadingSelfLink';
 
 const _SolutionFooter = () => (
@@ -235,22 +238,18 @@ function LinkCards({
    guides,
    products,
    ...props
-}: { guides: SectionGuide[]; products: Product[] } & BoxProps) {
+}: { guides: SectionGuide[]; products: SectionProduct[] } & BoxProps) {
    const uniqueGuides = guides.filter(
       (guide, index) =>
          guides.findIndex((g) => g.guideid === guide.guideid) === index
    );
-   const uniqueProducts = products.filter(
-      (product, index) =>
-         products.findIndex((p) => p.id === product.id) === index
-   );
    return (
       <VStack spacing="6px" {...props}>
          {uniqueGuides.map((guide: SectionGuide) => (
             <GuideResource key={guide.guideid} guide={guide} />
          ))}
-         {uniqueProducts.map((product: Product) => (
-            <ProductResource key={product.id} product={product} />
+         {products.map((product: SectionProduct, index) => (
+            <ProductResource key={index} product={product} />
          ))}
       </VStack>
    );