Products: swap rendering logic to new type

Most of the work is passing around the new type.
iFixit · Jul 6, 2023 · 2e89f93 · 2e89f93
1 parent bd5cb38
commit 2e89f93
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 71 deletions.
diff --git a/frontend/templates/troubleshooting/Resource.tsx b/frontend/templates/troubleshooting/Resource.tsx
@@ -19,11 +19,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 { SectionProduct } from './hooks/useTroubleshootingProps';
 
 export function GuideResource({ guide }: { guide: Guide }) {
    return (
@@ -51,31 +49,25 @@ export function GuideResource({ guide }: { guide: Guide }) {
    );
 }
 
-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;
    }

diff --git a/frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx b/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';
 import { Guide } from './GuideModel';
 
 export type Section = {

diff --git a/frontend/templates/troubleshooting/server.tsx b/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,35 +44,6 @@ 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>(
@@ -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 = {

diff --git a/frontend/templates/troubleshooting/solution.tsx b/frontend/templates/troubleshooting/solution.tsx
@@ -17,11 +17,13 @@ import {
    faSquareArrowUp,
 } from '@fortawesome/pro-solid-svg-icons';
 import { FaIcon } from '@ifixit/icons';
-import { SolutionSection } from './hooks/useTroubleshootingProps';
+import {
+   SectionProduct,
+   SolutionSection,
+} from './hooks/useTroubleshootingProps';
 import Prerendered from './prerendered';
 import { GuideResource, ProductResource } from './Resource';
 import { Guide } from './hooks/GuideModel';
-import { Product } from '@models/product';
 import { HeadingSelfLink } from './components/HeadingSelfLink';
 
 const _SolutionFooter = () => (
@@ -236,22 +238,18 @@ function LinkCards({
    guides,
    products,
    ...props
-}: { guides: Guide[]; products: Product[] } & BoxProps) {
+}: { guides: Guide[]; 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: Guide) => (
             <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>
    );