From 921bde3ae4207fe42f308942279330f76b102f9b Mon Sep 17 00:00:00 2001 From: Minion Boss Date: Fri, 12 Nov 2021 21:41:33 +0100 Subject: [PATCH] perf(web/IntlProvider): faster messages mapping --- web/src/lib/intl/IntlProvider.tsx | 54 ++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/web/src/lib/intl/IntlProvider.tsx b/web/src/lib/intl/IntlProvider.tsx index 301179f..2856866 100644 --- a/web/src/lib/intl/IntlProvider.tsx +++ b/web/src/lib/intl/IntlProvider.tsx @@ -24,25 +24,41 @@ export const IntlProvider: React.FC = ({ }) => { const [locale, setLocale] = useState(() => retrieveLocale() || defaultLocale); - const mappedMessages = useMemo( - () => ({ - en: Object.keys(messages).reduce((acc, curr) => ({ ...acc, [curr]: messages[curr].en }), {}), - hr: Object.keys(messages).reduce((acc, curr) => { - const baMessage = messages[curr].hr; - if (!baMessage && locale === 'hr') { - // eslint-disable-next-line no-console - console.warn( - `intl: key "${curr}" does not have a "hr" message, using "en" message sa fallback`, - ); - } - return { - ...acc, - [curr]: baMessage ? baMessage : messages[curr].en, - }; - }, {}), - }), - [messages, locale], - ); + const mappedMessages = useMemo(() => { + const en: Record = {}; + for (const [key, value] of Object.entries(messages)) { + if (__DEV__ && !value.en) { + // eslint-disable-next-line no-console + console.warn(`intl: key "${key}" does not have an "en" message`); + } + if (__DEV__ && key in en) { + // eslint-disable-next-line no-console + console.warn( + `intl: key "${key}" already has an "en" message, replacing "${en[key]}" with "${value.en}"`, + ); + } + en[key] = value.en; + } + + const hr: Record = {}; + for (const [key, value] of Object.entries(messages)) { + if (__DEV__ && !value.hr) { + // eslint-disable-next-line no-console + console.warn( + `intl: key "${key}" does not have a "hr" message, using "en" message sa fallback`, + ); + } + if (__DEV__ && key in hr) { + // eslint-disable-next-line no-console + console.warn( + `intl: key "${key}" already has a "hr" message, replacing "${hr[key]}" with "${value.hr}"`, + ); + } + hr[key] = value.hr || messages[key].en; + } + + return { en, hr }; + }, []); const localeContextValue = useMemo( () => ({