From f500cbb17cb0954ea9fb138ca2a84b0ae789e363 Mon Sep 17 00:00:00 2001 From: PolariTOON <36267812+PolariTOON@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:50:35 +0100 Subject: [PATCH 1/3] feat: Update `date-fns` to 2.29.3 BREAKING CHANGE: This change expectations on arguments passed to the `f` function returned by the `useI18n` hook. The first one now should be a `Date` object instead of a string and the second one now needs to conform to Unicode Technical Report 35. --- package.json | 2 +- react/BarContextProvider/index.spec.jsx | 2 +- react/DateMonthPicker/index.jsx | 4 ++-- react/FilePicker/FilePickerBodyItem.jsx | 2 +- react/I18n/format.jsx | 6 +++--- react/I18n/format.spec.jsx | 2 +- react/I18n/index.spec.jsx | 2 +- react/Viewer/helpers.js | 4 ++-- yarn.lock | 4 ++-- 9 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 386c612e61..c4e6f39136 100644 --- a/package.json +++ b/package.json @@ -160,7 +160,7 @@ "chart.js": "3.7.1", "classnames": "^2.2.5", "cozy-interapp": "^0.5.4", - "date-fns": "^1.28.5", + "date-fns": "^2.29.3", "filesize": "8.0.7", "hammerjs": "^2.0.8", "intersection-observer": "0.11.0", diff --git a/react/BarContextProvider/index.spec.jsx b/react/BarContextProvider/index.spec.jsx index 82517d1694..e390a90093 100644 --- a/react/BarContextProvider/index.spec.jsx +++ b/react/BarContextProvider/index.spec.jsx @@ -22,7 +22,7 @@ const DumbHelloWorld = translate()(({ t, f, lang }) => (
{t('helloworld')}
- {f('2020-01-06', 'DDD MMM')} + {f(new Date('2020-01-06'), 'd MMM')}
{lang}
diff --git a/react/DateMonthPicker/index.jsx b/react/DateMonthPicker/index.jsx index d25166d887..524db769b5 100644 --- a/react/DateMonthPicker/index.jsx +++ b/react/DateMonthPicker/index.jsx @@ -51,7 +51,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => { const handleClickMonth = month => { const d = new Date(year, month, 1) - onSelect(format(d, 'YYYY-MM-DD')) + onSelect(format(d, 'yyyy-MM-dd')) } return (
@@ -94,7 +94,7 @@ const dateMonthProp = function(props, propName, componentName) { '` supplied to' + ' `' + componentName + - '`. Should be in the form YYYY-MM.' + '`. Should be in the form yyyy-MM.' ) } } diff --git a/react/FilePicker/FilePickerBodyItem.jsx b/react/FilePicker/FilePickerBodyItem.jsx index 08c6d511c9..826f18049b 100644 --- a/react/FilePicker/FilePickerBodyItem.jsx +++ b/react/FilePicker/FilePickerBodyItem.jsx @@ -56,7 +56,7 @@ const FilePickerBodyItem = ({ const Input = multiple ? Checkbox : Radio const listItemSecondaryContent = isFile(item) - ? `${f(item.updated_at, 'DD MMM YYYY')} - ${filesize(item.size, { + ? `${f(item.updated_at, 'dd MMM yyyy')} - ${filesize(item.size, { base: 10 })}` : null diff --git a/react/I18n/format.jsx b/react/I18n/format.jsx index 6aafba1ad2..ac67179478 100644 --- a/react/I18n/format.jsx +++ b/react/I18n/format.jsx @@ -1,7 +1,7 @@ import format from 'date-fns/format' import { DEFAULT_LANG } from '.' -import formatDistanceToNow from 'date-fns/distance_in_words_to_now' -import formatDistanceStrict from 'date-fns/distance_in_words_strict' +import formatDistanceToNow from 'date-fns/formatDistanceToNow' +import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict' const locales = {} let lang = DEFAULT_LANG @@ -39,4 +39,4 @@ export const formatLocallyDistanceToNow = date => formatDistanceToNow(date, { locale: locales[lang] }) export const formatLocallyDistanceToNowStrict = date => - formatDistanceStrict(Date.now(), date, { locale: locales[lang] }) + formatDistanceToNowStrict(date, { locale: locales[lang] }) diff --git a/react/I18n/format.spec.jsx b/react/I18n/format.spec.jsx index dae8b9f31d..45c075cc28 100644 --- a/react/I18n/format.spec.jsx +++ b/react/I18n/format.spec.jsx @@ -64,7 +64,7 @@ describe('formatLocallyDistanceToNowStrict', () => { const result = formatLocallyDistanceToNowStrict(date) - expect(result).toEqual('44 minutes') + expect(result).toEqual('45 minutes') }) it('should formatDistanceToNowStrict with high value', () => { diff --git a/react/I18n/index.spec.jsx b/react/I18n/index.spec.jsx index 4a2a7d2bbf..37d3793306 100644 --- a/react/I18n/index.spec.jsx +++ b/react/I18n/index.spec.jsx @@ -9,7 +9,7 @@ const DumbI18nHelloWorld = ({ t, f, lang }) => (
{t('helloworld')}
- {f('2020-01-06', 'DDD MMM')} + {f(new Date('2020-01-06'), 'd MMM')}
{lang}
diff --git a/react/Viewer/helpers.js b/react/Viewer/helpers.js index 5257d93dd1..5dc0b68140 100644 --- a/react/Viewer/helpers.js +++ b/react/Viewer/helpers.js @@ -131,9 +131,9 @@ export const formatMetadataQualification = metadata => { export const formatDate = ({ f, lang, date }) => { if (lang === 'en') { - return f(date, 'MM/DD/YYYY') + return f(new Date(date), 'MM/dd/yyyy') } - return f(date, 'DD/MM/YYYY') + return f(new Date(date), 'dd/MM/yyyy') } /** diff --git a/yarn.lock b/yarn.lock index 0edaf527b7..1307a08049 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6460,12 +6460,12 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" -date-fns@2.29.3: +date-fns@2.29.3, date-fns@^2.29.3: version "2.29.3" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== -date-fns@^1.28.5, date-fns@^1.30.1: +date-fns@^1.30.1: version "1.30.1" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== From 959617debe296ff9d83091bb4fa1c39e380c425f Mon Sep 17 00:00:00 2001 From: PolariTOON <36267812+PolariTOON@users.noreply.github.com> Date: Thu, 8 Dec 2022 16:41:01 +0100 Subject: [PATCH 2/3] fix: Resolve `en` locale as `en-US` `date-fns` does not export any `en` folder anymore, but apps still rely on it via the `I18n` component. We allow them to use either `en` or `en-US` as a locale identifier. This should help consuming libs and apps to migrate. --- react/I18n/format.jsx | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/react/I18n/format.jsx b/react/I18n/format.jsx index ac67179478..49190da1d6 100644 --- a/react/I18n/format.jsx +++ b/react/I18n/format.jsx @@ -4,26 +4,31 @@ import formatDistanceToNow from 'date-fns/formatDistanceToNow' import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict' const locales = {} -let lang = DEFAULT_LANG +let lang = DEFAULT_LANG === 'en' ? 'en-US' : DEFAULT_LANG const getWarningMessage = lang => `The "${lang}" locale isn't supported by date-fns. or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.` export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => { - lang = userLang + const resolvedDefaultLang = defaultLang === 'en' ? 'en-US' : defaultLang + const resolvedUserLang = userLang === 'en' ? 'en-US' : userLang try { - locales[defaultLang] = require(`date-fns/locale/${defaultLang}/index.js`) + locales[ + resolvedDefaultLang + ] = require(`date-fns/locale/${resolvedDefaultLang}/index.js`) } catch (err) { - console.warn(getWarningMessage(defaultLang)) + console.warn(getWarningMessage(resolvedDefaultLang)) } - - if (lang && lang !== defaultLang) { + if (resolvedUserLang && resolvedUserLang !== resolvedDefaultLang) { try { - locales[lang] = require(`date-fns/locale/${lang}/index.js`) + locales[ + resolvedUserLang + ] = require(`date-fns/locale/${resolvedUserLang}/index.js`) } catch (e) { - console.warn(getWarningMessage(lang)) + console.warn(getWarningMessage(resolvedUserLang)) } } + lang = resolvedUserLang return locales[lang] } From 0abfcc7fbc58f9196de55d4fae29349d4d75e3ad Mon Sep 17 00:00:00 2001 From: PolariTOON <36267812+PolariTOON@users.noreply.github.com> Date: Tue, 13 Dec 2022 10:15:56 +0100 Subject: [PATCH 3/3] fix: Accept any type of date in the `f` function `date-fns` functions do not accept dates formatted as strings anymore, but only date objects. We make it so the `f` function returned by the `useI18n` hook still accepts other types of values, strings in particular. This should help consuming libs and apps to migrate. --- react/I18n/format.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/react/I18n/format.jsx b/react/I18n/format.jsx index 49190da1d6..a1e67ba330 100644 --- a/react/I18n/format.jsx +++ b/react/I18n/format.jsx @@ -36,12 +36,17 @@ export const initFormat = (userLang, defaultLang = DEFAULT_LANG) => ( date, formatStr ) => { + const dateObject = new Date(date) const locale = provideDateFnsLocale(userLang, defaultLang) - return format(date, formatStr, { locale }) + return format(dateObject, formatStr, { locale }) } -export const formatLocallyDistanceToNow = date => - formatDistanceToNow(date, { locale: locales[lang] }) +export const formatLocallyDistanceToNow = date => { + const dateObject = new Date(date) + return formatDistanceToNow(dateObject, { locale: locales[lang] }) +} -export const formatLocallyDistanceToNowStrict = date => - formatDistanceToNowStrict(date, { locale: locales[lang] }) +export const formatLocallyDistanceToNowStrict = date => { + const dateObject = new Date(date) + return formatDistanceToNowStrict(dateObject, { locale: locales[lang] }) +}