Add language to useFormat.

src/components/hooks/useFormat.ts

@@ -2,12 +2,14 @@ import useMessages from './useMessages';
 import { BROWSERS, OS_NAMES } from 'lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
+import useLanguageNames from './useLanguageNames';
 import regions from '../../../public/iso-3166-2.json';
 
 export function useFormat() {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
+  const languageNames = useLanguageNames(locale);
 
   const formatOS = (value: string): string => {
     return OS_NAMES[value] || value;
@@ -34,6 +36,10 @@ export function useFormat() {
     return countryNames[country] ? `${value}, ${countryNames[country]}` : value;
   };
 
+  const formatLanguage = (value: string): string => {
+    return languageNames[value?.split('-')[0]] || value;
+  };
+
   const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => {
     switch (type) {
       case 'os':
@@ -48,12 +54,23 @@ export function useFormat() {
         return formatRegion(value);
       case 'city':
         return formatCity(value, data?.country);
+      case 'language':
+        return formatLanguage(value);
       default:
         return value;
     }
   };
 
-  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatCity, formatValue };
+  return {
+    formatOS,
+    formatBrowser,
+    formatDevice,
+    formatCountry,
+    formatRegion,
+    formatCity,
+    formatLanguage,
+    formatValue,
+  };
 }
 
 export default useFormat;

src/components/metrics/LanguagesTable.tsx

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