i18n country names

src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx

@@ -1,23 +1,19 @@
-import { useCallback } from 'react';
 import ListTable from 'components/metrics/ListTable';
-import { useLocale, useCountryNames, useMessages } from 'components/hooks';
+import { useMessages } from 'components/hooks';
+import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 import styles from './RealtimeCountries.module.css';
 import TypeIcon from 'components/common/TypeIcon';
 
 export function RealtimeCountries({ data }) {
   const { formatMessage, labels } = useMessages();
-  const { locale } = useLocale();
-  const { countryNames } = useCountryNames(locale);
+  const intl = useIntl();
 
-  const renderCountryName = useCallback(
-    ({ x: code }) => (
-      <span className={classNames(locale, styles.row)}>
-        <TypeIcon type="country" value={code?.toLowerCase()} />
-        {countryNames[code]}
-      </span>
-    ),
-    [countryNames, locale],
+  const renderCountryName = ({ x: code }) => (
+    <span className={classNames(styles.row)}>
+      <TypeIcon type="country" value={code?.toLowerCase()} />
+      {intl.formatDisplayName(code, { type: 'region' })}
+    </span>
   );
 
   return (

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -1,7 +1,7 @@
 import useFormat from 'components//hooks/useFormat';
 import Empty from 'components/common/Empty';
 import FilterButtons from 'components/common/FilterButtons';
-import { useCountryNames, useLocale, useMessages, useTimezone } from 'components/hooks';
+import { useMessages, useTimezone } from 'components/hooks';
 import Icons from 'components/icons';
 import { BROWSERS, OS_NAMES } from 'lib/constants';
 import { stringToColor } from 'lib/format';
@@ -31,9 +31,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
   const [search, setSearch] = useState('');
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { formatValue } = useFormat();
-  const { locale } = useLocale();
   const { formatTimezoneDate } = useTimezone();
-  const { countryNames } = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
 
   const buttons = [
@@ -112,7 +110,12 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
         <FormattedMessage
           {...messages.visitorLog}
           values={{
-            country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
+            country: (
+              <b>
+                {intl.formatDisplayName(country, { type: 'region' }) ||
+                  formatMessage(labels.unknown)}
+              </b>
+            ),
             browser: <b>{BROWSERS[browser]}</b>,
             os: <b>{OS_NAMES[os] || os}</b>,
             device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -1,4 +1,4 @@
-import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from 'components/hooks';
+import { useFormat, useMessages, useRegionNames, useTimezone } from 'components/hooks';
 import TypeIcon from 'components/common/TypeIcon';
 import { Icon, CopyIcon } from 'react-basics';
 import Icons from 'components/icons';
@@ -7,11 +7,10 @@ import { useIntl } from 'react-intl';
 
 export default function SessionInfo({ data }) {
   const intl = useIntl();
-  const { locale } = useLocale();
   const { formatTimezoneDate } = useTimezone();
   const { formatMessage, labels } = useMessages();
   const { formatValue } = useFormat();
-  const { getRegionName } = useRegionNames(locale);
+  const { getRegionName } = useRegionNames();
 
   return (
     <div className={styles.info}>