From 920f9c097d938a0b6079728bcd5ca6e1c0c39c23 Mon Sep 17 00:00:00 2001 From: Yu Inoue <34591767+eternity1984@users.noreply.github.com> Date: Wed, 20 Dec 2023 20:26:01 +0900 Subject: [PATCH] fix: Display year when date is outside of current year (#567) --- .../components/CardModal/Activities/Item.jsx | 3 ++- .../CardModal/Activities/ItemComment.jsx | 3 ++- client/src/components/DueDate/DueDate.jsx | 18 ++++++++++++++++-- client/src/locales/cs/core.js | 2 ++ client/src/locales/da/core.js | 2 ++ client/src/locales/de/core.js | 2 ++ client/src/locales/en/core.js | 2 ++ client/src/locales/es/core.js | 2 ++ client/src/locales/fr/core.js | 2 ++ client/src/locales/it/core.js | 2 ++ client/src/locales/ja/core.js | 2 ++ client/src/locales/ko/core.js | 2 ++ client/src/locales/pl/core.js | 2 ++ client/src/locales/ro/core.js | 2 ++ client/src/locales/ru/core.js | 2 ++ client/src/locales/sk/core.js | 2 ++ client/src/locales/sv/core.js | 2 ++ client/src/locales/tr/core.js | 2 ++ client/src/locales/uz/core.js | 2 ++ client/src/locales/zh/core.js | 2 ++ client/src/utils/get-date-format.js | 6 ++++++ 21 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 client/src/utils/get-date-format.js diff --git a/client/src/components/CardModal/Activities/Item.jsx b/client/src/components/CardModal/Activities/Item.jsx index 4a530632..c23d3bf9 100755 --- a/client/src/components/CardModal/Activities/Item.jsx +++ b/client/src/components/CardModal/Activities/Item.jsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { useTranslation, Trans } from 'react-i18next'; import { Comment } from 'semantic-ui-react'; +import getDateFormat from '../../../utils/get-date-format'; import { ActivityTypes } from '../../../constants/Enums'; import ItemComment from './ItemComment'; import User from '../../User'; @@ -66,7 +67,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
{contentNode}
- {t('format:longDateTime', { + {t(`format:${getDateFormat(createdAt)}`, { postProcess: 'formatDate', value: createdAt, })} diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx index 488f0d8d..fca47b31 100755 --- a/client/src/components/CardModal/Activities/ItemComment.jsx +++ b/client/src/components/CardModal/Activities/ItemComment.jsx @@ -6,6 +6,7 @@ import { Comment } from 'semantic-ui-react'; import { usePopup } from '../../../lib/popup'; import { Markdown } from '../../../lib/custom-ui'; +import getDateFormat from '../../../utils/get-date-format'; import CommentEdit from './CommentEdit'; import User from '../../User'; import DeleteStep from '../../DeleteStep'; @@ -33,7 +34,7 @@ const ItemComment = React.memo(
{user.name} - {t('format:longDateTime', { + {t(`format:${getDateFormat(createdAt)}`, { postProcess: 'formatDate', value: createdAt, })} diff --git a/client/src/components/DueDate/DueDate.jsx b/client/src/components/DueDate/DueDate.jsx index e36fa251..59f0754c 100644 --- a/client/src/components/DueDate/DueDate.jsx +++ b/client/src/components/DueDate/DueDate.jsx @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; +import getDateFormat from '../../utils/get-date-format'; + import styles from './DueDate.module.scss'; const SIZES = { @@ -12,15 +14,27 @@ const SIZES = { MEDIUM: 'medium', }; -const FORMATS = { +const LONG_DATE_FORMAT_BY_SIZE = { tiny: 'longDate', small: 'longDate', medium: 'longDateTime', }; +const FULL_DATE_FORMAT_BY_SIZE = { + tiny: 'fullDate', + small: 'fullDate', + medium: 'fullDateTime', +}; + const DueDate = React.memo(({ value, size, isDisabled, onClick }) => { const [t] = useTranslation(); + const dateFormat = getDateFormat( + value, + LONG_DATE_FORMAT_BY_SIZE[size], + FULL_DATE_FORMAT_BY_SIZE[size], + ); + const contentNode = ( { onClick && styles.wrapperHoverable, )} > - {t(`format:${FORMATS[size]}`, { + {t(`format:${dateFormat}`, { value, postProcess: 'formatDate', })} diff --git a/client/src/locales/cs/core.js b/client/src/locales/cs/core.js index f32a580a..04dfc8d8 100644 --- a/client/src/locales/cs/core.js +++ b/client/src/locales/cs/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'v' p", + fullDate: 'd MMM, y', + fullDateTime: "d MMMM, y 'v' p", }, translation: { diff --git a/client/src/locales/da/core.js b/client/src/locales/da/core.js index 7793d4e3..93e7096e 100644 --- a/client/src/locales/da/core.js +++ b/client/src/locales/da/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'a' p", }, translation: { diff --git a/client/src/locales/de/core.js b/client/src/locales/de/core.js index 4389df0d..0b743de5 100644 --- a/client/src/locales/de/core.js +++ b/client/src/locales/de/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd. MMM', longDateTime: "d. MMMM 'um' p", + fullDate: 'd. MMM. y', + fullDateTime: "d. MMMM. y 'um' p", }, translation: { diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js index 10c40a65..83b01168 100644 --- a/client/src/locales/en/core.js +++ b/client/src/locales/en/core.js @@ -5,6 +5,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'at' p", }, translation: { diff --git a/client/src/locales/es/core.js b/client/src/locales/es/core.js index e7e2d8da..a0b12606 100644 --- a/client/src/locales/es/core.js +++ b/client/src/locales/es/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'a' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'a' p", }, translation: { diff --git a/client/src/locales/fr/core.js b/client/src/locales/fr/core.js index 81f43cbf..e20e2910 100644 --- a/client/src/locales/fr/core.js +++ b/client/src/locales/fr/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'à' p", + fullDate: 'd MMM y', + fullDateTime: "d MMMM y 'à' p", }, translation: { diff --git a/client/src/locales/it/core.js b/client/src/locales/it/core.js index 0241da63..f08a9460 100644 --- a/client/src/locales/it/core.js +++ b/client/src/locales/it/core.js @@ -5,6 +5,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'at' p", }, translation: { diff --git a/client/src/locales/ja/core.js b/client/src/locales/ja/core.js index 56a1776f..8242246f 100644 --- a/client/src/locales/ja/core.js +++ b/client/src/locales/ja/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMMMd日', longDateTime: "MMMMd'日 ' HH:mm", + fullDate: 'yyyy年M月d日', + fullDateTime: 'yyyy年M月d日 HH:mm', }, translation: { diff --git a/client/src/locales/ko/core.js b/client/src/locales/ko/core.js index 834c8d33..474f9de8 100644 --- a/client/src/locales/ko/core.js +++ b/client/src/locales/ko/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: "MMMMd'일'", longDateTime: "MMMMd'일 ' a hh시 mm분", + fullDate: 'yyyy년M월d일', + fullDateTime: 'yyyy년M월d일 a hh시 mm분', }, translation: { diff --git a/client/src/locales/pl/core.js b/client/src/locales/pl/core.js index 0acc2662..54ac3066 100644 --- a/client/src/locales/pl/core.js +++ b/client/src/locales/pl/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'o' p", + fullDate: 'd MMM y', + fullDateTime: "d MMMM y 'o' p", }, translation: { diff --git a/client/src/locales/ro/core.js b/client/src/locales/ro/core.js index c9b9e9dc..2e199226 100644 --- a/client/src/locales/ro/core.js +++ b/client/src/locales/ro/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'в' p", + fullDate: 'd MMM y', + fullDateTime: "d MMMM y 'в' p", }, translation: { diff --git a/client/src/locales/ru/core.js b/client/src/locales/ru/core.js index 19371038..138b893a 100644 --- a/client/src/locales/ru/core.js +++ b/client/src/locales/ru/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'в' p", + fullDate: 'd MMM y', + fullDateTime: "d MMMM y 'в' p", }, translation: { diff --git a/client/src/locales/sk/core.js b/client/src/locales/sk/core.js index 574be43f..b3716303 100644 --- a/client/src/locales/sk/core.js +++ b/client/src/locales/sk/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd MMM', longDateTime: "d MMMM 'v' p", + fullDate: 'd MMM y', + fullDateTime: "d MMMM y 'v' p", }, translation: { diff --git a/client/src/locales/sv/core.js b/client/src/locales/sv/core.js index 1b43e132..0f7b37fb 100644 --- a/client/src/locales/sv/core.js +++ b/client/src/locales/sv/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'at' p", }, translation: { diff --git a/client/src/locales/tr/core.js b/client/src/locales/tr/core.js index bd267c01..b04cd216 100644 --- a/client/src/locales/tr/core.js +++ b/client/src/locales/tr/core.js @@ -9,6 +9,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'd. MMM', longDateTime: "d. MMMM 'Saat' p", + fullDate: 'd. MMM. y', + fullDateTime: "d. MMMM. y 'Saat' p", }, translation: { diff --git a/client/src/locales/uz/core.js b/client/src/locales/uz/core.js index cc2c52e7..084de78e 100644 --- a/client/src/locales/uz/core.js +++ b/client/src/locales/uz/core.js @@ -5,6 +5,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'at' p", }, translation: { diff --git a/client/src/locales/zh/core.js b/client/src/locales/zh/core.js index c381a88f..643bb4eb 100644 --- a/client/src/locales/zh/core.js +++ b/client/src/locales/zh/core.js @@ -5,6 +5,8 @@ export default { dateTime: '$t(format:date) $t(format:time)', longDate: 'MMM d', longDateTime: "MMMM d 'at' p", + fullDate: 'MMM d, y', + fullDateTime: "MMMM d, y 'at' p", }, translation: { diff --git a/client/src/utils/get-date-format.js b/client/src/utils/get-date-format.js new file mode 100644 index 00000000..cb7525d8 --- /dev/null +++ b/client/src/utils/get-date-format.js @@ -0,0 +1,6 @@ +export default (value, longDateFormat = 'longDateTime', fullDateFormat = 'fullDateTime') => { + const year = value.getFullYear(); + const currentYear = new Date().getFullYear(); + + return year === currentYear ? longDateFormat : fullDateFormat; +};