feat: Add ability to display year only when it is not the current year

2 years ago · 7623ae316d
parent da63598de3
commit 7623ae316d
20 changed files with 56 additions and 3 deletions
--- a/client/src/components/CardModal/Activities/Item.jsx
+++ b/client/src/components/CardModal/Activities/Item.jsx
@ -13,6 +13,10 @@ import styles from './Item.module.scss';
 const Item = React.memo(({ type, data, createdAt, user }) => {
  const [t] = useTranslation();

+  const thisYear = new Date().getFullYear();
+  const targetYear = createdAt.getFullYear();
+  const dateFormat = (targetYear == thisYear) ? "longDateTime" : "fullDateTime";
+
  let contentNode;
  switch (type) {
    case ActivityTypes.CREATE_CARD:
@ -66,7 +70,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:${dateFormat}`, {
            postProcess: 'formatDate',
            value: createdAt,
          })}
--- a/client/src/components/CardModal/Activities/ItemComment.jsx
+++ b/client/src/components/CardModal/Activities/ItemComment.jsx
@ -16,6 +16,10 @@ const ItemComment = React.memo(
  ({ data, createdAt, isPersisted, user, canEdit, onUpdate, onDelete }) => {
    const [t] = useTranslation();

+    const thisYear = new Date().getFullYear();
+    const targetYear = createdAt.getFullYear();
+    const dateFormat = (targetYear == thisYear) ? "longDateTime" : "fullDateTime";
+
    const commentEdit = useRef(null);

    const handleEditClick = useCallback(() => {
@ -33,7 +37,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:${dateFormat}`, {
                postProcess: 'formatDate',
                value: createdAt,
              })}
--- a/client/src/components/DueDate/DueDate.jsx
+++ b/client/src/components/DueDate/DueDate.jsx
@ -18,9 +18,19 @@ const FORMATS = {
  medium: 'longDateTime',
 };

+const OTHERWISE_FORMATS = {
+  tiny: 'fullDate',
+  small: 'fullDate',
+  medium: 'fullDateTime',
+};
+
 const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
  const [t] = useTranslation();

+  const thisYear = new Date().getFullYear();
+  const targetYear = value.getFullYear();
+  const dateFormats = (targetYear == thisYear) ? FORMATS : OTHERWISE_FORMATS;
+
  const contentNode = (
    <span
      className={classNames(
@ -29,7 +39,7 @@ const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
        onClick && styles.wrapperHoverable,
      )}
    >
-      {t(`format:${FORMATS[size]}`, {
+      {t(`format:${dateFormats[size]}`, {
        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,9 @@ 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: {