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

@ -138,6 +138,7 @@
"@types/node": "^22.10.5",
"@types/react": "^19.0.4",
"@types/react-dom": "^19.0.2",
"@types/react-intl": "^3.0.0",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^6.7.3",
"@typescript-eslint/parser": "^6.7.3",

View file

@ -19,13 +19,8 @@ const customResolver = resolve({
const aliasConfig = {
entries: [
{ find: /^app/, replacement: path.resolve('./src/app') },
{ find: /^components/, replacement: path.resolve('./src/components') },
{ find: /^hooks/, replacement: path.resolve('./src/hooks') },
{ find: /^lib/, replacement: path.resolve('./src/lib') },
{ find: /^store/, replacement: path.resolve('./src/store') },
{ find: /^@/, replacement: path.resolve('./src/') },
{ find: /^public/, replacement: path.resolve('./public') },
{ find: /^assets/, replacement: path.resolve('./src/assets') },
],
customResolver,
};

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,10 +70,7 @@ 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={{
return formatMessage(messages.eventLog, {
event: <b>{eventName || formatMessage(labels.unknown)}</b>,
url: (
<a
@ -85,9 +82,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
{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={{
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;

View file

@ -24,9 +24,7 @@
"types": ["jest"],
"typeRoots": ["node_modules/@types"],
"paths": {
"@/*": [
"./src/*"
]
"@/*": ["./src/*"]
},
"plugins": [
{

View file

@ -1796,6 +1796,16 @@
"@formatjs/intl-localematcher" "0.5.8"
tslib "2"
"@formatjs/ecma402-abstract@2.3.2":
version "2.3.2"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.2.tgz#0ee291effe7ee2c340742a6c95d92eacb5e6c00a"
integrity sha512-6sE5nyvDloULiyOMbOTJEEgWL32w+VHkZQs8S02Lnn8Y/O5aQhjOEXwWzvR7SsBE/exxlSpY2EsWZgqHbtLatg==
dependencies:
"@formatjs/fast-memoize" "2.2.6"
"@formatjs/intl-localematcher" "0.5.10"
decimal.js "10"
tslib "2"
"@formatjs/fast-memoize@2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.3.tgz#74e64109279d5244f9fc281f3ae90c407cece823"
@ -1803,6 +1813,13 @@
dependencies:
tslib "2"
"@formatjs/fast-memoize@2.2.6":
version "2.2.6"
resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.6.tgz#fac0a84207a1396be1f1aa4ee2805b179e9343d1"
integrity sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==
dependencies:
tslib "2"
"@formatjs/icu-messageformat-parser@2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz#a54293dd7f098d6a6f6a084ab08b6d54a3e8c12d"
@ -1812,6 +1829,15 @@
"@formatjs/icu-skeleton-parser" "1.3.6"
tslib "^2.1.0"
"@formatjs/icu-messageformat-parser@2.11.0":
version "2.11.0"
resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.0.tgz#28d22a735114b7309c0d3e43d39f2660917867c8"
integrity sha512-Hp81uTjjdTk3FLh/dggU5NK7EIsVWc5/ZDWrIldmf2rBuPejuZ13CZ/wpVE2SToyi4EiroPTQ1XJcJuZFIxTtw==
dependencies:
"@formatjs/ecma402-abstract" "2.3.2"
"@formatjs/icu-skeleton-parser" "1.8.12"
tslib "2"
"@formatjs/icu-messageformat-parser@2.9.4":
version "2.9.4"
resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.4.tgz#52501fbdc122a86097644f03ae1117b9ced00872"
@ -1829,6 +1855,14 @@
"@formatjs/ecma402-abstract" "1.11.4"
tslib "^2.1.0"
"@formatjs/icu-skeleton-parser@1.8.12":
version "1.8.12"
resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.12.tgz#43076747cdbe0f23bfac2b2a956bd8219716680d"
integrity sha512-QRAY2jC1BomFQHYDMcZtClqHR55EEnB96V7Xbk/UiBodsuFc5kujybzt87+qj1KqmJozFhk6n4KiT1HKwAkcfg==
dependencies:
"@formatjs/ecma402-abstract" "2.3.2"
tslib "2"
"@formatjs/icu-skeleton-parser@1.8.8":
version "1.8.8"
resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.8.tgz#a16eff7fd040acf096fb1853c99527181d38cf90"
@ -1862,6 +1896,13 @@
dependencies:
tslib "^2.1.0"
"@formatjs/intl-localematcher@0.5.10":
version "0.5.10"
resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz#1e0bd3fc1332c1fe4540cfa28f07e9227b659a58"
integrity sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==
dependencies:
tslib "2"
"@formatjs/intl-localematcher@0.5.8":
version "0.5.8"
resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.8.tgz#b11bbd04bd3551f7cadcb1ef1e231822d0e3c97e"
@ -1890,6 +1931,17 @@
intl-messageformat "10.7.7"
tslib "2"
"@formatjs/intl@3.1.3":
version "3.1.3"
resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-3.1.3.tgz#457dba081679a5e899c900624331608742df138e"
integrity sha512-yWtB1L4vOr17MLII3bcNRmjx6qBkSupJuA6nJz1zVxpWbJXKQL5vgvjRCehTO3z7HolxFjtLdfV0/RN+bC34Fg==
dependencies:
"@formatjs/ecma402-abstract" "2.3.2"
"@formatjs/fast-memoize" "2.2.6"
"@formatjs/icu-messageformat-parser" "2.11.0"
intl-messageformat "10.7.14"
tslib "2"
"@formatjs/ts-transformer@3.9.4":
version "3.9.4"
resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.9.4.tgz#14b43628d082cb8cd8bc15c4893197b59903ec2c"
@ -3034,6 +3086,13 @@
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.2.tgz#ad21f9a1ee881817995fd3f7fd33659c87e7b1b7"
integrity sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==
"@types/react-intl@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-3.0.0.tgz#a2cce0024b6cfe403be28ccf67f49d720fa810ec"
integrity sha512-k8F3d05XQGEqSWIfK97bBjZe4z9RruXU9Wa7OZ2iUC5pdeIpzuQDZe/9C2J3Xir5//ZtAkhcv08Wfx3n5TBTQg==
dependencies:
react-intl "*"
"@types/react-window@^1.8.8":
version "1.8.8"
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.8.tgz#c20645414d142364fbe735818e1c1e0a145696e3"
@ -3056,6 +3115,13 @@
"@types/prop-types" "*"
csstype "^3.0.2"
"@types/react@16 || 17 || 18 || 19":
version "19.0.8"
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.8.tgz#7098e6159f2a61e4f4cef2c1223c044a9bec590e"
integrity sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==
dependencies:
csstype "^3.0.2"
"@types/resolve@1.20.2":
version "1.20.2"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
@ -4855,6 +4921,11 @@ decamelize@^5.0.0:
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9"
integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==
decimal.js@10:
version "10.5.0"
resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.5.0.tgz#0f371c7cf6c4898ce0afb09836db73cd82010f22"
integrity sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==
dedent@^1.0.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.1.tgz#4f3fc94c8b711e9bb2800d185cd6ad20f2a90aff"
@ -6493,6 +6564,16 @@ intl-messageformat-parser@^5.3.7:
dependencies:
"@formatjs/intl-numberformat" "^5.5.2"
intl-messageformat@10.7.14:
version "10.7.14"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.7.14.tgz#ddcbbfdb1682afe56da094f21a4ac74fc3c91552"
integrity sha512-mMGnE4E1otdEutV5vLUdCxRJygHB5ozUBxsPB5qhitewssrS/qGruq9bmvIRkkGsNeK5ZWLfYRld18UHGTIifQ==
dependencies:
"@formatjs/ecma402-abstract" "2.3.2"
"@formatjs/fast-memoize" "2.2.6"
"@formatjs/icu-messageformat-parser" "2.11.0"
tslib "2"
intl-messageformat@10.7.7:
version "10.7.7"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.7.7.tgz#42085e1664729d02240a03346e31a2540b1112a0"
@ -9244,6 +9325,20 @@ react-hook-form@^7.34.2:
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.47.0.tgz#a42f07266bd297ddf1f914f08f4b5f9783262f31"
integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==
react-intl@*:
version "7.1.5"
resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-7.1.5.tgz#086c1b7cfb00ab7c9f62241162aca86520a5dc4c"
integrity sha512-cVvsVdaOnZ85XBXU0Lc2PVGNhGlzl4UBV+aWAGe/zrV5Xr+CEW7izUsAp/fIuwvCsJl9R+aokppm+P7cdhnpUA==
dependencies:
"@formatjs/ecma402-abstract" "2.3.2"
"@formatjs/icu-messageformat-parser" "2.11.0"
"@formatjs/intl" "3.1.3"
"@types/hoist-non-react-statics" "3"
"@types/react" "16 || 17 || 18 || 19"
hoist-non-react-statics "3"
intl-messageformat "10.7.14"
tslib "2"
react-intl@^6.5.5:
version "6.8.9"
resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.8.9.tgz#ef36b2a19a0eb97afbeaeab9679273fcbf2ea261"