From 23839d6e13e95cbc8a6b9eb2f594c5b1ec41e595 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 28 Apr 2024 20:11:38 +0300
Subject: [PATCH] New: Use absolute timestamps for series and episode history

---
 frontend/src/Episode/History/EpisodeHistory.js     |  6 ++++++
 .../src/Episode/History/EpisodeHistoryConnector.js | 10 ++++++++--
 frontend/src/Episode/History/EpisodeHistoryRow.js  | 14 +++++++++-----
 frontend/src/Series/History/SeriesHistoryModal.js  |  2 +-
 frontend/src/Series/History/SeriesHistoryRow.js    | 14 +++++++++-----
 .../Series/History/SeriesHistoryRowConnector.js    |  8 ++++++--
 6 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Episode/History/EpisodeHistory.js b/frontend/src/Episode/History/EpisodeHistory.js
index 78f05a82d..eaaa756cf 100644
--- a/frontend/src/Episode/History/EpisodeHistory.js
+++ b/frontend/src/Episode/History/EpisodeHistory.js
@@ -66,6 +66,8 @@ class EpisodeHistory extends Component {
       isPopulated,
       error,
       items,
+      timeFormat,
+      shortDateFormat,
       onMarkAsFailedPress
     } = this.props;
 
@@ -101,6 +103,8 @@ class EpisodeHistory extends Component {
                   <EpisodeHistoryRow
                     key={item.id}
                     {...item}
+                    timeFormat={timeFormat}
+                    shortDateFormat={shortDateFormat}
                     onMarkAsFailedPress={onMarkAsFailedPress}
                   />
                 );
@@ -120,6 +124,8 @@ EpisodeHistory.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Episode/History/EpisodeHistoryConnector.js b/frontend/src/Episode/History/EpisodeHistoryConnector.js
index 1e3414646..f86d26e78 100644
--- a/frontend/src/Episode/History/EpisodeHistoryConnector.js
+++ b/frontend/src/Episode/History/EpisodeHistoryConnector.js
@@ -3,13 +3,19 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clearEpisodeHistory, episodeHistoryMarkAsFailed, fetchEpisodeHistory } from 'Store/Actions/episodeHistoryActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import EpisodeHistory from './EpisodeHistory';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.episodeHistory,
-    (episodeHistory) => {
-      return episodeHistory;
+    createUISettingsSelector(),
+    (episodeHistory, uiSettings) => {
+      return {
+        ...episodeHistory,
+        timeFormat: uiSettings.timeFormat,
+        shortDateFormat: uiSettings.shortDateFormat
+      };
     }
   );
 }
diff --git a/frontend/src/Episode/History/EpisodeHistoryRow.js b/frontend/src/Episode/History/EpisodeHistoryRow.js
index d49f2c963..7f439e648 100644
--- a/frontend/src/Episode/History/EpisodeHistoryRow.js
+++ b/frontend/src/Episode/History/EpisodeHistoryRow.js
@@ -5,7 +5,6 @@ import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
 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 Popover from 'Components/Tooltip/Popover';
@@ -13,6 +12,7 @@ import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './EpisodeHistoryRow.css';
@@ -72,7 +72,9 @@ class EpisodeHistoryRow extends Component {
       customFormatScore,
       date,
       data,
-      downloadId
+      downloadId,
+      timeFormat,
+      shortDateFormat
     } = this.props;
 
     const {
@@ -109,9 +111,9 @@ class EpisodeHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
-          date={date}
-        />
+        <TableRowCell>
+          {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+        </TableRowCell>
 
         <TableRowCell className={styles.actions}>
           <Popover
@@ -169,6 +171,8 @@ EpisodeHistoryRow.propTypes = {
   date: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   downloadId: PropTypes.string,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Series/History/SeriesHistoryModal.js b/frontend/src/Series/History/SeriesHistoryModal.js
index 5d8c2c6d7..0cd7ef9d0 100644
--- a/frontend/src/Series/History/SeriesHistoryModal.js
+++ b/frontend/src/Series/History/SeriesHistoryModal.js
@@ -14,7 +14,7 @@ function SeriesHistoryModal(props) {
   return (
     <Modal
       isOpen={isOpen}
-      size={sizes.EXTRA_LARGE}
+      size={sizes.EXTRA_EXTRA_LARGE}
       onModalClose={onModalClose}
     >
       <SeriesHistoryModalContentConnector
diff --git a/frontend/src/Series/History/SeriesHistoryRow.js b/frontend/src/Series/History/SeriesHistoryRow.js
index 5b44f93aa..b06e60924 100644
--- a/frontend/src/Series/History/SeriesHistoryRow.js
+++ b/frontend/src/Series/History/SeriesHistoryRow.js
@@ -5,7 +5,6 @@ import HistoryEventTypeCell from 'Activity/History/HistoryEventTypeCell';
 import Icon from 'Components/Icon';
 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 Popover from 'Components/Tooltip/Popover';
@@ -15,6 +14,7 @@ import EpisodeNumber from 'Episode/EpisodeNumber';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import styles from './SeriesHistoryRow.css';
@@ -77,7 +77,9 @@ class SeriesHistoryRow extends Component {
       fullSeries,
       series,
       episode,
-      customFormatScore
+      customFormatScore,
+      timeFormat,
+      shortDateFormat
     } = this.props;
 
     const {
@@ -129,9 +131,9 @@ class SeriesHistoryRow extends Component {
           {formatCustomFormatScore(customFormatScore, customFormats.length)}
         </TableRowCell>
 
-        <RelativeDateCellConnector
-          date={date}
-        />
+        <TableRowCell>
+          {formatDateTime(date, shortDateFormat, timeFormat, { includeSeconds: true })}
+        </TableRowCell>
 
         <TableRowCell className={styles.actions}>
           <Popover
@@ -192,6 +194,8 @@ SeriesHistoryRow.propTypes = {
   series: PropTypes.object.isRequired,
   episode: PropTypes.object.isRequired,
   customFormatScore: PropTypes.number.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
diff --git a/frontend/src/Series/History/SeriesHistoryRowConnector.js b/frontend/src/Series/History/SeriesHistoryRowConnector.js
index 4d301f192..195e440a1 100644
--- a/frontend/src/Series/History/SeriesHistoryRowConnector.js
+++ b/frontend/src/Series/History/SeriesHistoryRowConnector.js
@@ -3,16 +3,20 @@ import { createSelector } from 'reselect';
 import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
 import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import SeriesHistoryRow from './SeriesHistoryRow';
 
 function createMapStateToProps() {
   return createSelector(
     createSeriesSelector(),
     createEpisodeSelector(),
-    (series, episode) => {
+    createUISettingsSelector(),
+    (series, episode, uiSettings) => {
       return {
         series,
-        episode
+        episode,
+        timeFormat: uiSettings.timeFormat,
+        shortDateFormat: uiSettings.shortDateFormat
       };
     }
   );