Render correct OS names globally.

src/components/hooks/useFormat.ts

@@ -1,5 +1,5 @@
 import useMessages from './useMessages';
-import { BROWSERS } from 'lib/constants';
+import { BROWSERS, OS_NAMES } from 'lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
 import regions from 'public/iso-3166-2.json';
@@ -9,10 +9,18 @@ export function useFormat() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
+  const formatOS = (value: string): string => {
+    return OS_NAMES[value] || value;
+  };
+
   const formatBrowser = (value: string): string => {
     return BROWSERS[value] || value;
   };
 
+  const formatDevice = (value: string): string => {
+    return formatMessage(labels[value] || labels.unknown);
+  };
+
   const formatCountry = (value: string): string => {
     return countryNames[value] || value;
   };
@@ -26,28 +34,26 @@ export function useFormat() {
     return `${value}, ${countryNames[country]}`;
   };
 
-  const formatDevice = (value: string): string => {
-    return formatMessage(labels[value] || labels.unknown);
-  };
-
   const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => {
     switch (type) {
+      case 'os':
+        return formatOS(value);
       case 'browser':
         return formatBrowser(value);
+      case 'device':
+        return formatDevice(value);
       case 'country':
         return formatCountry(value);
       case 'region':
         return formatRegion(value);
       case 'city':
         return formatCity(value, data?.country);
-      case 'device':
-        return formatDevice(value);
       default:
         return value;
     }
   };
 
-  return { formatBrowser, formatCountry, formatRegion, formatDevice, formatValue };
+  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue };
 }
 
 export default useFormat;