From 1a0d276c720346a2b0db836e4185f11133edbc1e Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Thu, 2 Jan 2020 18:46:26 -0500
Subject: [PATCH] Fixed: React error when displaying a search result for an
 existing item

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../src/Search/Album/AddNewAlbumSearchResult.css | 16 ++++++++++++++--
 .../src/Search/Album/AddNewAlbumSearchResult.js  | 10 ++++++----
 .../Search/Artist/AddNewArtistSearchResult.css   | 16 ++++++++++++++--
 .../Search/Artist/AddNewArtistSearchResult.js    | 10 ++++++----
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.css b/frontend/src/Search/Album/AddNewAlbumSearchResult.css
index c8f7dd3cb..719919488 100644
--- a/frontend/src/Search/Album/AddNewAlbumSearchResult.css
+++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.css
@@ -1,10 +1,15 @@
 .searchResult {
-  display: flex;
+  position: relative;
   margin: 20px 0;
   padding: 20px;
   width: 100%;
-  background-color: $white;
   color: inherit;
+}
+
+.underlay {
+  @add-mixin cover;
+
+  background-color: $white;
   transition: background 500ms;
 
   &:hover {
@@ -14,6 +19,13 @@
   }
 }
 
+.overlay {
+  @add-mixin linkOverlay;
+
+  position: relative;
+  display: flex;
+}
+
 .poster {
   flex: 0 0 170px;
   margin-right: 20px;
diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.js b/frontend/src/Search/Album/AddNewAlbumSearchResult.js
index 7d7e4a36f..451aec6b7 100644
--- a/frontend/src/Search/Album/AddNewAlbumSearchResult.js
+++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.js
@@ -94,11 +94,13 @@ class AddNewAlbumSearchResult extends Component {
     const height = calculateHeight(230, isSmallScreen);
 
     return (
-      <div>
+      <div className={styles.searchResult}>
         <Link
-          className={styles.searchResult}
+          className={styles.underlay}
           {...linkProps}
-        >
+        />
+
+        <div className={styles.overlay}>
           {
             !isSmallScreen &&
             <AlbumCover
@@ -212,7 +214,7 @@ class AddNewAlbumSearchResult extends Component {
               />
             </div>
           </div>
-        </Link>
+        </div>
 
         <AddNewAlbumModal
           isOpen={isNewAddAlbumModalOpen && !isExistingAlbum}
diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.css b/frontend/src/Search/Artist/AddNewArtistSearchResult.css
index 2ff15135c..1c63d220e 100644
--- a/frontend/src/Search/Artist/AddNewArtistSearchResult.css
+++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.css
@@ -1,10 +1,15 @@
 .searchResult {
-  display: flex;
+  position: relative;
   margin: 20px 0;
   padding: 20px;
   width: 100%;
-  background-color: $white;
   color: inherit;
+}
+
+.underlay {
+  @add-mixin cover;
+
+  background-color: $white;
   transition: background 500ms;
 
   &:hover {
@@ -14,6 +19,13 @@
   }
 }
 
+.overlay {
+  @add-mixin linkOverlay;
+
+  position: relative;
+  display: flex;
+}
+
 .poster {
   flex: 0 0 170px;
   margin-right: 20px;
diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.js b/frontend/src/Search/Artist/AddNewArtistSearchResult.js
index 4b2319127..865e22ce0 100644
--- a/frontend/src/Search/Artist/AddNewArtistSearchResult.js
+++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.js
@@ -92,11 +92,13 @@ class AddNewArtistSearchResult extends Component {
     const height = calculateHeight(230, isSmallScreen);
 
     return (
-      <div>
+      <div className={styles.searchResult}>
         <Link
-          className={styles.searchResult}
+          className={styles.underlay}
           {...linkProps}
-        >
+        />
+
+        <div className={styles.overlay}>
           {
             isSmallScreen ?
               null :
@@ -190,7 +192,7 @@ class AddNewArtistSearchResult extends Component {
               />
             </div>
           </div>
-        </Link>
+        </div>
 
         <AddNewArtistModal
           isOpen={isNewAddArtistModalOpen && !isExistingArtist}