feat(frontend): first air date added to TV details page (#470)

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} />

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",