leverage cache for fetch YMM options

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/filters/actions.ts

@@ -1,43 +1,47 @@
 'use server';
 
 import { getAllMetaobjects } from 'lib/shopify';
-import { Metaobject } from 'lib/shopify/types';
 import get from 'lodash.get';
 import { cache } from 'react';
 
-export const fetMetaobjects = async (
+export const fetchModels = cache(async () => {
-  type: string,
-  // eslint-disable-next-line no-unused-vars
-  sortFn?: (a: Metaobject, b: Metaobject) => number
-) => {
   try {
-    const data = await getAllMetaobjects(type);
+    const data = await getAllMetaobjects('make_model_composite');
 
-    return sortFn ? data.toSorted(sortFn) : data;
+    return data.toSorted((a, b) => {
+      const modelA = get(a, 'name').toLowerCase();
+      const modelB = get(b, 'name').toLowerCase();
+      return modelA.localeCompare(modelB);
+    });
   } catch (error) {
-    console.log('fetMetaobjects action', error);
+    console.log('fetchModels action', error);
   }
-};
+});
 
-const sortModelsFn = (a: Metaobject, b: Metaobject) => {
+export const fetchYears = cache(async () => {
-  const modelA = get(a, 'name').toLowerCase();
+  try {
-  const modelB = get(b, 'name').toLowerCase();
+    const data = await getAllMetaobjects('make_model_year_composite');
-  return modelA.localeCompare(modelB);
-};
 
-const sortYearsFn = (a: Metaobject, b: Metaobject) => {
+    return data.toSorted((a, b) => {
-  const yearA = parseInt(get(a, 'name'), 10);
+      const yearA = parseInt(get(a, 'name'), 10);
-  const yearB = parseInt(get(b, 'name'), 10);
+      const yearB = parseInt(get(b, 'name'), 10);
-  return yearB - yearA; // Descending order for years
+      return yearB - yearA; // Descending order for years
-};
+    });
+  } catch (error) {
+    console.log('fetchYears action', error);
+  }
+});
 
-const sortMakesFn = (a: Metaobject, b: Metaobject) => {
+export const fetchMakes = cache(async () => {
-  const makeA = get(a, 'display_name').toLowerCase();
+  try {
-  const makeB = get(b, 'display_name').toLowerCase();
+    const data = await getAllMetaobjects('make');
-  return makeA.localeCompare(makeB);
-};
 
-export const fetchModels = cache(() => fetMetaobjects('make_model_composite', sortModelsFn));
+    return data.toSorted((a, b) => {
-export const fetchYears = cache(() => fetMetaobjects('make_model_year_composite', sortYearsFn));
+      const makeA = get(a, 'display_name').toLowerCase();
-
+      const makeB = get(b, 'display_name').toLowerCase();
-export const fetchMakes = cache(() => fetMetaobjects('make', sortMakesFn));
+      return makeA.localeCompare(makeB);
+    });
+  } catch (error) {
+    console.log('fetchMakes action', error);
+  }
+});

components/ui/index.ts

@@ -1,16 +1,14 @@
-export { default as Badge } from './badge';
 export * from './badge';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
-export * from './button';
-export { default as Card } from './card';
 export * from './card';
-export { default as Heading } from './heading';
+export { default as Card } from './card';
 export * from './heading';
+export { default as Heading } from './heading';
 export { default as Input } from './input';
-export * from './input';
-export { default as Label } from './label';
 export * from './label';
-export { default as Skeleton } from './skeleton';
+export { default as Label } from './label';
 export * from './skeleton';
-export { default as Text } from './text';
+export { default as Skeleton } from './skeleton';
 export * from './text';
+export { default as Text } from './text';

lib/shopify/index.ts

@@ -359,6 +359,10 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
     helpfulLinks: parseMetaFieldValue<string[]>(collection.helpfulLinks),
     helpfulLinksTop: parseMetaFieldValue<string[]>(collection.helpfulLinksTop),
     dynamicContent: collection.dynamicContent?.value || null,
+    plpType: collection.plpType?.value || null,
+    lhnLinks: parseMetaFieldValue<string[]>(collection.lhnLinks),
+    engineSizeLinks: parseMetaFieldValue<string[]>(collection.engineSizeLinks),
+    transmissionCodeLinks: parseMetaFieldValue<string[]>(collection.transmissionCodeLinks),
     path: getCollectionUrl(collection.handle)
   };
 };

lib/shopify/queries/collection.ts

@@ -18,6 +18,18 @@ const collectionFragment = /* GraphQL */ `
     dynamicContent: metafield(namespace: "custom", key: "plp_content") {
       value
     }
+    plpType: metafield(namespace: "custom", key: "plp_type") {
+      value
+    }
+    lhnLinks: metafield(namespace: "custom", key: "lhn_links") {
+      value
+    }
+    engineSizeLinks: metafield(namespace: "custom", key: "engine_size_links") {
+      value
+    }
+    transmissionCodeLinks: metafield(namespace: "custom", key: "transmission_code_links") {
+      value
+    }
     updatedAt
   }
   ${seoFragment}

lib/shopify/types.ts

@@ -44,12 +44,22 @@ export type CartItem = {
 
 export type Collection = Omit<
   ShopifyCollection,
-  'helpfulLinks' | 'helpfulLinksTop' | 'dynamicContent'
+  | 'helpfulLinks'
+  | 'helpfulLinksTop'
+  | 'dynamicContent'
+  | 'plpType'
+  | 'lhnLinks'
+  | 'engineSizeLinks'
+  | 'transmissionCodeLinks'
 > & {
   path: string;
   helpfulLinks: string[] | null;
   helpfulLinksTop: string[] | null;
   dynamicContent: string | null;
+  plpType: PLPType | null;
+  lhnLinks: string[] | null;
+  engineSizeLinks: string[] | null;
+  transmissionCodeLinks: string[] | null;
 };
 
 export type Customer = {
@@ -509,6 +519,14 @@ export type ShopifyCart = {
   totalQuantity: number;
 };
 
+export type PLPType =
+  | 'Product Type'
+  | 'Make'
+  | 'Model'
+  | 'Year'
+  | 'Transmission Code'
+  | 'Engine Size';
+
 export type ShopifyCollection = {
   handle: string;
   title: string;
@@ -518,6 +536,10 @@ export type ShopifyCollection = {
   helpfulLinks: { value: string } | null;
   helpfulLinksTop: { value: string } | null;
   dynamicContent: { value: string } | null;
+  plpType: { value: PLPType } | null;
+  lhnLinks: { value: string } | null;
+  engineSizeLinks: { value: string } | null;
+  transmissionCodeLinks: { value: string } | null;
 };
 
 export type ShopifyProduct = {