Fixed messages.

components/common/HamburgerButton.js

@@ -1,30 +1,31 @@
 import { Button, Icon } from 'react-basics';
 import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
+import useMessages from 'hooks/useMessages';
 import styles from './HamburgerButton.module.css';
 
-const menuItems = [
-  {
-    label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
-    value: '/dashboard',
-  },
-  { label: <FormattedMessage id="label.realtime" defaultMessage="Realtime" />, value: '/realtime' },
-  {
-    label: <FormattedMessage id="label.settings" defaultMessage="AppLayout" />,
-    value: '/input',
-  },
-  {
-    label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
-    value: '/input/profile',
-  },
-  { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: '/logout' },
-];
-
 export default function HamburgerButton() {
+  const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
 
+  const menuItems = [
+    {
+      label: formatMessage(labels.dashboard),
+      value: '/dashboard',
+    },
+    { label: formatMessage(labels.realtime), value: '/realtime' },
+    {
+      label: formatMessage(labels.settings),
+      value: '/settings',
+    },
+    {
+      label: formatMessage(labels.profile),
+      value: '/settings/profile',
+    },
+    { label: formatMessage(labels.logout), value: '/logout' },
+  ];
+
   function handleClick() {
     setActive(state => !state);
   }

components/common/NoData.js

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
 import styles from './NoData.module.css';
+import useMessages from 'hooks/useMessages';
 
 function NoData({ className }) {
+  const { formatMessage, messages } = useMessages();
+
   return (
-    <div className={classNames(styles.container, className)}>
-      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
-    </div>
+    <div className={classNames(styles.container, className)}>{formatMessage(messages.noData)}</div>
   );
 }
 

components/metrics/BrowsersTable.js

@@ -1,9 +1,11 @@
-import { FormattedMessage } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
 import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
+import useMessages from 'hooks/useMessages';
 
 export default function BrowsersTable({ websiteId, ...props }) {
+  const { formatMessage, labels } = useMessages();
+
   function renderLink({ x: browser }) {
     return <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser} />;
   }
@@ -11,9 +13,9 @@ export default function BrowsersTable({ websiteId, ...props }) {
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
+      title={formatMessage(labels.browsers)}
       type="browser"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      metric={formatMessage(labels.visitors)}
       websiteId={websiteId}
       renderLabel={renderLink}
     />

components/metrics/DataTable.js

@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
+import useMessages from '../../hooks/useMessages';
 
 export default function DataTable({
   data = [],
@@ -14,11 +15,11 @@ export default function DataTable({
   metric,
   className,
   renderLabel,
-  height,
   animate = true,
   virtualize = false,
   showPercentage = true,
 }) {
+  const { formatMessage, labels } = useMessages();
   const [ref, bounds] = useMeasure();
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
@@ -31,11 +32,7 @@ export default function DataTable({
     return (
       <AnimatedRow
         key={label}
-        label={
-          renderLabel
-            ? renderLabel(row)
-            : label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
-        }
+        label={renderLabel ? renderLabel(row) : label ?? formatMessage(labels.unknown)}
         value={value}
         percent={percent}
         animate={animate && !virtualize}

components/metrics/ScreenTable.js

@@ -1,13 +1,15 @@
 import MetricsTable from './MetricsTable';
-import { FormattedMessage } from 'react-intl';
+import useMessages from 'hooks/useMessages';
 
 export default function ScreenTable({ websiteId, ...props }) {
+  const { formatMessage, labels } = useMessages();
+
   return (
     <MetricsTable
       {...props}
-      title={<FormattedMessage id="metrics.screens" defaultMessage="Screens" />}
+      title={formatMessage(labels.screens)}
       type="screen"
-      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      metric={formatMessage(labels.visitors)}
       websiteId={websiteId}
     />
   );

package.json

@@ -28,9 +28,9 @@
     "update-db": "prisma migrate deploy",
     "check-db": "node scripts/check-db.js",
     "copy-db-files": "node scripts/copy-db-files.js",
-    "generate-lang": "npm-run-all extract-lang merge-lang",
-    "extract-lang": "formatjs extract \"{pages,components}/**/*.js\" --out-file build/messages.json",
-    "merge-lang": "node scripts/merge-lang.js",
+    "extract-messages": "formatjs extract \"{pages,components}/**/*.js\" --out-file build/messages.json",
+    "merge-messages": "node scripts/merge-messages.js",
+    "generate-lang": "npm-run-all extract-messages merge-messages",
     "format-lang": "node scripts/format-lang.js",
     "compile-lang": "formatjs compile-folder --ast build public/intl/messages",
     "check-lang": "node scripts/check-lang.js",