From 893a6744acc770e2469f9d16282df80e416b4d07 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 24 Apr 2022 12:30:20 -0700
Subject: [PATCH] New: Add The TVDB link to library import search results

Closes #4996
---
 .../SelectSeries/ImportSeriesSearchResult.css | 19 ++++++-
 .../SelectSeries/ImportSeriesSearchResult.js  | 52 +++++++++++--------
 .../Import/SelectSeries/ImportSeriesTitle.js  | 15 +++---
 frontend/src/Components/Table/VirtualTable.js |  6 ++-
 4 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
index a862c117c..4a2792b61 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css
@@ -1,4 +1,5 @@
-.series {
+.container {
+  display: flex;
   padding: 10px 20px;
   width: 100%;
 
@@ -6,3 +7,19 @@
     background-color: $menuItemHoverBackgroundColor;
   }
 }
+
+.series {
+  flex: 1 0 0;
+  overflow: hidden;
+}
+
+.tvdbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-left: auto;
+  color: $textColor;
+}
+
+.tvdbLinkIcon {
+  margin-left: 10px;
+}
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js
index d82cdc924..7b67adab7 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js
@@ -1,33 +1,28 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
+import { icons } from 'Helpers/Props';
 import Link from 'Components/Link/Link';
+import Icon from 'Components/Icon';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSearchResult.css';
 
-class ImportSeriesSearchResult extends Component {
+function ImportSeriesSearchResult(props) {
+  const {
+    tvdbId,
+    title,
+    year,
+    network,
+    isExistingSeries,
+    onPress
+  } = props;
 
-  //
-  // Listeners
+  const onPressCallback = useCallback(() => onPress(tvdbId), [tvdbId, onPress]);
 
-  onPress = () => {
-    this.props.onPress(this.props.tvdbId);
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      title,
-      year,
-      network,
-      isExistingSeries
-    } = this.props;
-
-    return (
+  return (
+    <div className={styles.container}>
       <Link
         className={styles.series}
-        onPress={this.onPress}
+        onPress={onPressCallback}
       >
         <ImportSeriesTitle
           title={title}
@@ -36,8 +31,19 @@ class ImportSeriesSearchResult extends Component {
           isExistingSeries={isExistingSeries}
         />
       </Link>
-    );
-  }
+
+      <Link
+        className={styles.tvdbLink}
+        to={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+      >
+        <Icon
+          className={styles.tvdbLinkIcon}
+          name={icons.EXTERNAL_LINK}
+          size={16}
+        />
+      </Link>
+    </div>
+  );
 }
 
 ImportSeriesSearchResult.propTypes = {
diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js
index 5dfabe6f4..3b89f3225 100644
--- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js
+++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesTitle.js
@@ -20,24 +20,27 @@ function ImportSeriesTitle(props) {
 
       {
         !title.contains(year) &&
-        year > 0 &&
+        year > 0 ?
           <span className={styles.year}>
             ({year})
-          </span>
+          </span> :
+          null
       }
 
       {
-        !!network &&
-          <Label>{network}</Label>
+        network ?
+          <Label>{network}</Label> :
+          null
       }
 
       {
-        isExistingSeries &&
+        isExistingSeries ?
           <Label
             kind={kinds.WARNING}
           >
             Existing
-          </Label>
+          </Label> :
+          null
       }
     </div>
   );
diff --git a/frontend/src/Components/Table/VirtualTable.js b/frontend/src/Components/Table/VirtualTable.js
index 0019d73f3..f9b40d852 100644
--- a/frontend/src/Components/Table/VirtualTable.js
+++ b/frontend/src/Components/Table/VirtualTable.js
@@ -103,6 +103,7 @@ class VirtualTable extends Component {
       scroller,
       header,
       headerHeight,
+      rowHeight,
       rowRenderer,
       ...otherProps
     } = this.props;
@@ -153,7 +154,7 @@ class VirtualTable extends Component {
                     width={width}
                     height={height}
                     headerHeight={height - headerHeight}
-                    rowHeight={ROW_HEIGHT}
+                    rowHeight={rowHeight}
                     rowCount={items.length}
                     columnCount={1}
                     columnWidth={width}
@@ -194,7 +195,8 @@ VirtualTable.propTypes = {
 
 VirtualTable.defaultProps = {
   className: styles.tableContainer,
-  headerHeight: 38
+  headerHeight: 38,
+  rowHeight: ROW_HEIGHT
 };
 
 export default VirtualTable;