From 53449d65bb1ce194140ef08d1ac0e45331974c7c Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Mon, 15 Apr 2024 16:41:16 +0000
Subject: [PATCH] Export and use formatCity.

---
 src/components/hooks/useFormat.ts      |  2 +-
 src/components/metrics/CitiesTable.tsx | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/hooks/useFormat.ts b/src/components/hooks/useFormat.ts
index 57edfa52..11bfcd49 100644
--- a/src/components/hooks/useFormat.ts
+++ b/src/components/hooks/useFormat.ts
@@ -53,7 +53,7 @@ export function useFormat() {
     }
   };
 
-  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue };
+  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatCity, formatValue };
 }
 
 export default useFormat;
diff --git a/src/components/metrics/CitiesTable.tsx b/src/components/metrics/CitiesTable.tsx
index d275e650..7ef3223f 100644
--- a/src/components/metrics/CitiesTable.tsx
+++ b/src/components/metrics/CitiesTable.tsx
@@ -1,23 +1,16 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
-import { useLocale } from 'components/hooks';
 import { useMessages } from 'components/hooks';
-import { useCountryNames } from 'components/hooks';
+import { useFormat } from 'components/hooks';
 
 export function CitiesTable(props: MetricsTableProps) {
-  const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
-  const countryNames = useCountryNames(locale);
-
-  const renderLabel = (city: string, country: string) => {
-    const countryName = countryNames[country];
-    return countryName ? `${city}, ${countryName}` : city;
-  };
+  const { formatCity } = useFormat();
 
   const renderLink = ({ x: city, country }) => {
     return (
-      <FilterLink id="city" value={city} label={renderLabel(city, country)}>
+      <FilterLink id="city" value={city} label={formatCity(city, country)}>
         {country && (
           <img
             src={`${process.env.basePath}/images/flags/${country?.toLowerCase() || 'xx'}.png`}