function WatchList() {

  // Saved movies are stored in localStorage
  let watchList = JSON.parse(localStorage.getItem("watchList"));

  return (
    <div className="page-watch-list wrapper">
            {(watchList === null || watchList.length === 0 || watchList === '[]' || watchList === '' )  ?
                // Show Error message if user has not added movies
                <div className="watch-list-error"> 
                    <h1 className="error">Oops!</h1>
                  <h1>Looks like your list is empty. </h1>
                  <p>Add movies to your Watch List by clicking the '&#128140;' button on any movie page.</p>
                </div>
              :
                // Show Watch List if user has added movies
                <div>
                    <h1>My Watch List</h1>
                    {watchList.map(laterMovie => (
                      <div className="laterMovie">
                        <img src={`https://image.tmdb.org/t/p/w154${laterMovie.movie.poster_path}`} alt={laterMovie.movie.title} width="92"/>
                        <div className="laterTitle">
                          <p key={laterMovie.movie.id}>{laterMovie.movie.title}</p>
                        </div>
                        <Link to={`/movies/${laterMovie.movie.id}`}>
                          <button className="list-btn">View</button>
                        </Link>
                      </div>
                    ))}
              </div> 
            }
    </div>
  );
}