Use useMessages hook everywhere.

components/common/ErrorMessage.js

@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
 import { Icon, Icons, Text } from 'react-basics';
-import { messages } from 'components/messages';
 import styles from './ErrorMessage.module.css';
+import useMessages from 'hooks/useMessages';
 
 export default function ErrorMessage() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, messages } = useMessages();
 
   return (
     <div className={styles.error}>

components/common/UpdateNotice.js

@@ -1,14 +1,13 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { Button, Banner, Row, Column, Flexbox } from 'react-basics';
+import { Button, Row, Column } from 'react-basics';
 import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
-import { labels, messages } from 'components/messages';
 import styles from './UpdateNotice.module.css';
+import useMessages from 'hooks/useMessages';
 
 export default function UpdateNotice() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
 

components/input/DateFilter.js

@@ -1,17 +1,16 @@
 import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'hooks/useLocale';
 import { dateFormat, getDateRangeValues } from 'lib/date';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
 import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
+import useMessages from 'hooks/useMessages';
 
 function DateFilter({ websiteId, value, className }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;

components/input/LogoutButton.js

@@ -1,10 +1,9 @@
 import { Button, Icon, Icons, Tooltip } from 'react-basics';
 import Link from 'next/link';
-import { labels } from 'components/messages';
-import { useIntl } from 'react-intl';
+import useMessages from 'hooks/useMessages';
 
 export default function LogoutButton({ tooltipPosition = 'top' }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   return (
     <Link href="/logout">
       <Tooltip label={formatMessage(labels.logout)} position={tooltipPosition}>

components/input/RefreshButton.js

@@ -1,12 +1,11 @@
-import { useIntl } from 'react-intl';
 import { LoadingButton, Icon, Tooltip } from 'react-basics';
 import { setWebsiteDateRange } from 'store/websites';
 import useDateRange from 'hooks/useDateRange';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 function RefreshButton({ websiteId, isLoading }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
 
   function handleClick() {

components/input/SettingsButton.js

@@ -1,13 +1,12 @@
-import { useIntl } from 'react-intl';
 import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
 import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 import styles from './SettingsButton.module.css';
 
 export default function SettingsButton() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   return (
     <PopupTrigger>

components/input/ThemeButton.js

@@ -1,6 +1,5 @@
 import { useTransition, animated } from 'react-spring';
 import { Button, Icon } from 'react-basics';
-import { useIntl } from 'react-intl';
 import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';

components/input/WebsiteSelect.js

@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
 import { Dropdown, Item } from 'react-basics';
-import { labels } from 'components/messages';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteSelect({ websiteId, onSelect }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(['websites:me'], () => get('/me/websites'));
 

components/messages.js

@@ -109,6 +109,8 @@ export const labels = defineMessages({
   laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },
   tablet: { id: 'label.tablet', defaultMessage: 'Tablet' },
   mobile: { id: 'label.mobile', defaultMessage: 'Mobile' },
+  toggleCharts: { id: 'label.toggle-charts', defaultMessage: 'Toggle charts' },
+  editDashboard: { id: 'label.edit-dashboard', defaultMessage: 'Edit dashboard' },
 });
 
 export const messages = defineMessages({
@@ -201,9 +203,3 @@ export const messages = defineMessages({
     defaultMessage: '{event} on {url}',
   },
 });
-
-export function getMessage(id, formatMessage) {
-  const message = Object.values(messages).find(value => value.id === id);
-
-  return message ? formatMessage(message) : id;
-}

components/metrics/ActiveUsers.js

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
 import { StatusLight } from 'react-basics';
-import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
-import { messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(
     ['websites:active', websiteId],

components/metrics/CountriesTable.js

@@ -1,20 +1,14 @@
 import MetricsTable from './MetricsTable';
 import { percentFilter } from 'lib/filters';
-import { useIntl, defineMessages } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
-
-const messages = defineMessages({
-  unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
-  countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
-  visitors: { id: 'metrics.visitors', defaultMessage: 'Visitors' },
-});
+import useMessages from 'hooks/useMessages';
 
 export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: code }) {
     return (
@@ -22,7 +16,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
         <FilterLink
           id="country"
           value={code}
-          label={countryNames[code] ?? formatMessage(messages.unknown)}
+          label={countryNames[code] ?? formatMessage(labels.unknown)}
         />
       </div>
     );
@@ -31,9 +25,9 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
   return (
     <MetricsTable
       {...props}
-      title={formatMessage(messages.countries)}
+      title={formatMessage(labels.countries)}
       type="country"
-      metric={formatMessage(messages.visitors)}
+      metric={formatMessage(labels.visitors)}
       websiteId={websiteId}
       onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLink}

components/metrics/DatePickerForm.js

@@ -1,13 +1,12 @@
 import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { isAfter, isBefore, isSameDay } from 'date-fns';
 import useLocale from 'hooks/useLocale';
 import { getDateRangeValues } from 'lib/date';
 import { getDateLocale } from 'lib/lang';
-import { labels } from 'components/messages';
-import styles from './DatePickerForm.module.css';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
+import useMessages from 'hooks/useMessages';
+import styles from './DatePickerForm.module.css';
 
 export default function DatePickerForm({
   startDate: defaultStartDate,
@@ -24,7 +23,7 @@ export default function DatePickerForm({
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
   const { locale } = useLocale();
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const disabled =
     selected === FILTER_DAY

components/metrics/DevicesTable.js

@@ -1,10 +1,9 @@
 import MetricsTable from './MetricsTable';
-import { useIntl } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function DevicesTable({ websiteId, ...props }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: device }) {
     return (

components/metrics/EventsTable.js

@@ -1,13 +1,8 @@
-import { defineMessages, useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
-
-const messages = defineMessages({
-  events: { id: 'metrics.events', defaultMessage: 'Events' },
-  actions: { id: 'metrics.actions', defaultMessage: 'Actions' },
-});
+import useMessages from 'hooks/useMessages';
 
 export default function EventsTable({ websiteId, ...props }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   function handleDataLoad(data) {
     props.onDataLoad?.(data);
@@ -16,9 +11,9 @@ export default function EventsTable({ websiteId, ...props }) {
   return (
     <MetricsTable
       {...props}
-      title={formatMessage(messages.events)}
+      title={formatMessage(labels.events)}
       type="event"
-      metric={formatMessage(messages.actions)}
+      metric={formatMessage(labels.actions)}
       websiteId={websiteId}
       onDataLoad={handleDataLoad}
     />

components/metrics/FilterTags.js

@@ -1,12 +1,11 @@
-import { useIntl } from 'react-intl';
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import { labels } from 'components/messages';
 import usePageQuery from 'hooks/usePageQuery';
 import styles from './FilterTags.module.css';
+import useMessages from 'hooks/useMessages';
 
-export default function FilterTags({ websiteId, params, onClick }) {
-  const { formatMessage } = useIntl();
+export default function FilterTags({ websiteId, params }) {
+  const { formatMessage, labels } = useMessages();
   const {
     router,
     resolveUrl,

components/metrics/MetricsBar.js

@@ -1,17 +1,16 @@
 import { useState } from 'react';
 import { Loading } from 'react-basics';
-import { useIntl } from 'react-intl';
 import ErrorMessage from 'components/common/ErrorMessage';
 import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import usePageQuery from 'hooks/usePageQuery';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import MetricCard from './MetricCard';
-import { labels } from 'components/messages';
 import styles from './MetricsBar.module.css';
+import useMessages from 'hooks/useMessages';
 
 export default function MetricsBar({ websiteId }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;

components/metrics/MetricsTable.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { Loading, Icon, Text, Button } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
 import Link from 'next/link';
 import firstBy from 'thenby';
 import classNames from 'classnames';
@@ -12,12 +11,9 @@ import ErrorMessage from 'components/common/ErrorMessage';
 import DataTable from './DataTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
+import useMessages from 'hooks/useMessages';
 import styles from './MetricsTable.module.css';
 
-const messages = defineMessages({
-  more: { id: 'label.more', defaultMessage: 'More' },
-});
-
 export default function MetricsTable({
   websiteId,
   type,
@@ -35,7 +31,7 @@ export default function MetricsTable({
     router,
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
 
   const { data, isLoading, isFetched, error } = useQuery(
@@ -81,7 +77,7 @@ export default function MetricsTable({
         {data && !error && limit && (
           <Link href={router.pathname} as={resolveUrl({ view: type })}>
             <Button variant="quiet">
-              <Text>{formatMessage(messages.more)}</Text>
+              <Text>{formatMessage(labels.more)}</Text>
               <Icon size="sm">
                 <Icons.ArrowRight />
               </Icon>

components/metrics/OSTable.js

@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function OSTable({ websiteId, ...props }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: os }) {
     return <FilterLink id="os" value={os} />;

components/metrics/PagesTable.js

@@ -1,11 +1,10 @@
 import { useState } from 'react';
-import { useIntl } from 'react-intl';
 import FilterLink from 'components/common/FilterLink';
 import FilterButtons from 'components/common/FilterButtons';
 import { urlFilter } from 'lib/filters';
-import { labels } from 'components/messages';
 import MetricsTable from './MetricsTable';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import useMessages from 'hooks/useMessages';
 
 const filters = {
   [FILTER_RAW]: null,
@@ -14,7 +13,7 @@ const filters = {
 
 export default function PagesTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const buttons = [
     {

components/metrics/PageviewsChart.js

@@ -1,11 +1,10 @@
+import { useMemo } from 'react';
 import { useVisible } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { colord } from 'colord';
 import BarChart from './BarChart';
-import useTheme from 'hooks/useTheme';
 import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import { labels } from 'components/messages';
-import { useMemo } from 'react';
+import useTheme from 'hooks/useTheme';
+import useMessages from 'hooks/useMessages';
 
 export default function PageviewsChart({
   websiteId,
@@ -17,7 +16,7 @@ export default function PageviewsChart({
   animationDuration = DEFAULT_ANIMATION_DURATION,
   ...props
 }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const [theme] = useTheme();
   const { ref, visible } = useVisible();
 

components/metrics/QueryParametersTable.js

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-import { useIntl } from 'react-intl';
 import { safeDecodeURI } from 'next-basics';
 import Tag from 'components/common/Tag';
 import FilterButtons from 'components/common/FilterButtons';
 import { paramFilter } from 'lib/filters';
 import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
-import { labels } from 'components/messages';
 import MetricsTable from './MetricsTable';
+import useMessages from 'hooks/useMessages';
 
 const filters = {
   [FILTER_RAW]: null,
@@ -15,7 +14,7 @@ const filters = {
 
 export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const buttons = [
     {

components/metrics/ReferrersTable.js

@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function ReferrersTable({ websiteId, ...props }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ w: link, x: referrer }) => {
     return referrer ? (

components/metrics/WebsiteChart.js

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { useIntl } from 'react-intl';
 import { Button, Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
@@ -16,9 +15,9 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
 import styles from './WebsiteChart.module.css';
-import useSticky from '../../hooks/useSticky';
+import useSticky from 'hooks/useSticky';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteChart({
   websiteId,
@@ -29,7 +28,7 @@ export default function WebsiteChart({
   showDetailsButton = false,
   onDataLoad = () => {},
 }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
   const [timezone] = useTimezone();

components/pages/dashboard/Dashboard.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -9,16 +8,16 @@ import DashboardSettingsButton from 'components/pages/dashboard/DashboardSetting
 import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
 import useDashboard from 'store/dashboard';
+import useMessages from 'hooks/useMessages';
 
 export default function Dashboard({ userId }) {
+  const { formatMessage, labels, messages } = useMessages();
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
-  const { formatMessage } = useIntl();
   const hasData = data && data.length !== 0;
 
   function handleMore() {

components/pages/dashboard/DashboardEdit.js

@@ -1,24 +1,18 @@
 import { useState, useMemo } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
 import { Button } from 'react-basics';
 import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
+import useMessages from 'hooks/useMessages';
 import styles from './DashboardEdit.module.css';
 
-const messages = defineMessages({
-  save: { id: 'label.save', defaultMessage: 'Save' },
-  reset: { id: 'label.reset', defaultMessage: 'Reset' },
-  cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
-});
-
 const dragId = 'dashboard-website-ordering';
 
 export default function DashboardEdit({ websites }) {
   const settings = useDashboard();
   const { websiteOrder } = settings;
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
 
   const ordered = useMemo(
@@ -58,13 +52,13 @@ export default function DashboardEdit({ websites }) {
     <>
       <div className={styles.buttons}>
         <Button onClick={handleSave} variant="action" size="small">
-          {formatMessage(messages.save)}
+          {formatMessage(labels.save)}
         </Button>
         <Button onClick={handleCancel} size="small">
-          {formatMessage(messages.cancel)}
+          {formatMessage(labels.cancel)}
         </Button>
         <Button onClick={handleReset} size="small">
-          {formatMessage(messages.reset)}
+          {formatMessage(labels.reset)}
         </Button>
       </div>
       <div className={styles.dragActive}>

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',
     },
   ];

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);
 

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();

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 (

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'));

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);

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);
 

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;
 

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);
 

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 = () => {

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);

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 (

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();
 

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 (
-    <Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error, formatMessage)}>
+    <Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
       <FormRow label={formatMessage(labels.accessCode)}>
         <FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />

components/pages/settings/teams/TeamAddForm.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 } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamAddForm({ onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
   const ref = useRef(null);

components/pages/settings/teams/TeamDeleteForm.js

@@ -1,10 +1,9 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { labels, messages } from 'components/messages';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
 

components/pages/settings/teams/TeamEditForm.js

@@ -8,16 +8,15 @@ import {
   Button,
   Flexbox,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
 import useApi from 'hooks/useApi';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 const generateId = () => getRandomChars(16);
 
 export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
   const ref = useRef(null);

components/pages/settings/teams/TeamMembers.js

@@ -1,13 +1,12 @@
-import { messages } from 'components/messages';
+import { Loading, useToast } from 'react-basics';
 import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
 import useApi from 'hooks/useApi';
-import { Loading, useToast } from 'react-basics';
-import { useIntl } from 'react-intl';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamMembers({ teamId, readOnly }) {
   const { toast, showToast } = useToast();
   const { get, useQuery } = useApi();
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
     get(`/teams/${teamId}/users`),
   );
@@ -18,7 +17,7 @@ export default function TeamMembers({ teamId, readOnly }) {
 
   const handleSave = async () => {
     await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    showToast({ message: formatMessage(labels.saved), variant: 'success' });
   };
 
   return (

components/pages/settings/teams/TeamMembersTable.js

@@ -11,14 +11,13 @@ import {
   Flexbox,
   Text,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { ROLES } from 'lib/constants';
-import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamMembersTable({ data = [], onSave, readOnly }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { del, useMutation } = useApi();
   const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`));

components/pages/settings/teams/TeamSettings.js

@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import { labels, messages } from 'components/messages';
 import { ROLES } from 'lib/constants';
 import useUser from 'hooks/useUser';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
 
 export default function TeamSettings({ teamId }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');

components/pages/settings/teams/TeamWebsites.js

@@ -1,7 +1,3 @@
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import { labels, messages } from 'components/messages';
-import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
-import useApi from 'hooks/useApi';
 import {
   ActionForm,
   Button,
@@ -13,12 +9,15 @@ import {
   Text,
   useToast,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
 import WebsiteAddTeamForm from 'components/pages/settings/teams/WebsiteAddTeamForm';
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamWebsites({ teamId }) {
   const { toast, showToast } = useToast();
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
     get(`/teams/${teamId}/websites`),

components/pages/settings/teams/TeamWebsitesTable.js

@@ -12,13 +12,12 @@ import {
   Icons,
   Flexbox,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
-import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamWebsitesTable({ data = [], onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { del, useMutation } = useApi();
   const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));

components/pages/settings/teams/TeamsList.js

@@ -1,18 +1,17 @@
 import { useState } from 'react';
 import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
-import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import TeamsTable from 'components/pages/settings/teams/TeamsTable';
 import Page from 'components/layout/Page';
-import { labels, messages } from 'components/messages';
 import Icons from 'components/icons';
 import TeamJoinForm from './JoinTeamForm';
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamsList() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const [update, setUpdate] = useState(0);
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));

components/pages/settings/teams/TeamsTable.js

@@ -1,6 +1,3 @@
-import { labels } from 'components/messages';
-import useUser from 'hooks/useUser';
-import { ROLES } from 'lib/constants';
 import Link from 'next/link';
 import {
   Button,
@@ -17,11 +14,13 @@ import {
   TableRow,
   Text,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import TeamDeleteForm from './TeamDeleteForm';
+import useMessages from 'hooks/useMessages';
+import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
 
 export default function TeamsTable({ data = [], onDelete }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
   const columns = [

components/pages/settings/teams/WebsiteAddTeamForm.js

@@ -1,12 +1,11 @@
-import { labels } from 'components/messages';
 import useApi from 'hooks/useApi';
 import { useRef, useState } from 'react';
 import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
-import { useIntl } from 'react-intl';
 import WebsiteTags from './WebsiteTags';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteAddTeamForm({ teamId, onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
   const { data: websites } = useQuery(['websites'], () => get('/websites'));

components/pages/settings/users/UserAddButton.js

@@ -1,10 +1,9 @@
-import { useIntl } from 'react-intl';
 import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
 import UserAddForm from './UserAddForm';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function UserAddButton({ onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const handleSave = () => {
     onSave();

components/pages/settings/users/UserAddForm.js

@@ -10,15 +10,14 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const handleSubmit = async data => {
     mutate(data, {

components/pages/settings/users/UserDeleteForm.js

@@ -1,11 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
-import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { labels, messages } from 'components/messages';
+import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 export default function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, FormattedMessage, labels, messages } = useMessages();
   const { del } = useApi();
   const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
 

components/pages/settings/users/UserEditForm.js

@@ -9,13 +9,12 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { ROLES } from 'lib/constants';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function UserEditForm({ userId, data, onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(({ username }) => post(`/users/${userId}`, { username }));
 

components/pages/settings/users/UserSettings.js

@@ -1,16 +1,15 @@
 import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 import Link from 'next/link';
 import UserEditForm from 'components/pages/settings/users//UserEditForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
 import UserWebsites from './UserWebsites';
+import useMessages from 'hooks/useMessages';
 
 export default function UserSettings({ userId }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const [edit, setEdit] = useState(false);
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');

components/pages/settings/users/UserWebsites.js

@@ -1,11 +1,10 @@
 import { Loading } from 'react-basics';
-import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
-import { messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function UserWebsites({ userId }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data, isLoading } = useQuery(['user:websites', userId], () =>
     get(`/users/${userId}/websites`),

components/pages/settings/users/UsersList.js

@@ -1,4 +1,4 @@
-import { useIntl } from 'react-intl';
+import { useToast } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -6,11 +6,10 @@ import UsersTable from './UsersTable';
 import UserAddButton from './UserAddButton';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
-import { useToast } from 'react-basics';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function UsersList() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {

components/pages/settings/users/UsersTable.js

@@ -13,16 +13,15 @@ import {
   ModalTrigger,
   Modal,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import useUser from 'hooks/useUser';
 import UserDeleteForm from './UserDeleteForm';
-import { labels } from 'components/messages';
 import { ROLES } from 'lib/constants';
+import useMessages from 'hooks/useMessages';
 
 export default function UsersTable({ data = [], onDelete }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
   const columns = [

components/pages/settings/websites/ShareUrl.js

@@ -8,16 +8,15 @@ import {
   Button,
   Toggle,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getRandomChars } from 'next-basics';
 import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 const generateId = () => getRandomChars(16);
 
 export default function ShareUrl({ websiteId, data, onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();

components/pages/settings/websites/TrackingCode.js

@@ -1,10 +1,9 @@
 import { TextArea } from 'react-basics';
 import { TRACKER_SCRIPT_URL } from 'lib/constants';
-import { messages } from 'components/messages';
-import { useIntl } from 'react-intl';
+import useMessages from 'hooks/useMessages';
 
 export default function TrackingCode({ websiteId }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, messages } = useMessages();
   const url = TRACKER_SCRIPT_URL.startsWith('http')
     ? TRACKER_SCRIPT_URL
     : `${location.origin}${TRACKER_SCRIPT_URL}`;

components/pages/settings/websites/WebsiteAddForm.js

@@ -7,17 +7,12 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import { defineMessages, useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
-import { labels } from 'components/messages';
-
-const messages = defineMessages({
-  invalidDomain: { id: 'label.invalid-domain', defaultMessage: 'Invalid domain' },
-});
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
 
@@ -42,7 +37,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
           name="domain"
           rules={{
             required: formatMessage(labels.required),
-            pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
+            pattern: { value: DOMAIN_REGEX, message: formatMessage(labels.invalidDomain) },
           }}
         >
           <TextField autoComplete="off" />

components/pages/settings/websites/WebsiteData.js

@@ -1,11 +1,10 @@
 import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
-import { useIntl } from 'react-intl';
 import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
 import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteData({ websiteId, onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
 
   const handleReset = async () => {
     onSave('reset');

components/pages/settings/websites/WebsiteDeleteForm.js

@@ -7,14 +7,13 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
-import { labels, messages } from 'components/messages';
 import useApi from 'hooks/useApi';
+import useMessages from 'hooks/useMessages';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
 

components/pages/settings/websites/WebsiteEditForm.js

@@ -1,12 +1,11 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useRef } from 'react';
-import { useIntl } from 'react-intl';
 import useApi from 'hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteEditForm({ websiteId, data, onSave }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
   const ref = useRef(null);

components/pages/settings/websites/WebsiteResetForm.js

@@ -8,13 +8,12 @@ import {
   TextField,
 } from 'react-basics';
 import useApi from 'hooks/useApi';
-import { useIntl } from 'react-intl';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 const CONFIRM_VALUE = 'RESET';
 
 export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
 

components/pages/settings/websites/WebsiteSettings.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
-import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
@@ -10,11 +9,11 @@ import WebsiteData from 'components/pages/settings/websites/WebsiteData';
 import TrackingCode from 'components/pages/settings/websites/TrackingCode';
 import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import useApi from 'hooks/useApi';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteSettings({ websiteId }) {
   const router = useRouter();
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels, messages } = useMessages();
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();

components/pages/settings/websites/WebsitesList.js

@@ -1,5 +1,4 @@
 import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
-import { useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -7,9 +6,10 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
 import useApi from 'hooks/useApi';
 import useUser from 'hooks/useUser';
-import { labels, messages } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsitesList() {
+  const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(
@@ -18,7 +18,6 @@ export default function WebsitesList() {
     { enabled: !!user },
   );
   const { toast, showToast } = useToast();
-  const { formatMessage } = useIntl();
   const hasData = data && data.length !== 0;
 
   const handleSave = async () => {

components/pages/settings/websites/WebsitesTable.js

@@ -12,11 +12,10 @@ import {
   Icons,
   Flexbox,
 } from 'react-basics';
-import { useIntl } from 'react-intl';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsitesTable({ data = [] }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },

components/pages/websites/WebsiteMenuView.js

@@ -1,5 +1,4 @@
 import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
-import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import { GridRow, GridColumn } from 'components/layout/Grid';
 import BrowsersTable from 'components/metrics/BrowsersTable';
@@ -14,8 +13,8 @@ import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
 import usePageQuery from 'hooks/usePageQuery';
 import Icons from 'components/icons';
-import { labels } from 'components/messages';
 import styles from './WebsiteMenuView.module.css';
+import useMessages from 'hooks/useMessages';
 
 const views = {
   url: PagesTable,
@@ -31,7 +30,7 @@ const views = {
 };
 
 export default function WebsiteMenuView({ websiteId, websiteDomain }) {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
   const {
     resolveUrl,
     query: { view },

hooks/useMessages.js

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

hooks/useSticky.js

@@ -1,15 +1,15 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function useSticky({ defaultSticky = false, enabled = true }) {
-  const [isSticky, setIsSticky] = useState(defaultSticky);
+export default function useSticky({ enabled = true, threshold = 1 }) {
+  const [isSticky, setIsSticky] = useState(false);
   const ref = useRef(null);
 
   useEffect(() => {
     let observer;
-    const handler = ([entry]) => setIsSticky(entry.intersectionRatio < 1);
+    const handler = ([entry]) => setIsSticky(entry.intersectionRatio < threshold);
 
     if (enabled && ref.current) {
-      observer = new IntersectionObserver(handler, { threshold: [1] });
+      observer = new IntersectionObserver(handler, { threshold: [threshold] });
       observer.observe(ref.current);
     }
     return () => {
@@ -17,7 +17,7 @@ export default function useSticky({ defaultSticky = false, enabled = true }) {
         observer.disconnect();
       }
     };
-  }, [ref]);
+  }, [ref, enabled, threshold]);
 
   return { ref, isSticky };
 }

pages/404.js

@@ -1,10 +1,9 @@
 import { Row, Column, Flexbox } from 'react-basics';
-import { useIntl } from 'react-intl';
 import AppLayout from 'components/layout/AppLayout';
-import { labels } from 'components/messages';
+import useMessages from 'hooks/useMessages';
 
 export default function Custom404() {
-  const { formatMessage } = useIntl();
+  const { formatMessage, labels } = useMessages();
 
   return (
     <AppLayout>

styles/index.css

@@ -15,7 +15,6 @@ body {
   flex: 1;
   color: var(--font-color100);
   background: var(--base50);
-  overflow: hidden;
 }
 
 *,
@@ -63,5 +62,4 @@ svg {
   flex: 1;
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }