From 88fd354554013e6e69904585c3602761dad3e0b7 Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Wed, 22 Jan 2025 19:22:40 -0300 Subject: [PATCH 1/4] refactor: sortVariationsByLabel logic when not numbers and redability --- CHANGELOG.md | 4 +++ .../SKUSelector/components/SKUSelector.tsx | 32 +++++++++++++------ 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 99b6f5ba9..1cc0285ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Changed + +- Fully refactor of `sortVariationsByLabel` property + ## [3.176.1] - 2024-11-08 ## [3.176.0] - 2024-11-06 diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index 479cb5c2d..87548f781 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -46,6 +46,7 @@ function getShowValueForVariation( ) } + interface Props { seeMoreLabel: string maxItems: number @@ -84,6 +85,18 @@ function isSkuAvailable(item?: SelectorProductItem) { return seller.commertialOffer?.AvailableQuantity > 0 } +function sortOptionsNumerically(options: DisplayOption[]) { + return options.slice().sort((a, b) => parseFloat(a.label) - parseFloat(b.label)); +} + +function sortOptionsAlphabetically(options: DisplayOption[]) { + return options.slice().sort((a, b) => { + if (a.label < b.label) return -1; + if (a.label > b.label) return 1; + return 0; + }); +} + const showItemAsAvailable = ({ possibleItems, selectedVariations, @@ -265,7 +278,7 @@ const variationNameToDisplayVariation = (variationName: string): DisplayVariation => { const name = variationName const { values, originalName } = variations[variationName] - const options = values + let options = values .map( parseOptionNameToDisplayOption({ selectedVariations, @@ -279,19 +292,20 @@ const variationNameToDisplayVariation = }) ) .filter(Boolean) as DisplayOption[] + if (sortVariationsByLabel) { - const allNumbers = options.every( - (option: any) => !Number.isNaN(option.label) + + const areAllNumbers = options.every( + (option: DisplayOption) => !isNaN(Number(option.label)) ) - options.sort((a: any, b: any) => { - if (allNumbers) { - return a.label - b.label - } + const sortedOptions = areAllNumbers + ? sortOptionsNumerically({...options}) + : sortOptionsAlphabetically({...options}); + + options = {...sortedOptions} - return a.label < b.label ? -1 : a.label > b.label ? 1 : 0 - }) } return { name, originalName, options } From b4d6ac7e3805cce46351ebe4893691753aecbc90 Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Wed, 22 Jan 2025 19:31:49 -0300 Subject: [PATCH 2/4] lint fix --- .../SKUSelector/components/SKUSelector.tsx | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index 87548f781..95a3813a4 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -46,7 +46,6 @@ function getShowValueForVariation( ) } - interface Props { seeMoreLabel: string maxItems: number @@ -86,15 +85,18 @@ function isSkuAvailable(item?: SelectorProductItem) { } function sortOptionsNumerically(options: DisplayOption[]) { - return options.slice().sort((a, b) => parseFloat(a.label) - parseFloat(b.label)); + return options + .slice() + .sort((a, b) => parseFloat(a.label) - parseFloat(b.label)) } function sortOptionsAlphabetically(options: DisplayOption[]) { return options.slice().sort((a, b) => { - if (a.label < b.label) return -1; - if (a.label > b.label) return 1; - return 0; - }); + if (a.label < b.label) return -1 + if (a.label > b.label) return 1 + + return 0 + }) } const showItemAsAvailable = ({ @@ -292,20 +294,17 @@ const variationNameToDisplayVariation = }) ) .filter(Boolean) as DisplayOption[] - if (sortVariationsByLabel) { - const areAllNumbers = options.every( - (option: DisplayOption) => !isNaN(Number(option.label)) + (option: DisplayOption) => !Number.isNaN(Number(option.label)) ) const sortedOptions = areAllNumbers - ? sortOptionsNumerically({...options}) - : sortOptionsAlphabetically({...options}); - - options = {...sortedOptions} + ? sortOptionsNumerically({ ...options }) + : sortOptionsAlphabetically({ ...options }) + options = { ...sortedOptions } } return { name, originalName, options } From b09d683a60995bf93fbf4108016c50c12e87413b Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Wed, 22 Jan 2025 19:44:25 -0300 Subject: [PATCH 3/4] removing unecessary code --- react/components/SKUSelector/components/SKUSelector.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index 95a3813a4..19d158074 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -85,13 +85,11 @@ function isSkuAvailable(item?: SelectorProductItem) { } function sortOptionsNumerically(options: DisplayOption[]) { - return options - .slice() - .sort((a, b) => parseFloat(a.label) - parseFloat(b.label)) + return options.sort((a, b) => parseFloat(a.label) - parseFloat(b.label)) } function sortOptionsAlphabetically(options: DisplayOption[]) { - return options.slice().sort((a, b) => { + return options.sort((a, b) => { if (a.label < b.label) return -1 if (a.label > b.label) return 1 From a98176dcc75a0ff02ea759f9b895920eda853ce5 Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Wed, 22 Jan 2025 19:49:05 -0300 Subject: [PATCH 4/4] spread data structure --- react/components/SKUSelector/components/SKUSelector.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index 19d158074..4f19b16c6 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -299,10 +299,10 @@ const variationNameToDisplayVariation = ) const sortedOptions = areAllNumbers - ? sortOptionsNumerically({ ...options }) - : sortOptionsAlphabetically({ ...options }) + ? sortOptionsNumerically([...options]) + : sortOptionsAlphabetically([...options]) - options = { ...sortedOptions } + options = [...sortedOptions] } return { name, originalName, options }