From 226d94b050e5c1c6309de31feeb9085a040f7e40 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 28 Nov 2021 16:25:56 -0800
Subject: [PATCH] New: Show genres on series details page

Closes #4734
---
 frontend/src/Series/Details/SeriesDetails.js |  5 ++
 frontend/src/Series/Details/SeriesGenres.css |  3 ++
 frontend/src/Series/Details/SeriesGenres.js  | 53 ++++++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 frontend/src/Series/Details/SeriesGenres.css
 create mode 100644 frontend/src/Series/Details/SeriesGenres.js

diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index d6bfdf721..94f16e233 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -31,6 +31,7 @@ import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
 import SeriesAlternateTitles from './SeriesAlternateTitles';
 import SeriesDetailsSeasonConnector from './SeriesDetailsSeasonConnector';
+import SeriesGenres from './SeriesGenres';
 import SeriesTagsConnector from './SeriesTagsConnector';
 import SeriesDetailsLinks from './SeriesDetailsLinks';
 import MonitoringOptionsModal from 'Series/MonitoringOptions/MonitoringOptionsModal';
@@ -186,6 +187,7 @@ class SeriesDetails extends Component {
       images,
       seasons,
       alternateTitles,
+      genres,
       tags,
       year,
       previousAiring,
@@ -406,6 +408,8 @@ class SeriesDetails extends Component {
                       iconSize={20}
                     />
 
+                    <SeriesGenres genres={genres} />
+
                     <span>
                       {runningYears}
                     </span>
@@ -699,6 +703,7 @@ SeriesDetails.propTypes = {
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   seasons: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   year: PropTypes.number.isRequired,
   previousAiring: PropTypes.string,
diff --git a/frontend/src/Series/Details/SeriesGenres.css b/frontend/src/Series/Details/SeriesGenres.css
new file mode 100644
index 000000000..93a028748
--- /dev/null
+++ b/frontend/src/Series/Details/SeriesGenres.css
@@ -0,0 +1,3 @@
+.genres {
+  margin-right: 15px;
+}
diff --git a/frontend/src/Series/Details/SeriesGenres.js b/frontend/src/Series/Details/SeriesGenres.js
new file mode 100644
index 000000000..89fb61e13
--- /dev/null
+++ b/frontend/src/Series/Details/SeriesGenres.js
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import Label from 'Components/Label';
+import styles from './SeriesGenres.css';
+
+function SeriesGenres({ genres }) {
+  const [firstGenre, ...otherGenres] = genres;
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={
+          <span className={styles.genres}>
+            {firstGenre}
+          </span>
+        }
+        tooltip={
+          <div>
+            {
+              otherGenres.map((tag) => {
+                return (
+                  <Label
+                    key={tag}
+                    kind={kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag}
+                  </Label>
+                );
+              })
+            }
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return (
+    <span className={styles.genres}>
+      {firstGenre}
+    </span>
+  );
+}
+
+SeriesGenres.propTypes = {
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+export default SeriesGenres;