Use useMessages hook everywhere.

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 } },