From 7071f5fba52f410f365ab9d25055e6467246c390 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 22 Feb 2022 13:31:37 -0800
Subject: [PATCH] Updated messages.

---
 components/messages.js             |  5 ++---
 components/metrics/DevicesTable.js |  2 +-
 components/metrics/RealtimeLog.js  | 11 +++--------
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/messages.js b/components/messages.js
index f6b589eb..1151752a 100644
--- a/components/messages.js
+++ b/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;
 }
diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js
index 3073cf8b..d09774b9 100644
--- a/components/metrics/DevicesTable.js
+++ b/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)} />}
     />
   );
 }
diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
index 01a2f972..f4e87834 100644
--- a/components/metrics/RealtimeLog.js
+++ b/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>,
           }}
         />
       );