From 98e5442f2439d44e12543c6e0942e7ea92f3e26d Mon Sep 17 00:00:00 2001
From: Robin Dadswell <19610103+RobinDadswell@users.noreply.github.com>
Date: Tue, 25 May 2021 20:03:01 +0100
Subject: [PATCH] New: Added Running Years into the shows details

---
 frontend/src/Components/HeartRating.css      |  4 ++++
 frontend/src/Components/HeartRating.js       |  2 +-
 frontend/src/Series/Details/SeriesDetails.js | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/HeartRating.css b/frontend/src/Components/HeartRating.css
index 705adfcae..b414183af 100644
--- a/frontend/src/Components/HeartRating.css
+++ b/frontend/src/Components/HeartRating.css
@@ -2,3 +2,7 @@
   margin-right: 5px;
   color: $themeRed;
 }
+
+.rating {
+  margin-right: 15px;
+}
diff --git a/frontend/src/Components/HeartRating.js b/frontend/src/Components/HeartRating.js
index 98c3f817e..a2c730aed 100644
--- a/frontend/src/Components/HeartRating.js
+++ b/frontend/src/Components/HeartRating.js
@@ -6,7 +6,7 @@ import styles from './HeartRating.css';
 
 function HeartRating({ rating, iconSize }) {
   return (
-    <span>
+    <span className={styles.rating}>
       <Icon
         className={styles.heart}
         name={icons.HEART}
diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index 4ac4d1dd5..1b0959d5a 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -57,6 +57,11 @@ function getExpandedState(newState) {
   };
 }
 
+function getDateYear(date) {
+  const dateDate = new Date(date);
+  return dateDate.getFullYear();
+}
+
 class SeriesDetails extends Component {
 
   //
@@ -192,6 +197,8 @@ class SeriesDetails extends Component {
       seasons,
       alternateTitles,
       tags,
+      year,
+      previousAiring,
       isSaving,
       isRefreshing,
       isSearching,
@@ -229,6 +236,7 @@ class SeriesDetails extends Component {
     } = this.state;
 
     const statusDetails = getSeriesStatusDetails(status);
+    const runningYears = statusDetails.title === 'Ended' ? `${year}-${getDateYear(previousAiring)}` : `${year}-`;
 
     let episodeFilesCountMessage = 'No episode files';
 
@@ -414,6 +422,10 @@ class SeriesDetails extends Component {
                       rating={ratings.value}
                       iconSize={20}
                     />
+
+                    <span>
+                      {runningYears}
+                    </span>
                   </div>
                 </div>
 
@@ -706,6 +718,8 @@ SeriesDetails.propTypes = {
   seasons: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  year: PropTypes.number.isRequired,
+  previousAiring: PropTypes.string,
   isSaving: PropTypes.bool.isRequired,
   saveError: PropTypes.object,
   isRefreshing: PropTypes.bool.isRequired,