UISACQCOMP-164 Sort the list of countries based on the current locale

folio-org · Oct 19, 2023 · 8be5f58 · 8be5f58
1 parent bf62600
commit 8be5f58
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## (5.1.0 IN PROGRESS)
 
+* Sort the list of countries based on the current locale. Refs UISACQCOMP-164.
+
 ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0)
 

diff --git a/lib/CountryFilter/CountryFilter.js b/lib/CountryFilter/CountryFilter.js
@@ -8,10 +8,14 @@ import { SelectionFilter } from '../SelectionFilter';
 
 const CountryFilter = (props) => {
   const intl = useIntl();
-  const countriesOptions = useMemo(() => countries.map(c => ({
-    label: intl.formatMessage({ id: `stripes-components.countries.${c.alpha2}` }),
-    value: c.alpha3,
-  })), [intl]);
+  const countriesOptions = useMemo(() => (
+    countries
+      .map(c => ({
+        label: intl.formatDisplayName(c.alpha2, { type: 'region' }),
+        value: c.alpha3,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label))
+  ), [intl]);
 
   return (
     <SelectionFilter