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

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,
           })}

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,
               })}

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',
       })}

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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;
+};