move to movie

add button that jumps to movie in the list if the chose movie already
exists.

Author: deradre

services/gui/app/views/public/app.js

@@ -84,11 +84,22 @@ function suggestTitle() {
 }
 
 const renderSuggestion = suggestion => {
+  const bIsInWatchlist = isInWatchList(suggestion);
   return `
 <div class="suggestion flex-parent">
     <div class="flex-child short-and-fixed my-auto d-flex">
-        <i class="fas ${isInWatchList(suggestion) ? '' : 'fa-plus-circle'} addSuggestionButton my-auto ml-2"></i>
-        <img loading="lazy" class="ml-2 my-auto" src="${suggestion.Poster}" width="33px" height="50px">
+        <a ${
+          bIsInWatchlist ? `href='#watch-list-item-${suggestion.imdbID}'` : ""
+        } class=" my-auto ml-2">
+          <i class="fas ${
+            bIsInWatchlist
+              ? "fa-arrow-alt-circle-down text-secondary"
+              : "fa-plus-circle"
+          } addSuggestionButton"></i>
+        </a>
+        <img loading="lazy" class="ml-2 my-auto" src="${
+          suggestion.Poster
+        }" width="33px" height="50px">
     </div>
     <div class="flex-child long-and-truncated-with-child my-auto ml-2">
         <h4 class="my-1">${suggestion.Title}</h4>
@@ -105,11 +116,12 @@ const onSuggestionSelected = suggestion => {
       suggestion.imdbID,
       suggestion.Year,
       suggestion.Poster
-    )
+    );
   }
 };
 
-const isInWatchList = suggestion => moveez.titles.some(title => title.imdbID === suggestion.imdbID);
+const isInWatchList = suggestion =>
+  moveez.titles.some(title => title.imdbID === suggestion.imdbID);
 
 //add a new title
 function addTitle(name, imdbID, year, poster) {

services/gui/app/views/title/index.ejs

@@ -21,7 +21,7 @@
         <div id="watchList" class="col-lg-8">
             <% titles.forEach(function(title){ %>
                 <% if(!title.seen) { %>
-                    <div class="card mb-3">
+                    <div id="watch-list-item-<%=title.imdbID%>" class="card mb-3">
                         <div class="row no-gutters">
                             <div class="col maximumWidthForPoster">
                                 <img src="<%= title.poster %>" class="card-img posterSize" loading="lazy" alt="cover">

services/gui/package.json

@@ -52,6 +52,7 @@
     "mocha": "^2.4.5",
     "nodemon": "^1.18.4",
     "nyc": "^11.4.1",
+    "prettier": "^1.18.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "sinon": "^7.2.7"