From 6e81d5917ea44830c26782bd4bd665c32c89c026 Mon Sep 17 00:00:00 2001 From: Bogdan Date: Sat, 31 Aug 2024 10:18:32 +0300 Subject: [PATCH] Refactor include time for movie history (cherry picked from commit 05edd44ed6dfe73c25da021ef2600e609852f7e0) (cherry picked from commit ca372bee258523339aff2b868f8f9a619d44dbca) (cherry picked from commit 2a662afaef0bed9f8cd153d60eee5ecbe85508ba) Closes #10039 Closes #10045 Closes #10046 --- frontend/src/Activity/Queue/TimeleftCell.js | 12 ++- frontend/src/Calendar/Day/DayOfWeek.js | 2 +- .../Table/Cells/RelativeDateCell.js | 5 +- .../src/Movie/Details/MovieReleaseDates.tsx | 19 +++-- frontend/src/Movie/History/MovieHistoryRow.js | 10 ++- .../Index/Overview/MovieIndexOverviewInfo.tsx | 5 +- .../Movie/Index/Posters/MovieIndexPoster.tsx | 27 +++--- .../Index/Posters/MovieIndexPosterInfo.tsx | 53 ++++++------ .../src/Utilities/Date/getRelativeDate.js | 43 ---------- .../src/Utilities/Date/getRelativeDate.ts | 82 +++++++++++++++++++ src/NzbDrone.Core/Localization/Core/en.json | 4 + 11 files changed, 165 insertions(+), 97 deletions(-) delete mode 100644 frontend/src/Utilities/Date/getRelativeDate.js create mode 100644 frontend/src/Utilities/Date/getRelativeDate.ts diff --git a/frontend/src/Activity/Queue/TimeleftCell.js b/frontend/src/Activity/Queue/TimeleftCell.js index b280b5a06..0a39b7edc 100644 --- a/frontend/src/Activity/Queue/TimeleftCell.js +++ b/frontend/src/Activity/Queue/TimeleftCell.js @@ -24,7 +24,11 @@ function TimeleftCell(props) { } = props; if (status === 'delay') { - const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates); + const date = getRelativeDate({ + date: estimatedCompletionTime, + shortDateFormat, + showRelativeDates + }); const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true }); return ( @@ -40,7 +44,11 @@ function TimeleftCell(props) { } if (status === 'downloadClientUnavailable') { - const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates); + const date = getRelativeDate({ + date: estimatedCompletionTime, + shortDateFormat, + showRelativeDates + }); const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true }); return ( diff --git a/frontend/src/Calendar/Day/DayOfWeek.js b/frontend/src/Calendar/Day/DayOfWeek.js index 39e40fce8..0f1d38f0b 100644 --- a/frontend/src/Calendar/Day/DayOfWeek.js +++ b/frontend/src/Calendar/Day/DayOfWeek.js @@ -28,7 +28,7 @@ class DayOfWeek extends Component { if (view === calendarViews.WEEK) { formatedDate = momentDate.format(calendarWeekColumnHeader); } else if (view === calendarViews.FORECAST) { - formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates); + formatedDate = getRelativeDate({ date, shortDateFormat, showRelativeDates }); } return ( diff --git a/frontend/src/Components/Table/Cells/RelativeDateCell.js b/frontend/src/Components/Table/Cells/RelativeDateCell.js index 207b97752..37d23e8f9 100644 --- a/frontend/src/Components/Table/Cells/RelativeDateCell.js +++ b/frontend/src/Components/Table/Cells/RelativeDateCell.js @@ -15,6 +15,7 @@ class RelativeDateCell extends PureComponent { className, date, includeSeconds, + includeTime, showRelativeDates, shortDateFormat, longDateFormat, @@ -39,7 +40,7 @@ class RelativeDateCell extends PureComponent { title={formatDateTime(date, longDateFormat, timeFormat, { includeSeconds, includeRelativeDay: !showRelativeDates })} {...otherProps} > - {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })} + {getRelativeDate({ date, shortDateFormat, showRelativeDates, timeFormat, includeSeconds, includeTime, timeForToday: true })} ); } @@ -49,6 +50,7 @@ RelativeDateCell.propTypes = { className: PropTypes.string.isRequired, date: PropTypes.string, includeSeconds: PropTypes.bool.isRequired, + includeTime: PropTypes.bool.isRequired, showRelativeDates: PropTypes.bool.isRequired, shortDateFormat: PropTypes.string.isRequired, longDateFormat: PropTypes.string.isRequired, @@ -60,6 +62,7 @@ RelativeDateCell.propTypes = { RelativeDateCell.defaultProps = { className: styles.cell, includeSeconds: false, + includeTime: false, component: TableRowCell }; diff --git a/frontend/src/Movie/Details/MovieReleaseDates.tsx b/frontend/src/Movie/Details/MovieReleaseDates.tsx index d9604358b..bc5ea0109 100644 --- a/frontend/src/Movie/Details/MovieReleaseDates.tsx +++ b/frontend/src/Movie/Details/MovieReleaseDates.tsx @@ -38,7 +38,10 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
- {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: inCinemas, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} @@ -50,7 +53,10 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
- {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: digitalRelease, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} @@ -62,12 +68,13 @@ function MovieReleaseDates(props: MovieReleaseDatesProps) {
- {getRelativeDate( - physicalRelease, + {getRelativeDate({ + date: physicalRelease, shortDateFormat, showRelativeDates, - { timeFormat, timeForToday: false } - )} + timeFormat, + timeForToday: false, + })} ) : null} diff --git a/frontend/src/Movie/History/MovieHistoryRow.js b/frontend/src/Movie/History/MovieHistoryRow.js index 8b42a7e7d..28944d6f4 100644 --- a/frontend/src/Movie/History/MovieHistoryRow.js +++ b/frontend/src/Movie/History/MovieHistoryRow.js @@ -4,13 +4,13 @@ import HistoryDetailsModal from 'Activity/History/Details/HistoryDetailsModal'; import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell'; import IconButton from 'Components/Link/IconButton'; import ConfirmModal from 'Components/Modal/ConfirmModal'; +import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector'; import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableRow from 'Components/Table/TableRow'; import { icons, kinds } from 'Helpers/Props'; import MovieFormats from 'Movie/MovieFormats'; import MovieLanguages from 'Movie/MovieLanguages'; import MovieQuality from 'Movie/MovieQuality'; -import formatDateTime from 'Utilities/Date/formatDateTime'; import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore'; import translate from 'Utilities/String/translate'; import styles from './MovieHistoryRow.css'; @@ -109,9 +109,11 @@ class MovieHistoryRow extends Component { {formatCustomFormatScore(customFormatScore, customFormats.length)} - - {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })} - + {' '} - {getRelativeDate(inCinemas, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: inCinemas, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} @@ -253,7 +256,10 @@ function MovieIndexPoster(props: MovieIndexPosterProps) { {showDigitalRelease && digitalRelease ? (
{' '} - {getRelativeDate(digitalRelease, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: digitalRelease, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} @@ -263,22 +269,23 @@ function MovieIndexPoster(props: MovieIndexPosterProps) { {showPhysicalRelease && physicalRelease ? (
{' '} - {getRelativeDate( - physicalRelease, + {getRelativeDate({ + date: physicalRelease, shortDateFormat, showRelativeDates, - { - timeFormat, - timeForToday: false, - } - )} + timeFormat, + timeForToday: false, + })}
) : null} {showReleaseDate && releaseDate ? (
{' '} - {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: releaseDate, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx index db4697924..225d91d63 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx +++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx @@ -100,15 +100,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { } if (sortKey === 'added' && added) { - const addedDate = getRelativeDate( - added, + const addedDate = getRelativeDate({ + date: added, shortDateFormat, showRelativeDates, - { - timeFormat, - timeForToday: false, - } - ); + timeFormat, + timeForToday: false, + }); return (
@@ -147,15 +143,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { } if (sortKey === 'digitalRelease' && digitalRelease && !showDigitalRelease) { - const digitalReleaseDate = getRelativeDate( - digitalRelease, + const digitalReleaseDate = getRelativeDate({ + date: digitalRelease, shortDateFormat, showRelativeDates, - { - timeFormat, - timeForToday: false, - } - ); + timeFormat, + timeForToday: false, + }); return (
@@ -169,15 +163,13 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { physicalRelease && !showPhysicalRelease ) { - const physicalReleaseDate = getRelativeDate( - physicalRelease, + const physicalReleaseDate = getRelativeDate({ + date: physicalRelease, shortDateFormat, showRelativeDates, - { - timeFormat, - timeForToday: false, - } - ); + timeFormat, + timeForToday: false, + }); return (
@@ -190,7 +182,10 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) { return (
{' '} - {getRelativeDate(releaseDate, shortDateFormat, showRelativeDates, { + {getRelativeDate({ + date: releaseDate, + shortDateFormat, + showRelativeDates, timeFormat, timeForToday: false, })} diff --git a/frontend/src/Utilities/Date/getRelativeDate.js b/frontend/src/Utilities/Date/getRelativeDate.js deleted file mode 100644 index 812064272..000000000 --- a/frontend/src/Utilities/Date/getRelativeDate.js +++ /dev/null @@ -1,43 +0,0 @@ -import moment from 'moment'; -import formatTime from 'Utilities/Date/formatTime'; -import isInNextWeek from 'Utilities/Date/isInNextWeek'; -import isToday from 'Utilities/Date/isToday'; -import isTomorrow from 'Utilities/Date/isTomorrow'; -import isYesterday from 'Utilities/Date/isYesterday'; -import translate from 'Utilities/String/translate'; - -function getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds = false, timeForToday = false } = {}) { - if (!date) { - return null; - } - - const isTodayDate = isToday(date); - - if (isTodayDate && timeForToday && timeFormat) { - return formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds }); - } - - if (!showRelativeDates) { - return moment(date).format(shortDateFormat); - } - - if (isYesterday(date)) { - return translate('Yesterday'); - } - - if (isTodayDate) { - return translate('Today'); - } - - if (isTomorrow(date)) { - return translate('Tomorrow'); - } - - if (isInNextWeek(date)) { - return moment(date).format('dddd'); - } - - return moment(date).format(shortDateFormat); -} - -export default getRelativeDate; diff --git a/frontend/src/Utilities/Date/getRelativeDate.ts b/frontend/src/Utilities/Date/getRelativeDate.ts new file mode 100644 index 000000000..509f1f39d --- /dev/null +++ b/frontend/src/Utilities/Date/getRelativeDate.ts @@ -0,0 +1,82 @@ +import moment from 'moment'; +import formatTime from 'Utilities/Date/formatTime'; +import isInNextWeek from 'Utilities/Date/isInNextWeek'; +import isToday from 'Utilities/Date/isToday'; +import isTomorrow from 'Utilities/Date/isTomorrow'; +import isYesterday from 'Utilities/Date/isYesterday'; +import translate from 'Utilities/String/translate'; +import formatDateTime from './formatDateTime'; + +interface GetRelativeDateOptions { + date?: string; + shortDateFormat: string; + showRelativeDates: boolean; + timeFormat?: string; + includeSeconds?: boolean; + timeForToday?: boolean; + includeTime?: boolean; +} + +function getRelativeDate({ + date, + shortDateFormat, + showRelativeDates, + timeFormat, + includeSeconds = false, + timeForToday = false, + includeTime = false, +}: GetRelativeDateOptions) { + if (!date) { + return ''; + } + + if ((includeTime || timeForToday) && !timeFormat) { + throw new Error( + "getRelativeDate: 'timeFormat' is required when 'includeTime' or 'timeForToday' is true" + ); + } + + const isTodayDate = isToday(date); + const time = timeFormat + ? formatTime(date, timeFormat, { + includeMinuteZero: true, + includeSeconds, + }) + : ''; + + if (isTodayDate && timeForToday) { + return time; + } + + if (!showRelativeDates) { + return moment(date).format(shortDateFormat); + } + + if (isYesterday(date)) { + return includeTime + ? translate('YesterdayAt', { time }) + : translate('Yesterday'); + } + + if (isTodayDate) { + return includeTime ? translate('TodayAt', { time }) : translate('Today'); + } + + if (isTomorrow(date)) { + return includeTime + ? translate('TomorrowAt', { time }) + : translate('Tomorrow'); + } + + if (isInNextWeek(date)) { + const day = moment(date).format('dddd'); + + return includeTime ? translate('DayOfWeekAt', { day, time }) : day; + } + + return includeTime + ? formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds }) + : moment(date).format(shortDateFormat); +} + +export default getRelativeDate; diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json index a0b60bea1..468b1e186 100644 --- a/src/NzbDrone.Core/Localization/Core/en.json +++ b/src/NzbDrone.Core/Localization/Core/en.json @@ -278,6 +278,7 @@ "Date": "Date", "Dates": "Dates", "Day": "Day", + "DayOfWeekAt": "{day} at {time}", "Days": "Days", "Debug": "Debug", "Default": "Default", @@ -1696,7 +1697,9 @@ "TmdbRating": "TMDb Rating", "TmdbVotes": "TMDb Votes", "Today": "Today", + "TodayAt": "Today at {time}", "Tomorrow": "Tomorrow", + "TomorrowAt": "Tomorrow at {time}", "TorrentBlackhole": "Torrent Blackhole", "TorrentBlackholeSaveMagnetFiles": "Save Magnet Files", "TorrentBlackholeSaveMagnetFilesExtension": "Save Magnet Files Extension", @@ -1811,5 +1814,6 @@ "YesCancel": "Yes, Cancel", "YesMoveFiles": "Yes, Move the Files", "Yesterday": "Yesterday", + "YesterdayAt": "Yesterday at {time}", "YouCanAlsoSearch": "You can also search using TMDb ID or IMDb ID of a movie. e.g. `tmdb:71663`" }