useLanguageNames

src/components/hooks/index.ts

@@ -35,7 +35,6 @@ export * from './useFields';
 export * from './useFilters';
 export * from './useForceUpdate';
 export * from './useFormat';
-export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
 export * from './useModified';

src/components/hooks/useLanguageNames.ts

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react';
-import { httpGet } from 'next-basics';
-import enUS from '../../../public/intl/language/en-US.json';
-
-const languageNames = {
-  'en-US': enUS,
-};
-
-export function useLanguageNames(locale) {
-  const [list, setList] = useState(languageNames[locale] || enUS);
-
-  async function loadData(locale) {
-    const { data } = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
-
-    if (data) {
-      languageNames[locale] = data;
-      setList(languageNames[locale]);
-    } else {
-      setList(enUS);
-    }
-  }
-
-  useEffect(() => {
-    if (!languageNames[locale]) {
-      loadData(locale);
-    } else {
-      setList(languageNames[locale]);
-    }
-  }, [locale]);
-
-  return list;
-}
-
-export default useLanguageNames;

src/components/metrics/LanguagesTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { percentFilter } from 'lib/filters';
-import { useLanguageNames } from 'components/hooks';
+import { useIntl } from 'react-intl';
 import { useLocale } from 'components/hooks';
 import { useMessages } from 'components/hooks';
 
@@ -10,7 +10,8 @@ export function LanguagesTable({
 }: { onDataLoad: (data: any) => void } & MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
-  const languageNames = useLanguageNames(locale);
+  const intl = useIntl();
+  const languageNames = intl.formatDisplayName(locale, { type: 'language' });
 
   const renderLabel = ({ x }) => {
     return <div className={locale}>{languageNames[x?.split('-')[0]] ?? x}</div>;