From 36306182492986ea27bd9c05bf9434afa2c438c7 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Sat, 25 Aug 2018 14:28:05 -0400
Subject: [PATCH] Added a ref the the Add Some Movies link on the Movie
 WishList page that is automatically focused on componentDidMount when it
 exists

---
 src/primitives/TabList.js     |  6 +++---
 src/wishlist/MovieWishlist.js | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/primitives/TabList.js b/src/primitives/TabList.js
index 514e0a9..c235ef8 100644
--- a/src/primitives/TabList.js
+++ b/src/primitives/TabList.js
@@ -27,9 +27,9 @@ class TabList extends Component {
     }
 
     componentDidUpdate() {
-        if (!this.selectedTabRef) return;
-
-        this.selectedTabRef.focus();
+        if (this.selectedTabRef) {
+            this.selectedTabRef.focus();
+        }
     }
 
     setSelectedTabRef(element) {
diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
index 0e6c770..6bc43ff 100644
--- a/src/wishlist/MovieWishlist.js
+++ b/src/wishlist/MovieWishlist.js
@@ -19,11 +19,24 @@ class MovieWishlist extends Component {
             movieIdInEdit: null
         };
 
+        this.addSomeMoviesLink = null;
+
+        this.setAddSomeMoviesLinkRef = this.setAddSomeMoviesLinkRef.bind(this);
         this.handleShowEditor = this.handleShowEditor.bind(this);
         this.handleHideEditor = this.handleHideEditor.bind(this);
         this.handleUpdateMovie = this.handleUpdateMovie.bind(this);
     }
 
+    componentDidMount() {
+        if (this.addSomeMoviesLink) {
+            this.addSomeMoviesLink.focus();
+        }
+    }
+
+    setAddSomeMoviesLinkRef(element) {
+        this.addSomeMoviesLink = element;
+    }
+
     handleShowEditor(movieId) {
         this.setState({
             showEditor: true,
@@ -109,7 +122,9 @@ class MovieWishlist extends Component {
                         // No movies yet in the WishList
                         : <div aria-labelledby="noMoviesText addLink" className="no-movies-container">
                             <span id="noMoviesText">
-                                No Movies in your Wish List! <Link id="addLink" to="/browse">Add some Movies!</Link>
+                                No Movies in your Wish List! <Link id="addLink" to="/browse"
+                                        aria-label="Add some movies to your wishlist now!"
+                                        innerRef={this.setAddSomeMoviesLinkRef}>Add some Movies!</Link>
                             </span>
                         </div>
                     }