From a7db01fba483ca633a6eb9d39eb085ab9939d4d2 Mon Sep 17 00:00:00 2001
From: Brandon Cohen <cohbrandon@gmail.com>
Date: Tue, 22 Dec 2020 22:15:05 -0500
Subject: [PATCH] feat(frontend): first air date added to TV details page
 (#470)

---
 src/components/TvDetails/index.tsx | 23 ++++++++++++++++++++++-
 src/i18n/locale/en.json            |  1 +
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index d374c85e0..4d4330d61 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -1,5 +1,10 @@
 import React, { useState, useContext, useMemo } from 'react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import {
+  FormattedMessage,
+  FormattedDate,
+  defineMessages,
+  useIntl,
+} from 'react-intl';
 import useSWR from 'swr';
 import { useRouter } from 'next/router';
 import Button from '../Common/Button';
@@ -34,6 +39,7 @@ import { sortCrewPriority } from '../../utils/creditHelpers';
 import { Crew } from '../../../server/models/common';
 
 const messages = defineMessages({
+  firstAirDate: 'First Air Date',
   userrating: 'User Rating',
   status: 'Status',
   originallanguage: 'Original Language',
@@ -519,6 +525,21 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 </span>
               </div>
             )}
+            {data.firstAirDate && (
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
+                <span className="text-sm">
+                  <FormattedMessage {...messages.firstAirDate} />
+                </span>
+                <span className="flex-1 text-sm text-right text-gray-400">
+                  <FormattedDate
+                    value={new Date(data.firstAirDate)}
+                    year="numeric"
+                    month="long"
+                    day="numeric"
+                  />
+                </span>
+              </div>
+            )}
             <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.status} />
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 4f3a92271..cb6def44b 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -289,6 +289,7 @@
   "components.TvDetails.cast": "Cast",
   "components.TvDetails.decline": "Decline",
   "components.TvDetails.declinerequests": "Decline {requestCount} {requestCount, plural, one {Request} other {Requests}}",
+  "components.TvDetails.firstAirDate": "First Air Date",
   "components.TvDetails.manageModalClearMedia": "Clear All Media Data",
   "components.TvDetails.manageModalClearMediaWarning": "This will remove all media data including all requests for this item, irreversibly. If this item exists in your Plex library, the media info will be recreated next sync.",
   "components.TvDetails.manageModalNoRequests": "No Requests",