Removed FormattedMessage usage.

This commit is contained in:
Mike Cao 2025-02-07 10:40:30 -08:00
parent 84193a4ec5
commit f242835fc2
13 changed files with 132 additions and 70 deletions

View file

@ -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)}

View file

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

View file

@ -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)}

View file

@ -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)}

View file

@ -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>,
});
}
};

View file

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

View file

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

View file

@ -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({

View file

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