Merge pull request #2117 from iFixit/refactor-product-list-path

Refactor product list path helper
iFixit · Nov 21, 2023 · 2211da5 · 2211da5 · vercel · Nov 21, 2023
2 parents 711f7f1 + ced2146
commit 2211da5
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 29 deletions.
diff --git a/frontend/helpers/path-helpers.ts b/frontend/helpers/path-helpers.ts
@@ -19,12 +19,17 @@ type ProductListPathAttributes = Pick<
    ProductList,
    'type' | 'handle' | 'deviceTitle'
 >;
-
-export function productListPath(
-   productList: ProductListPathAttributes,
-   itemType?: string,
-   variant?: string | undefined
-): string {
+type ProductListPathProps = {
+   productList: ProductListPathAttributes;
+   itemType?: string;
+   variant?: string | undefined;
+};
+
+export function productListPath({
+   productList,
+   itemType,
+   variant,
+}: ProductListPathProps): string {
    switch (productList.type) {
       case ProductListType.AllParts: {
          return '/Parts';

diff --git a/frontend/seo/product-list/hreflangs.ts b/frontend/seo/product-list/hreflangs.ts
@@ -221,10 +221,10 @@ export function useHreflangs(
    productList: ProductList,
    itemType: string | null
 ): Hreflangs | null {
-   const path = productListPath(productList, itemType ?? undefined).replace(
-      /^\//,
-      ''
-   );
+   const path = productListPath({
+      productList,
+      itemType: itemType ?? undefined,
+   }).replace(/^\//, '');
    const collection = pathToCollection[path] ?? null;
    return collection ? hreflangs[collection] : null;
 }
diff --git a/frontend/templates/page/sections/BrowseSection.tsx b/frontend/templates/page/sections/BrowseSection.tsx
@@ -157,7 +157,7 @@ function FeaturedCategories({ categories }: FeaturedCategoriesProps) {
                   }}
                >
                   <NextLink
-                     href={productListPath(category)}
+                     href={productListPath({ productList: category })}
                      passHref
                      legacyBehavior
                   >

diff --git a/frontend/templates/product-list/MetaTags.tsx b/frontend/templates/product-list/MetaTags.tsx
@@ -1,7 +1,6 @@
 import { PRODUCT_LIST_PAGE_PARAM } from '@config/constants';
 import { metaTitleWithSuffix } from '@helpers/metadata-helpers';
 import { productListPath } from '@helpers/path-helpers';
-import { stylizeDeviceItemType } from '@helpers/product-list-helpers';
 import { useAppContext } from '@ifixit/app';
 import type { ProductList } from '@models/product-list';
 import { noIndexExemptions, useHreflangs } from '@seo/product-list';
@@ -115,19 +114,14 @@ function useCanonicalUrl(
 ): string {
    const appContext = useAppContext();
    const pagination = usePagination();
-
-   const page = pagination.currentRefinement + 1;
-
-   const itemTypeHandle = itemType
-      ? `/${encodeURIComponent(stylizeDeviceItemType(itemType))}`
-      : '';
    const variant = useVariant();
+   const page = pagination.currentRefinement + 1;
 
-   return `${appContext.ifixitOrigin}${productListPath(
+   return `${appContext.ifixitOrigin}${productListPath({
       productList,
-      undefined,
-      productList.indexVariantsInsteadOfDevice ? variant : undefined
-   )}${itemTypeHandle}${page > 1 ? `?${PRODUCT_LIST_PAGE_PARAM}=${page}` : ''}`;
+      itemType: itemType ?? undefined,
+      variant: productList.indexVariantsInsteadOfDevice ? variant : undefined,
+   })}${page > 1 ? `?${PRODUCT_LIST_PAGE_PARAM}=${page}` : ''}`;
 }
 
 function useShouldNoIndex(

diff --git a/frontend/templates/product-list/hooks/useProductListBreadcrumbs.ts b/frontend/templates/product-list/hooks/useProductListBreadcrumbs.ts
@@ -16,7 +16,7 @@ export function useProductListBreadcrumbs(
    productList.ancestors.forEach((ancestor) => {
       breadcrumbs.push({
          label: ancestor.title,
-         url: productListPath(ancestor),
+         url: productListPath({ productList: ancestor }),
       });
    });
 
@@ -27,7 +27,7 @@ export function useProductListBreadcrumbs(
    if (productList.type === ProductListType.DeviceParts && itemType) {
       breadcrumbs.push({
          label: productList.title,
-         url: productListPath(productList),
+         url: productListPath({ productList }),
       });
       breadcrumbs.push({
          label: itemType,

diff --git a/frontend/templates/product-list/sections/FeaturedProductListsSection.tsx b/frontend/templates/product-list/sections/FeaturedProductListsSection.tsx
@@ -88,7 +88,7 @@ const ProductListLink = ({ productList }: ProductListLinkProps) => {
             )}
             <Divider orientation="vertical" />
             <NextLink
-               href={productListPath(productList)}
+               href={productListPath({ productList })}
                passHref
                legacyBehavior
             >

diff --git a/frontend/templates/product-list/sections/FilterableProductsSection/index.tsx b/frontend/templates/product-list/sections/FilterableProductsSection/index.tsx
@@ -349,7 +349,7 @@ const ProductListEmptyState = forwardRef<EmptyStateProps, 'div'>(
                   This collection does not have products.
                </Text>
                {parentCategory && (
-                  <Link href={productListPath(parentCategory)}>
+                  <Link href={productListPath({ productList: parentCategory })}>
                      Return to {parentCategory.title}
                   </Link>
                )}

diff --git a/frontend/templates/product-list/sections/ProductListChildrenSection.tsx b/frontend/templates/product-list/sections/ProductListChildrenSection.tsx
@@ -68,9 +68,11 @@ export function ProductListChildrenSection({
                         <ProductListCard
                            as="a"
                            href={productListPath({
-                              deviceTitle: child.deviceTitle,
-                              handle: child.handle,
-                              type: child.type,
+                              productList: {
+                                 deviceTitle: child.deviceTitle,
+                                 handle: child.handle,
+                                 type: child.type,
+                              },
                            })}
                            productList={{
                               title: child.title,