diff --git a/components/pages/dashboard/DashboardSettingsButton.js b/components/pages/dashboard/DashboardSettingsButton.js
index cdbb771b..d76f5232 100644
--- a/components/pages/dashboard/DashboardSettingsButton.js
+++ b/components/pages/dashboard/DashboardSettingsButton.js
@@ -1,24 +1,18 @@
-import { defineMessages, useIntl } from 'react-intl';
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
import Icons from 'components/icons';
-import { labels } from 'components/messages';
import { saveDashboard } from 'store/dashboard';
-
-const messages = defineMessages({
- toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
- editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
-});
+import useMessages from 'hooks/useMessages';
export default function DashboardSettingsButton() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const menuOptions = [
{
- label: formatMessage(messages.toggleCharts),
+ label: formatMessage(labels.toggleCharts),
value: 'charts',
},
{
- label: formatMessage(messages.editDashboard),
+ label: formatMessage(labels.editDashboard),
value: 'order',
},
];
diff --git a/components/pages/realtime/RealtimeCountries.js b/components/pages/realtime/RealtimeCountries.js
index 82d744fc..f6711f1a 100644
--- a/components/pages/realtime/RealtimeCountries.js
+++ b/components/pages/realtime/RealtimeCountries.js
@@ -1,12 +1,11 @@
import { useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { labels } from 'components/messages';
import DataTable from 'components/metrics/DataTable';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
+import useMessages from 'hooks/useMessages';
export default function RealtimeCountries({ data }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
diff --git a/components/pages/realtime/RealtimeDashboard.js b/components/pages/realtime/RealtimeDashboard.js
index 35906c45..268a135b 100644
--- a/components/pages/realtime/RealtimeDashboard.js
+++ b/components/pages/realtime/RealtimeDashboard.js
@@ -1,5 +1,4 @@
import { useState, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
import { subMinutes, startOfMinute } from 'date-fns';
import { useRouter } from 'next/router';
import firstBy from 'thenby';
@@ -14,8 +13,8 @@ import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
import { percentFilter } from 'lib/filters';
-import { labels } from 'components/messages';
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
import styles from './RealtimeDashboard.module.css';
@@ -27,7 +26,7 @@ function mergeData(state = [], data = [], time) {
}
export default function RealtimeDashboard({ websiteId }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const router = useRouter();
const [currentData, setCurrentData] = useState();
const { get, useQuery } = useApi();
diff --git a/components/pages/realtime/RealtimeHeader.js b/components/pages/realtime/RealtimeHeader.js
index 15730d5d..5a7e1c3f 100644
--- a/components/pages/realtime/RealtimeHeader.js
+++ b/components/pages/realtime/RealtimeHeader.js
@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
import MetricCard from 'components/metrics/MetricCard';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
import styles from './RealtimeHeader.module.css';
export default function RealtimeHeader({ data = {} }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const { pageviews, visitors, events, countries } = data;
return (
diff --git a/components/pages/realtime/RealtimeHome.js b/components/pages/realtime/RealtimeHome.js
index 67b34ee9..a893ee84 100644
--- a/components/pages/realtime/RealtimeHome.js
+++ b/components/pages/realtime/RealtimeHome.js
@@ -1,14 +1,13 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useMessages from 'hooks/useMessages';
export default function RealtimeHome() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const router = useRouter();
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
diff --git a/components/pages/realtime/RealtimeLog.js b/components/pages/realtime/RealtimeLog.js
index be7aeb8d..0ad579c2 100644
--- a/components/pages/realtime/RealtimeLog.js
+++ b/components/pages/realtime/RealtimeLog.js
@@ -1,11 +1,9 @@
import { useMemo, useState } from 'react';
import { StatusLight, Icon, Text } from 'react-basics';
-import { useIntl, FormattedMessage } from 'react-intl';
import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
-import { labels, messages } from 'components/messages';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
@@ -14,6 +12,7 @@ import { dateFormat } from 'lib/date';
import { safeDecodeURI } from 'next-basics';
import Icons from 'components/icons';
import styles from './RealtimeLog.module.css';
+import useMessages from 'hooks/useMessages';
const TYPE_ALL = 'all';
const TYPE_PAGEVIEW = 'pageview';
@@ -27,7 +26,7 @@ const icons = {
};
export default function RealtimeLog({ data, websiteDomain }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const [filter, setFilter] = useState(TYPE_ALL);
diff --git a/components/pages/realtime/RealtimeUrls.js b/components/pages/realtime/RealtimeUrls.js
index 8437af40..8f8b8312 100644
--- a/components/pages/realtime/RealtimeUrls.js
+++ b/components/pages/realtime/RealtimeUrls.js
@@ -1,14 +1,13 @@
import { useMemo, useState } from 'react';
import { ButtonGroup, Button, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
import firstBy from 'thenby';
import { percentFilter } from 'lib/filters';
import DataTable from 'components/metrics/DataTable';
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function RealtimeUrls({ websiteDomain, data = {} }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const { pageviews } = data;
const [filter, setFilter] = useState(FILTER_REFERRERS);
diff --git a/components/pages/settings/profile/DateRangeSetting.js b/components/pages/settings/profile/DateRangeSetting.js
index 15a3c010..23921d31 100644
--- a/components/pages/settings/profile/DateRangeSetting.js
+++ b/components/pages/settings/profile/DateRangeSetting.js
@@ -1,12 +1,11 @@
-import { useIntl } from 'react-intl';
import DateFilter from 'components/input/DateFilter';
import { Button, Flexbox } from 'react-basics';
import useDateRange from 'hooks/useDateRange';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function DateRangeSetting() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const [dateRange, setDateRange] = useDateRange();
const { startDate, endDate, value } = dateRange;
diff --git a/components/pages/settings/profile/LanguageSetting.js b/components/pages/settings/profile/LanguageSetting.js
index d5aa064f..8130d33a 100644
--- a/components/pages/settings/profile/LanguageSetting.js
+++ b/components/pages/settings/profile/LanguageSetting.js
@@ -1,12 +1,11 @@
-import { useIntl } from 'react-intl';
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
import useLocale from 'hooks/useLocale';
import { DEFAULT_LOCALE } from 'lib/constants';
import { languages } from 'lib/lang';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function LanguageSetting() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const { locale, saveLocale } = useLocale();
const options = Object.keys(languages);
diff --git a/components/pages/settings/profile/PasswordChangeButton.js b/components/pages/settings/profile/PasswordChangeButton.js
index 51ac6b9b..466b6896 100644
--- a/components/pages/settings/profile/PasswordChangeButton.js
+++ b/components/pages/settings/profile/PasswordChangeButton.js
@@ -1,11 +1,10 @@
-import { useIntl } from 'react-intl';
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import Icons from 'components/icons';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function PasswordChangeButton() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels, messages } = useMessages();
const { toast, showToast } = useToast();
const handleSave = () => {
diff --git a/components/pages/settings/profile/PasswordEditForm.js b/components/pages/settings/profile/PasswordEditForm.js
index be3d1048..4ea934b0 100644
--- a/components/pages/settings/profile/PasswordEditForm.js
+++ b/components/pages/settings/profile/PasswordEditForm.js
@@ -1,11 +1,10 @@
import { useRef } from 'react';
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function PasswordEditForm({ onSave, onClose }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
const ref = useRef(null);
diff --git a/components/pages/settings/profile/ProfileSettings.js b/components/pages/settings/profile/ProfileSettings.js
index d302b6b2..d2b73159 100644
--- a/components/pages/settings/profile/ProfileSettings.js
+++ b/components/pages/settings/profile/ProfileSettings.js
@@ -1,13 +1,12 @@
-import { useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import ProfileDetails from './ProfileDetails';
import PasswordChangeButton from './PasswordChangeButton';
-import { labels } from 'components/messages';
import useConfig from 'hooks/useConfig';
+import useMessages from 'hooks/useMessages';
export default function ProfileSettings() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const { cloudMode } = useConfig();
return (
diff --git a/components/pages/settings/profile/TimezoneSetting.js b/components/pages/settings/profile/TimezoneSetting.js
index 11cc450e..dd69b3c9 100644
--- a/components/pages/settings/profile/TimezoneSetting.js
+++ b/components/pages/settings/profile/TimezoneSetting.js
@@ -1,12 +1,11 @@
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
import { listTimeZones } from 'timezone-support';
import useTimezone from 'hooks/useTimezone';
+import useMessages from 'hooks/useMessages';
import { getTimezone } from 'lib/date';
-import { labels } from 'components/messages';
export default function TimezoneSetting() {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels } = useMessages();
const [timezone, saveTimezone] = useTimezone();
const options = listTimeZones();
diff --git a/components/pages/settings/teams/JoinTeamForm.js b/components/pages/settings/teams/JoinTeamForm.js
index 387968fd..b3fb95d1 100644
--- a/components/pages/settings/teams/JoinTeamForm.js
+++ b/components/pages/settings/teams/JoinTeamForm.js
@@ -1,5 +1,4 @@
import { useRef } from 'react';
-import { useIntl } from 'react-intl';
import {
Form,
FormRow,
@@ -10,10 +9,10 @@ import {
SubmitButton,
} from 'react-basics';
import useApi from 'hooks/useApi';
-import { labels, getMessage } from 'components/messages';
+import useMessages from 'hooks/useMessages';
export default function TeamJoinForm({ onSave, onClose }) {
- const { formatMessage } = useIntl();
+ const { formatMessage, labels, getMessage } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post('/teams/join', data));
const ref = useRef(null);
@@ -28,7 +27,7 @@ export default function TeamJoinForm({ onSave, onClose }) {
};
return (
-