Added a message for when there are no movies in the wish list so far …

…and link to go to the Browse List to add some. Added a message for when there are no movies in the wish list so far and link to go to the Browse List to add some.
erin-doyle · Mar 17, 2019 · 32ed99b · 32ed99b
1 parent ecef454
commit 32ed99b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 14 deletions.
diff --git a/src/browse/BrowseList.js b/src/browse/BrowseList.js
@@ -9,7 +9,7 @@ const BrowseList = ({ movieList, wishlist, movieActions }) => {
         const inWishlist = !!wishlist[movieId];
 
         return (
-            <Movie movieId={movieId} movie={movie} movieActions={movieActions(movieId, inWishlist)}/>
+            <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, inWishlist)}/>
         );
     });
 };

diff --git a/src/primitives/Movie.js b/src/primitives/Movie.js
@@ -18,13 +18,13 @@ const Movie = ({ movieId, movie, movieActions }) => {
     const imgSrc = `${process.env.PUBLIC_URL}/moviePosters/${movieId}.jpg`;
 
     return (
-        <div key={movieId} className="card mb-3">
+        <div className="card mb-3">
             <div className="row">
                 <div className="col-1"><img src={imgSrc} alt="movie" /></div>
                 <div className="col">
                     <div className="card-body">
                         <h5 className="card-title">{name} ({year})</h5>
-                        <h6 class="card-subtitle mb-2 text-muted">{rating} | {runtime} { genre ? `| ${genre}` : null }</h6>
+                        <h6 className="card-subtitle mb-2 text-muted">{rating} | {runtime} { genre ? `| ${genre}` : null }</h6>
                         <p className="card-text">{description}</p>
                         <p className="card-text text-muted">Director: {director} | Stars: {stars}</p>
 

diff --git a/src/wishlist/MovieEditor.js b/src/wishlist/MovieEditor.js
@@ -53,7 +53,7 @@ class MovieEditor extends Component {
                             <div className="modal-body">
                                 <div className="form-group">
                                     <label>Notes:</label>
-                                    <textarea class="form-control" value={notes} onChange={this.handleChangeNotes} />
+                                    <textarea className="form-control" value={notes} onChange={this.handleChangeNotes} />
                                 </div>
                             </div>
                             <div className="modal-footer">

diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
+import { NavLink, Link } from 'react-router-dom';
 
 import WishList from './WishList';
 import getWishlistActions from './getWishlistActions';
@@ -76,13 +76,16 @@ class MovieWishlist extends Component {
                     </li>
                 </ul>
 
-                <div>
-                    <WishList
-                        movieList={wishlist}
-                        watched={match.params.status === 'watched'}
-                        movieActions={movieActions}
-                    />
-                </div>
+                {Object.keys(wishlist).length
+                    ? <div>
+                        <WishList
+                            movieList={wishlist}
+                            watched={match.params.status === 'watched'}
+                            movieActions={movieActions}
+                        />
+                    </div>
+                    : <p>No Movies in your Wish List! <Link to="/browse">Add some</Link>!</p>
+                }
 
                 { showEditor
                     ? <MovieEditor movie={movieInEditing} updateMovie={this.handleUpdateMovie} />

diff --git a/src/wishlist/WishList.js b/src/wishlist/WishList.js
@@ -10,7 +10,7 @@ const WishList = ({ movieList, watched, movieActions }) => {
     return Object.entries(movieList)
         .filter(isWatched)
         .map(([ movieId, movie ]) =>
-                <Movie movieId={movieId} movie={movie} movieActions={movieActions(movieId, movie.watched)}/>
+                <Movie key={movieId} movieId={movieId} movie={movie} movieActions={movieActions(movieId, movie.watched)}/>
         );
 };
 

diff --git a/src/wishlist/getWishlistActions.js b/src/wishlist/getWishlistActions.js
@@ -9,7 +9,7 @@ const getMovieActions = (showEditor, setAsWatched, setAsUnwatched, handleRemove)
         const removeClickHandler = () => handleRemove(movieId);
 
         return (
-            <div class="btn-group">
+            <div className="btn-group">
                 <button className="btn btn-secondary" onClick={watchClickHandler}>{watchButtonText}</button>
                 <button className="btn btn-secondary" onClick={editClickHandler}>Edit</button>
                 <button className="btn btn-secondary" onClick={removeClickHandler}>Remove</button>