Updated messages.

components/messages.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages } from 'react-intl';
 
 export const labels = defineMessages({
   unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
@@ -13,5 +12,5 @@ export const devices = defineMessages({
 });
 
 export function getDeviceMessage(device) {
-  return <FormattedMessage {...(devices[device] || labels.unknown)} />;
+  return devices[device] || labels.unknown;
 }

components/metrics/DevicesTable.js

@@ -11,7 +11,7 @@ export default function DevicesTable({ websiteId, ...props }) {
       type="device"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
-      renderLabel={({ x }) => getDeviceMessage(x)}
+      renderLabel={({ x }) => <FormattedMessage {...getDeviceMessage(x)} />}
     />
   );
 }

components/metrics/RealtimeLog.js

@@ -7,7 +7,7 @@ import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
 import NoData from 'components/common/NoData';
-import { getDeviceMessage } from 'components/messages';
+import { getDeviceMessage, labels } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -129,15 +129,10 @@ export default function RealtimeLog({ data, websites, websiteId }) {
           id="message.log.visitor"
           defaultMessage="Visitor from {country} using {browser} on {os} {device}"
           values={{
-            country: (
-              <b>
-                {countryNames[country] ||
-                  intl.formatMessage({ id: 'label.unknown', defaultMessage: 'Unknown' })}
-              </b>
-            ),
+            country: <b>{countryNames[country] || intl.formatMessage(labels.unknown)}</b>,
             browser: <b>{BROWSERS[browser]}</b>,
             os: <b>{os}</b>,
-            device: <b>{getDeviceMessage(device)}</b>,
+            device: <b>{intl.formatMessage(getDeviceMessage(device))}</b>,
           }}
         />
       );