Removed FormattedMessage usage.

src/app/(main)/reports/ReportDeleteButton.tsx

@@ -11,7 +11,7 @@ export function ReportDeleteButton({
   reportName: string;
   onDelete?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, isPending, error } = useMutation({
     mutationFn: reportId => del(`/reports/${reportId}`),
@@ -39,12 +39,7 @@ export function ReportDeleteButton({
       <Modal title={formatMessage(labels.deleteReport)}>
         {(close: () => void) => (
           <ConfirmationForm
-            message={
-              <FormattedMessage
-                {...messages.confirmDelete}
-                values={{ target: <b>{reportName}</b> }}
-              />
-            }
+            message={formatMessage(messages.confirmDelete, { target: <b>{reportName}</b> })}
             isLoading={isPending}
             error={error}
             onConfirm={handleConfirm.bind(null, close)}

src/app/(main)/settings/teams/TeamLeaveForm.tsx

@@ -14,7 +14,7 @@ export function TeamLeaveForm({
   onSave: () => void;
   onClose: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
     mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
@@ -34,9 +34,7 @@ export function TeamLeaveForm({
   return (
     <ConfirmationForm
       buttonLabel={formatMessage(labels.leave)}
-      message={
-        <FormattedMessage {...messages.confirmLeave} values={{ target: <b>{teamName}</b> }} />
-      }
+      message={formatMessage(messages.confirmLeave, { target: <b>{teamName}</b> })}
       onConfirm={handleConfirm}
       onClose={onClose}
       isLoading={isPending}

src/app/(main)/settings/users/UserDeleteForm.tsx

@@ -2,7 +2,7 @@ import { useApi, useMessages, useModified } from '@/components/hooks';
 import ConfirmationForm from '@/components/common/ConfirmationForm';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
-  const { FormattedMessage, messages, labels, formatMessage } = useMessages();
+  const { messages, labels, formatMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
   const { touch } = useModified();
@@ -19,9 +19,7 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
 
   return (
     <ConfirmationForm
-      message={
-        <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
-      }
+      message={formatMessage(messages.confirmDelete, { target: <b>{username}</b> })}
       onConfirm={handleConfirm}
       onClose={onClose}
       buttonLabel={formatMessage(labels.delete)}

src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx

@@ -2,7 +2,6 @@ import ConfirmationForm from '@/components/common/ConfirmationForm';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { messages } from '@/components/messages';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import { FormattedMessage } from 'react-intl';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -44,12 +43,7 @@ export function TeamMemberRemoveButton({
       <Modal title={formatMessage(labels.removeMember)}>
         {(close: () => void) => (
           <ConfirmationForm
-            message={
-              <FormattedMessage
-                {...messages.confirmRemove}
-                values={{ target: <b>{userName}</b> }}
-              />
-            }
+            message={formatMessage(messages.confirmRemove, { target: <b>{userName}</b> })}
             isLoading={isPending}
             error={error}
             onConfirm={handleConfirm.bind(null, close)}

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -26,7 +26,7 @@ const icons = {
 export function RealtimeLog({ data }: { data: RealtimeData }) {
   const website = useContext(WebsiteContext);
   const [search, setSearch] = useState('');
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const { formatValue } = useFormat();
   const { locale } = useLocale();
   const { formatTimezoneDate } = useTimezone();
@@ -70,24 +70,19 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     const { __type, eventName, urlPath: url, browser, os, country, device } = log;
 
     if (__type === TYPE_EVENT) {
-      return (
-        <FormattedMessage
-          {...messages.eventLog}
-          values={{
-            event: <b>{eventName || formatMessage(labels.unknown)}</b>,
-            url: (
-              <a
-                href={`//${website?.domain}${url}`}
-                className={styles.link}
-                target="_blank"
-                rel="noreferrer noopener"
-              >
-                {url}
-              </a>
-            ),
-          }}
-        />
-      );
+      return formatMessage(messages.eventLog, {
+        event: <b>{eventName || formatMessage(labels.unknown)}</b>,
+        url: (
+          <a
+            href={`//${website?.domain}${url}`}
+            className={styles.link}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {url}
+          </a>
+        ),
+      });
     }
 
     if (__type === TYPE_PAGEVIEW) {
@@ -104,17 +99,12 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     }
 
     if (__type === TYPE_SESSION) {
-      return (
-        <FormattedMessage
-          {...messages.visitorLog}
-          values={{
-            country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
-            browser: <b>{BROWSERS[browser]}</b>,
-            os: <b>{OS_NAMES[os] || os}</b>,
-            device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
-          }}
-        />
-      );
+      return formatMessage(messages.visitorLog, {
+        country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
+        browser: <b>{BROWSERS[browser]}</b>,
+        os: <b>{OS_NAMES[os] || os}</b>,
+        device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
+      });
     }
   };
 

src/components/common/TypeConfirmationForm.tsx

@@ -26,7 +26,7 @@ export function TypeConfirmationForm({
   onConfirm?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
 
   if (!confirmationValue) {
     return null;
@@ -35,10 +35,7 @@ export function TypeConfirmationForm({
   return (
     <Form onSubmit={onConfirm} error={error}>
       <p>
-        <FormattedMessage
-          {...messages.actionConfirmation}
-          values={{ confirmation: <b>{confirmationValue}</b> }}
-        />
+        {formatMessage(messages.actionConfirmation, { confirmation: <b>{confirmationValue}</b> })}
       </p>
       <FormRow label={formatMessage(labels.confirm)}>
         <FormInput name="confirm" rules={{ validate: value => value === confirmationValue }}>

src/components/hooks/queries/useRealtime.ts

@@ -1,4 +1,4 @@
-import { useTimezone } from '@/components/hooks';
+import { useTimezone } from '@/components/hooks/useTimezone';
 import { REALTIME_INTERVAL } from '@/lib/constants';
 import { RealtimeData } from '@/lib/types';
 import { useApi } from '../useApi';

src/components/hooks/queries/useWebsiteValues.ts

@@ -1,5 +1,6 @@
 import { useApi } from '../useApi';
-import { useCountryNames, useRegionNames } from '@/components/hooks';
+import { useCountryNames } from '@/components/hooks/useCountryNames';
+import { useRegionNames } from '@/components/hooks/useRegionNames';
 import useLocale from '../useLocale';
 
 export function useWebsiteValues({

src/components/hooks/useMessages.ts

@@ -1,4 +1,4 @@
-import { useIntl, FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { messages, labels } from '@/components/messages';
 
 export function useMessages(): any {
@@ -21,7 +21,7 @@ export function useMessages(): any {
     return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
   };
 
-  return { formatMessage, FormattedMessage, messages, labels, getMessage };
+  return { formatMessage, messages, labels, getMessage };
 }
 
 export default useMessages;