From f242835fc24e0b0736dfd31bce149c8a7d824871 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 7 Feb 2025 10:40:30 -0800 Subject: [PATCH] Removed FormattedMessage usage. --- package.json | 1 + rollup.components.config.mjs | 7 +- src/app/(main)/reports/ReportDeleteButton.tsx | 9 +- .../(main)/settings/teams/TeamLeaveForm.tsx | 6 +- .../(main)/settings/users/UserDeleteForm.tsx | 6 +- .../members/TeamMemberRemoveButton.tsx | 8 +- .../[websiteId]/realtime/RealtimeLog.tsx | 50 ++++------ .../common/TypeConfirmationForm.tsx | 7 +- src/components/hooks/queries/useRealtime.ts | 2 +- .../hooks/queries/useWebsiteValues.ts | 3 +- src/components/hooks/useMessages.ts | 4 +- tsconfig.json | 4 +- yarn.lock | 95 +++++++++++++++++++ 13 files changed, 132 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index cc1f591b..5a3546ee 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/rollup.components.config.mjs b/rollup.components.config.mjs index 9be07390..afeaf83c 100644 --- a/rollup.components.config.mjs +++ b/rollup.components.config.mjs @@ -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, }; diff --git a/src/app/(main)/reports/ReportDeleteButton.tsx b/src/app/(main)/reports/ReportDeleteButton.tsx index 504f4ee3..efd1da3c 100644 --- a/src/app/(main)/reports/ReportDeleteButton.tsx +++ b/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({ {(close: () => void) => ( {reportName} }} - /> - } + message={formatMessage(messages.confirmDelete, { target: {reportName} })} isLoading={isPending} error={error} onConfirm={handleConfirm.bind(null, close)} diff --git a/src/app/(main)/settings/teams/TeamLeaveForm.tsx b/src/app/(main)/settings/teams/TeamLeaveForm.tsx index 9951aa93..daf46434 100644 --- a/src/app/(main)/settings/teams/TeamLeaveForm.tsx +++ b/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 ( {teamName} }} /> - } + message={formatMessage(messages.confirmLeave, { target: {teamName} })} onConfirm={handleConfirm} onClose={onClose} isLoading={isPending} diff --git a/src/app/(main)/settings/users/UserDeleteForm.tsx b/src/app/(main)/settings/users/UserDeleteForm.tsx index 68a3e85e..3ac7c118 100644 --- a/src/app/(main)/settings/users/UserDeleteForm.tsx +++ b/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 ( {username} }} /> - } + message={formatMessage(messages.confirmDelete, { target: {username} })} onConfirm={handleConfirm} onClose={onClose} buttonLabel={formatMessage(labels.delete)} diff --git a/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx b/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx index 7344f263..931390c7 100644 --- a/src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx +++ b/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({ {(close: () => void) => ( {userName} }} - /> - } + message={formatMessage(messages.confirmRemove, { target: {userName} })} isLoading={isPending} error={error} onConfirm={handleConfirm.bind(null, close)} diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx index 1f56983d..21da2c54 100644 --- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx +++ b/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 ( - {eventName || formatMessage(labels.unknown)}, - url: ( - - {url} - - ), - }} - /> - ); + return formatMessage(messages.eventLog, { + event: {eventName || formatMessage(labels.unknown)}, + url: ( + + {url} + + ), + }); } if (__type === TYPE_PAGEVIEW) { @@ -104,17 +99,12 @@ export function RealtimeLog({ data }: { data: RealtimeData }) { } if (__type === TYPE_SESSION) { - return ( - {countryNames[country] || formatMessage(labels.unknown)}, - browser: {BROWSERS[browser]}, - os: {OS_NAMES[os] || os}, - device: {formatMessage(labels[device] || labels.unknown)}, - }} - /> - ); + return formatMessage(messages.visitorLog, { + country: {countryNames[country] || formatMessage(labels.unknown)}, + browser: {BROWSERS[browser]}, + os: {OS_NAMES[os] || os}, + device: {formatMessage(labels[device] || labels.unknown)}, + }); } }; diff --git a/src/components/common/TypeConfirmationForm.tsx b/src/components/common/TypeConfirmationForm.tsx index ca911e17..baf5949f 100644 --- a/src/components/common/TypeConfirmationForm.tsx +++ 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 (

- {confirmationValue} }} - /> + {formatMessage(messages.actionConfirmation, { confirmation: {confirmationValue} })}

value === confirmationValue }}> diff --git a/src/components/hooks/queries/useRealtime.ts b/src/components/hooks/queries/useRealtime.ts index c81ae90a..670b23be 100644 --- a/src/components/hooks/queries/useRealtime.ts +++ b/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'; diff --git a/src/components/hooks/queries/useWebsiteValues.ts b/src/components/hooks/queries/useWebsiteValues.ts index 845954aa..77f65fe5 100644 --- a/src/components/hooks/queries/useWebsiteValues.ts +++ b/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({ diff --git a/src/components/hooks/useMessages.ts b/src/components/hooks/useMessages.ts index da370348..fc73494f 100644 --- a/src/components/hooks/useMessages.ts +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index 4b8e0e0f..efe4861d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,9 +24,7 @@ "types": ["jest"], "typeRoots": ["node_modules/@types"], "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] }, "plugins": [ { diff --git a/yarn.lock b/yarn.lock index 32b7d338..2c6eb5f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"