crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-11 12:17:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve YMM loading time

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-07-08 15:37:57 +07:00
parent a7d2816836
commit 735657f606
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
4 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/filters/actions.ts
View File

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

51
components/filters/filters-list.tsx
View File

@ -6,17 +6,17 @@ import { Menu, Metaobject } from 'lib/shopify/types';
import { createUrl, findParentCollection } from 'lib/utils';
import get from 'lodash.get';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useMemo, useState } from 'react';
import { fetMetaobjects } from './actions';
import { useEffect, useState } from 'react';
import { fetchModels, fetchYears } from './actions';
import FilterField from './field';
type FiltersListProps = {
makes: Metaobject[];
makes?: Metaobject[];
menu: Menu[];
autoFocusField?: string;
};
const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
const FiltersList = ({ makes = [], menu, autoFocusField }: FiltersListProps) => {
const params = useParams<{ collection?: string }>();
const router = useRouter();
const searchParams = useSearchParams();
@ -69,9 +69,9 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
}, [makeIdFromSearchParams, makes, params.collection, partType]);
useEffect(() => {
const fetchModels = async () => {
const getModels = async () => {
setLoadingAttribute('models');
const modelsResponse = await fetMetaobjects('make_model_composite');
const modelsResponse = await fetchModels();
if (modelIdFromSearchParams) {
setModel(
(currentModel) =>
@ -83,14 +83,14 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
};
if (make?.id && models.length === 0) {
fetchModels();
getModels();
}
}, [make?.id, modelIdFromSearchParams, models.length]);
useEffect(() => {
const fetchYears = async () => {
const getYears = async () => {
setLoadingAttribute('years');
const yearsResponse = await fetMetaobjects('make_model_year_composite');
const yearsResponse = await fetchYears();
if (yearIdFromSearchParams) {
setYear(
(currentYear) =>
@ -102,7 +102,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
};
if (model?.id && years.length === 0) {
fetchYears();
getYears();
}
}, [model?.id, yearIdFromSearchParams, years.length]);
@ -136,31 +136,6 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
router.push(createUrl(`/search/${partType?.value}`, newSearchParams), { scroll: false });
};
// Sorting logic
const sortedMakes = useMemo(() => {
return [...makes].sort((a, b) => {
const makeA = get(a, 'display_name').toLowerCase();
const makeB = get(b, 'display_name').toLowerCase();
return makeA.localeCompare(makeB);
});
}, [makes]);
const sortedModelOptions = useMemo(() => {
return [...modelOptions].sort((a, b) => {
const modelA = get(a, 'name').toLowerCase();
const modelB = get(b, 'name').toLowerCase();
return modelA.localeCompare(modelB);
});
}, [modelOptions]);
const sortedYearOptions = useMemo(() => {
return [...yearOptions].sort((a, b) => {
const yearA = parseInt(get(a, 'name'), 10);
const yearB = parseInt(get(b, 'name'), 10);
return yearB - yearA; // Descending order for years
});
}, [yearOptions]);
return (
<>
<FilterField
@ -176,7 +151,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Make"
onChange={onChangeMake}
selectedValue={make}
options={sortedMakes}
options={makes}
getId={(option) => option.id}
disabled={!partType}
autoFocus={autoFocusField === 'make'}
@ -186,7 +161,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Model"
onChange={onChangeModel}
selectedValue={model}
options={sortedModelOptions}
options={modelOptions}
getId={(option) => option.id}
disabled={!make}
autoFocus={autoFocusField === 'model'}
@ -196,7 +171,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Year"
onChange={onChangeYear}
selectedValue={year}
options={sortedYearOptions}
options={yearOptions}
getId={(option) => option.id}
disabled={!model || !make}
autoFocus={autoFocusField === 'year'}

8
components/filters/hompage-filters.tsx
View File

@ -1,4 +1,5 @@
import { getAllMetaobjects, getMenu } from 'lib/shopify';
import { getMenu } from 'lib/shopify';
import { fetchMakes, fetchModels, fetchYears } from './actions';
import FiltersList from './filters-list';
const title: Record<string, string> = {
@ -12,8 +13,11 @@ const title: Record<string, string> = {
const { STORE_PREFIX } = process.env;
const HomePageFilters = async () => {
const makes = await getAllMetaobjects('make');
const makes = await fetchMakes();
const menu = await getMenu('main-menu');
// preload models and years
fetchModels();
fetchYears();
return (
<>

8
components/filters/index.tsx
View File

@ -1,5 +1,6 @@
import { getAllMetaobjects, getMenu } from 'lib/shopify';
import { getMenu } from 'lib/shopify';
import { ReactNode } from 'react';
import { fetchMakes, fetchModels, fetchYears } from './actions';
import FiltersList from './filters-list';
const YMMFiltersContainer = ({ children }: { children: ReactNode }) => {
@ -14,8 +15,11 @@ const YMMFiltersContainer = ({ children }: { children: ReactNode }) => {
};
const YMMFilters = async () => {
const makes = await getAllMetaobjects('make');
const makes = await fetchMakes();
const menu = await getMenu('main-menu');
// preload models and years
fetchModels();
fetchYears();
return (
<YMMFiltersContainer>