From a7b3bf781d48771f2feb8fcdc71f4ec307447172 Mon Sep 17 00:00:00 2001 From: Maksim Eltyshev Date: Wed, 20 Dec 2023 12:21:11 +0100 Subject: [PATCH] ref: Refactoring --- .../src/components/CardModal/Activities/Item.jsx | 7 ++----- .../CardModal/Activities/ItemComment.jsx | 7 ++----- client/src/components/DueDate/DueDate.jsx | 16 ++++++++++------ client/src/locales/ja/core.js | 2 +- client/src/locales/ko/core.js | 5 ++--- client/src/utils/get-date-format.js | 6 ++++++ 6 files changed, 23 insertions(+), 20 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 8d0c972c..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'; @@ -13,10 +14,6 @@ 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: @@ -70,7 +67,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
{contentNode}
- {t(`format:${dateFormat}`, { + {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 26f27ed4..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'; @@ -16,10 +17,6 @@ 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(() => { @@ -37,7 +34,7 @@ const ItemComment = React.memo(
{user.name} - {t(`format:${dateFormat}`, { + {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 c01eb88e..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,13 +14,13 @@ const SIZES = { MEDIUM: 'medium', }; -const FORMATS = { +const LONG_DATE_FORMAT_BY_SIZE = { tiny: 'longDate', small: 'longDate', medium: 'longDateTime', }; -const OTHERWISE_FORMATS = { +const FULL_DATE_FORMAT_BY_SIZE = { tiny: 'fullDate', small: 'fullDate', medium: 'fullDateTime', @@ -27,9 +29,11 @@ const OTHERWISE_FORMATS = { 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 dateFormat = getDateFormat( + value, + LONG_DATE_FORMAT_BY_SIZE[size], + FULL_DATE_FORMAT_BY_SIZE[size], + ); const contentNode = ( { onClick && styles.wrapperHoverable, )} > - {t(`format:${dateFormats[size]}`, { + {t(`format:${dateFormat}`, { value, postProcess: 'formatDate', })} diff --git a/client/src/locales/ja/core.js b/client/src/locales/ja/core.js index 560e8ecd..8242246f 100644 --- a/client/src/locales/ja/core.js +++ b/client/src/locales/ja/core.js @@ -10,7 +10,7 @@ export default { longDate: 'MMMMd日', longDateTime: "MMMMd'日 ' HH:mm", fullDate: 'yyyy年M月d日', - fullDateTime: "yyyy年M月d日 HH:mm", + fullDateTime: 'yyyy年M月d日 HH:mm', }, translation: { diff --git a/client/src/locales/ko/core.js b/client/src/locales/ko/core.js index c1d676ab..474f9de8 100644 --- a/client/src/locales/ko/core.js +++ b/client/src/locales/ko/core.js @@ -9,9 +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분", - + fullDate: 'yyyy년M월d일', + fullDateTime: 'yyyy년M월d일 a hh시 mm분', }, 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; +};