fix: Display year when date is outside of current year (#567)

2 years ago · 920f9c097d
parent da63598de3
commit 920f9c097d
21 changed files with 60 additions and 4 deletions
--- 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 }) => {
      <div className={classNames(styles.content)}>
        <div>{contentNode}</div>
        <span className={styles.date}>
-          {t('format:longDateTime', {
+          {t(`format:${getDateFormat(createdAt)}`, {
            postProcess: 'formatDate',
            value: createdAt,
          })}
--- 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(
          <div className={styles.title}>
            <span className={styles.author}>{user.name}</span>
            <span className={styles.date}>
-              {t('format:longDateTime', {
+              {t(`format:${getDateFormat(createdAt)}`, {
                postProcess: 'formatDate',
                value: createdAt,
              })}
--- 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 = (
    <span
      className={classNames(
@ -29,7 +43,7 @@ const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
        onClick && styles.wrapperHoverable,
      )}
    >
-      {t(`format:${FORMATS[size]}`, {
+      {t(`format:${dateFormat}`, {
        value,
        postProcess: 'formatDate',
      })}
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- 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: {
--- a/client/src/utils/get-date-format.js
+++ 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;
+};