Added useFormat hook to format special values.

hooks/index.js

@@ -6,6 +6,7 @@ export * from './useDocumentClick';
 export * from './useEscapeKey';
 export * from './useFilters';
 export * from './useForceUpdate';
+export * from './useFormat';
 export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';

hooks/useFormat.js

@@ -0,0 +1,39 @@
+import useMessages from './useMessages';
+import { BROWSERS } from 'lib/constants';
+import useLocale from './useLocale';
+import useCountryNames from './useCountryNames';
+
+export function useFormat() {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  const formatBrowser = value => {
+    return BROWSERS[value] || value;
+  };
+
+  const formatCountry = value => {
+    return countryNames[value] || value;
+  };
+
+  const formatDevice = value => {
+    return formatMessage(labels[value] || labels.unknown);
+  };
+
+  const formatValue = (value, type) => {
+    switch (type) {
+      case 'browser':
+        return formatBrowser(value);
+      case 'country':
+        return formatCountry(value);
+      case 'device':
+        return formatDevice(value);
+      default:
+        return value;
+    }
+  };
+
+  return { formatBrowser, formatCountry, formatDevice, formatValue };
+}
+
+export default useFormat;

hooks/useMessages.js

@@ -4,11 +4,11 @@ import { messages, labels } from 'components/messages';
 export function useMessages() {
   const { formatMessage } = useIntl();
 
-  function getMessage(id) {
+  const getMessage = id => {
     const message = Object.values(messages).find(value => value.id === id);
 
     return message ? formatMessage(message) : id;
-  }
+  };
 
   return { formatMessage, FormattedMessage, messages, labels, getMessage };
 }