diff --git a/package.json b/package.json index a982dcc1..553642ea 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-intersection-observer": "^9.4.1", + "react-intl": "^6.2.8", "react-markdown": "^8.0.4", "react-query": "^3.39.2", "react-redux": "^8.0.5", diff --git a/src/IntlProvider.tsx b/src/IntlProvider.tsx new file mode 100644 index 00000000..849c3ec8 --- /dev/null +++ b/src/IntlProvider.tsx @@ -0,0 +1,45 @@ +import { type ReactNode } from 'react' +import { IntlProvider as ReactIntlProvider } from 'react-intl' + +const DEFAULT_LOCALE = 'en-US' +const enMessages = { + hello: 'hello', +} + +const esMessages = { + hello: 'hola', +} + +const getMessages = (locale: string) => { + const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0] + + switch (truncatedLocale) { + case 'en': + return enMessages + case 'es': + return esMessages + default: + return enMessages + } +} + +export const IntlProvider = ({ children }: { children: ReactNode }) => { + const getLocale = () => { + if (typeof navigator === 'undefined') { + return DEFAULT_LOCALE + } + + return ( + (navigator.languages && navigator.languages[0]) || + navigator.language || + DEFAULT_LOCALE + ) + } + const locale = getLocale() + + return ( + + {children} + + ) +} diff --git a/src/index.tsx b/src/index.tsx index 64a9bb73..f68e3996 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,6 +26,7 @@ import HashTagsPage from "Pages/HashTagsPage"; import SearchPage from "Pages/SearchPage"; import HelpPage from "Pages/HelpPage"; import { NewUserRoutes } from "Pages/new"; +import { IntlProvider } from "./IntlProvider"; /** * HTTP query provider @@ -102,7 +103,9 @@ root.render( - + + + diff --git a/yarn.lock b/yarn.lock index ed0e81ad..f904f744 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1203,6 +1203,76 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@formatjs/ecma402-abstract@1.14.3": + version "1.14.3" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738" + integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg== + dependencies: + "@formatjs/intl-localematcher" "0.2.32" + tslib "^2.4.0" + +"@formatjs/fast-memoize@1.2.8": + version "1.2.8" + resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.8.tgz#425a69f783005f69e11f9e38a7f87f8822d330c6" + integrity sha512-PemNUObyoIZcqdQ1ixTPugzAzhEj7j6AHIyrq/qR6x5BFTvOQeXHYsVZUqBEFduAIscUaDfou+U+xTqOiunJ3Q== + dependencies: + tslib "^2.4.0" + +"@formatjs/icu-messageformat-parser@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.2.0.tgz#9221f7f4dbaf634a84e459a49017a872e708dcfa" + integrity sha512-NT/jKI9nvqNIsosTm+Cxv3BHutB1RIDFa4rAa2b664Od4sBnXtK7afXvAqNa3XDFxljKTij9Cp+kRMJbXozUww== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/icu-skeleton-parser" "1.3.18" + tslib "^2.4.0" + +"@formatjs/icu-skeleton-parser@1.3.18": + version "1.3.18" + resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb" + integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + tslib "^2.4.0" + +"@formatjs/intl-displaynames@6.2.4": + version "6.2.4" + resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.2.4.tgz#e2cc5f5828074f3263e44247491f2698fa4c22dd" + integrity sha512-CmTbSjnmAZHNGuA9vBkWoDHvrcrRauDb0OWc6nk2dAPtesQdadr49Q9N18fr8IV7n3rblgKiYaFVjg68UkRxNg== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/intl-localematcher" "0.2.32" + tslib "^2.4.0" + +"@formatjs/intl-listformat@7.1.7": + version "7.1.7" + resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.1.7.tgz#b46fec1038ef9ca062d1e7b9b3412c2a14dca18f" + integrity sha512-Zzf5ruPpfJnrAA2hGgf/6pMgQ3tx9oJVhpqycFDavHl3eEzrwdHddGqGdSNwhd0bB4NAFttZNQdmKDldc5iDZw== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/intl-localematcher" "0.2.32" + tslib "^2.4.0" + +"@formatjs/intl-localematcher@0.2.32": + version "0.2.32" + resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1" + integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ== + dependencies: + tslib "^2.4.0" + +"@formatjs/intl@2.6.5": + version "2.6.5" + resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.6.5.tgz#349dc624a06978b143135201dcf63d40ba3cd816" + integrity sha512-kNH221hsdbTAMdsF6JAxSFV4N/9p5azXZvCLQBxl10Q4D2caPODLtne98gRhinIJ8Hv3djBabPdJG32OQaHuMA== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/fast-memoize" "1.2.8" + "@formatjs/icu-messageformat-parser" "2.2.0" + "@formatjs/intl-displaynames" "6.2.4" + "@formatjs/intl-listformat" "7.1.7" + intl-messageformat "10.3.0" + tslib "^2.4.0" + "@fortawesome/fontawesome-common-types@6.2.1": version "6.2.1" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073" @@ -2077,7 +2147,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.26": +"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18.0.26": version "18.0.27" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71" integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA== @@ -5188,6 +5258,16 @@ internal-slot@^1.0.3, internal-slot@^1.0.4: has "^1.0.3" side-channel "^1.0.4" +intl-messageformat@10.3.0: + version "10.3.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.3.0.tgz#6a3a30882bf94dfa7014cc642c66abdafd942c0e" + integrity sha512-FKeBZKH9T2Ue4RUXCuwY/hEaRHU8cgICevlGKog0qSBuz/amtRKNBLetBLmRxiHeEkF7JBBckC+56GIwshlRwA== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/fast-memoize" "1.2.8" + "@formatjs/icu-messageformat-parser" "2.2.0" + tslib "^2.4.0" + ipaddr.js@1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3" @@ -7968,6 +8048,22 @@ react-intersection-observer@^9.4.1: resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.4.1.tgz#4ccb21e16acd0b9cf5b28d275af7055bef878f6b" integrity sha512-IXpIsPe6BleFOEHKzKh5UjwRUaz/JYS0lT/HPsupWEQou2hDqjhLMStc5zyE3eQVT4Fk3FufM8Fw33qW1uyeiw== +react-intl@^6.2.8: + version "6.2.8" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.2.8.tgz#f61fffc14e69490607d3be9253704ac5afc49d56" + integrity sha512-Njzmbmk58rBx6i0bGQbBLYj+KbR9IXbFfbK2u0AFayjDx+VJW30MdJV6aNL9EiPaXfcOcAYm31R777e/UHWeEw== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/icu-messageformat-parser" "2.2.0" + "@formatjs/intl" "2.6.5" + "@formatjs/intl-displaynames" "6.2.4" + "@formatjs/intl-listformat" "7.1.7" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/react" "16 || 17 || 18" + hoist-non-react-statics "^3.3.2" + intl-messageformat "10.3.0" + tslib "^2.4.0" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -9181,6 +9277,11 @@ tslib@^2.0.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA== +tslib@^2.4.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" + integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"