Finish adding router for movies

src/actions/index.js

@@ -6,6 +6,7 @@ export const ADD_FILTER = 'ADD_FILTER';
 export const REMOVE_FILTER = 'REMOVE_FILTER';
 export const RESET_FILTER = 'RESET_FILTER';
 export const ADD_MOVIES = 'ADD_MOVIES';
+export const CURRENT_MOVIE = 'CURRENT_MOVIE';
 
 export const loadTrending = movie => ({ type: GET_TRENDING, movie });
 export const addMovies = movies => ({ type: ADD_MOVIES, movies });
@@ -15,3 +16,4 @@ export const loadUpcoming = movies => ({ type: GET_UPCOMING, movies });
 export const addFilter = filter => ({ type: ADD_FILTER, filter });
 export const removeFilter = filter => ({ type: REMOVE_FILTER, filter });
 export const resetFilter = filter => ({ type: RESET_FILTER, filter });
+export const currentMovie = movie => ({ type: CURRENT_MOVIE, movie });

src/components/BigHero.js

@@ -1,63 +1,96 @@
+/* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
 import '../styles/bighero/BigHero.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar, faPlay } from '@fortawesome/free-solid-svg-icons';
 
 const BigHero = ({
- title, genres, description, backDrop, poster, rating, home, video,
-}) => (
- <div className={`position-relative hero ${home ? 'home-screen' : ''}`}>
- <div className="hero-img">
- <img className="w-100 backdrop" src={`${process.env.REACT_APP_IMG_URL}${backDrop}`} alt="BackDrop" />
- </div>
-
- <div className="position-absolute info-cont d-flex">
- <img src={`${process.env.REACT_APP_POSTER_URL}${poster}`} alt="Poster" />
-
- <div className="w-75 text-justify info">
- <h1 className="title">{title}</h1>
-
- <div className="d-flex genres">
- {genres.map(genre => (
- <p key={genre}>
- <button type="button" name={genre}>
- {genre}
- </button>
- </p>
- ))}
- <p className="rating">
- <FontAwesomeIcon className="rating-star" icon={faStar} />
- {rating}
- </p>
- </div>
+ title, genres, description, backDrop, poster, rating, home, video, ismovie, isMovieGenre,
+}) => {
+ const genresInMoviePath = () => {
+ if (isMovieGenre) {
+ return genres.map(genre => (
+ <p key={genre.id}>
+ <button type="button" name={genre.name}>
+ {genre.name}
+ </button>
+ </p>
+ ));
+ }
 
- <p className="desc">{description}</p>
+ return genres.map(genre => (
+ <p key={genre}>
+ <button type="button" name={genre}>
+ {genre}
+ </button>
+ </p>
+ ));
+ };
 
+ const isThereVideo = () => {
+ if (video !== undefined) {
+ return (
  <div className="trailer-cont w-25">
  <a href={`https://www.youtube.com/watch?v=${video.key}`} className="trailer d-flex align-items-center" target="_blank" rel="noreferrer">
  <FontAwesomeIcon className="play-icon" icon={faPlay} />
  Trailer
  </a>
  </div>
+ );
+ }
+
+ return '';
+ };
+
+ return (
+ <>
+ <div className={`position-relative hero ${home ? 'home-screen' : ''} ${ismovie ? 'd-none' : ''}`}>
+ <div className="hero-img">
+ <img className="w-100 backdrop" src={`${process.env.REACT_APP_IMG_URL}${backDrop}`} alt="BackDrop" />
+ </div>
+
+ <div className="position-absolute info-cont d-flex">
+ <img src={`${process.env.REACT_APP_POSTER_URL}${poster}`} alt="Poster" />
+
+ <div className="w-75 text-justify info">
+ <h1 className="title">{title}</h1>
+
+ <div className="d-flex genres">
+ {genresInMoviePath()}
+ <p className="rating">
+ <FontAwesomeIcon className="rating-star" icon={faStar} />
+ {rating}
+ </p>
+ </div>
+
+ <p className="desc">{description}</p>
+
+ {isThereVideo()}
+ </div>
+ </div>
  </div>
- </div>
- </div>
-);
+ </>
+ );
+};
 
 BigHero.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  backDrop: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
- genres: PropTypes.arrayOf(PropTypes.string).isRequired,
+ genres: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]).isRequired,
  rating: PropTypes.number.isRequired,
  home: PropTypes.bool,
  video: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+ ismovie: PropTypes.bool,
+ isMovieGenre: PropTypes.bool,
 };
 
 BigHero.defaultProps = {
  home: false,
+ ismovie: false,
+ isMovieGenre: false,
 };
 
 export default BigHero;

src/components/Navigation.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import '../styles/navigation/Navigation.css';
 import FilterModal from '../containers/FilterModal';
 
-const Navigation = () => (
+const Navigation = ({ location }) => (
  <>
- <div className="navigation-cont d-flex justify-content-between">
+ <div className={`navigation-cont justify-content-between ${location.pathname.includes('/movie') ? 'd-none' : 'd-flex'}`}>
  <div className="navigation">
  <Link to="/">Popular</Link>
  <Link to="/top">Top Rated</Link>
@@ -16,4 +17,8 @@ const Navigation = () => (
  </>
 );
 
-export default Navigation;
+Navigation.propTypes = {
+ location: PropTypes.oneOfType([PropTypes.object]).isRequired,
+};
+
+export default withRouter(Navigation);

src/containers/Movie.js

@@ -0,0 +1,65 @@
+/* eslint-disable max-len */
+import React, { useState, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import BigHero from '../components/BigHero';
+import Loading from '../components/Loading';
+import { currentMovie } from '../actions';
+import '../styles/movie/Movie.css';
+
+const Movie = ({
+ movie, match, history, addMovie,
+}) => {
+ const [loading, setLoading] = useState(true);
+ const [videoURL, setVideoURL] = useState({
+ key: '',
+ });
+
+ useEffect(async () => {
+ await axios.get(`${process.env.REACT_APP_DETAILS}/${match.params.id}?api_key=${process.env.REACT_APP_API_KEY}&append_to_response=videos`)
+ .then(response => {
+ addMovie(response.data);
+ const [vid] = response.data.videos.results.filter(obj => obj.site === 'YouTube' && obj.type === 'Trailer');
+ setVideoURL(vid);
+ setLoading(false);
+ });
+ }, []);
+
+ if (loading) {
+ return <Loading nothing />;
+ }
+
+ const {
+ poster_path: poster, title, vote_average: rating, genres, backdrop_path: backDrop, overview,
+ } = movie;
+
+ return (
+ <>
+ <div className="position-relative">
+ <BigHero title={title} rating={rating} genres={genres} poster={poster} video={videoURL} backDrop={backDrop} description={overview} home isMovieGenre />
+ <button type="button" className="position-absolute back-btn" onClick={() => history.goBack()}>
+ <FontAwesomeIcon icon={faChevronLeft} />
+ </button>
+ </div>
+ </>
+ );
+};
+
+Movie.propTypes = {
+ match: PropTypes.oneOfType([PropTypes.object]).isRequired,
+ movie: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+ history: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+ addMovie: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({ movie: state.movies });
+
+const mapDipatchToProps = dispatch => ({
+ addMovie: movie => dispatch(currentMovie(movie)),
+});
+
+export default connect(mapStateToProps, mapDipatchToProps)(withRouter(Movie));

src/containers/MoviePoster.js

@@ -1,24 +1,17 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 import GenreList from '../helpers/genres/genre';
-import MovieModal from '../components/MovieModal';
-import getVideo from '../helpers/getVideo';
-
-const MoviePoster = ({ movie }) => {
- const [showModal, setShowModal] = useState(false);
- const [videoURL, setVideoURL] = useState({
- key: '',
- });
 
+const MoviePoster = ({ movie, history }) => {
  const {
  id, poster_path: poster, title, vote_average: rating, genre_ids: genreIds,
  } = movie;
 
  const switcher = () => {
- setShowModal(!showModal);
- getVideo(id, setVideoURL);
+ history.push(`/movie/${id}`);
  };
 
  return (
@@ -48,13 +41,13 @@ const MoviePoster = ({ movie }) => {
  </ul>
  </div>
  </div>
- <MovieModal showModal={showModal} switcher={switcher} movie={movie} video={videoURL} />
  </li>
  );
 };
 
 MoviePoster.propTypes = {
  movie: PropTypes.oneOfType([PropTypes.object]).isRequired,
+ history: PropTypes.oneOfType([PropTypes.object]).isRequired,
 };
 
-export default MoviePoster;
+export default withRouter(MoviePoster);

src/containers/Trending.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import '../styles/main/Main.css';
 import { topTrending } from '../helpers/api_methods/api';
@@ -9,7 +10,9 @@ import BigHero from '../components/BigHero';
 import GenreList from '../helpers/genres/genre';
 import Loading from '../components/Loading';
 
-const Trending = ({ movie, loader }) => {
+const Trending = ({
+ movie, loader, location,
+}) => {
  const [isLoading, setLoading] = useState(true);
  const [videoURL, setVideoURL] = useState({
  key: '',
@@ -27,16 +30,19 @@ const Trending = ({ movie, loader }) => {
  return <Loading nothing />;
  }
 
+ const { pathname } = location;
+
  return (
  <>
- <BigHero title={title} backDrop={backDrop} poster={poster} rating={rating} description={overview} genres={GenreList(movie.genre_ids)} video={videoURL} home />
+ <BigHero title={title} backDrop={backDrop} poster={poster} rating={rating} description={overview} genres={GenreList(movie.genre_ids)} video={videoURL} home ismovie={pathname.includes('/movie/')} />
  </>
  );
 };
 
 Trending.propTypes = {
  movie: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
  loader: PropTypes.func.isRequired,
+ location: PropTypes.oneOfType([PropTypes.object]).isRequired,
 };
 
 const mapStateToProps = state => ({ movie: state.trending });
@@ -45,4 +51,4 @@ const mapDispatchToProps = dispatch => ({
  loader: movie => dispatch(loadTrending(movie)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(Trending);
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Trending));

src/reducers/movies.js

@@ -1,5 +1,5 @@
 import {
- GET_UPCOMING, GET_POPULAR, GET_TOP_RATED, ADD_MOVIES,
+ GET_UPCOMING, GET_POPULAR, GET_TOP_RATED, ADD_MOVIES, CURRENT_MOVIE,
 } from '../actions';
 
 const moviesReducer = (state = [], action) => {
@@ -12,6 +12,8 @@ const moviesReducer = (state = [], action) => {
  return action.movies;
  case GET_UPCOMING:
  return action.movies;
+ case CURRENT_MOVIE:
+ return action.movie;
  default:
  return state;
  }

src/routes/Routes.js

@@ -5,6 +5,7 @@ import Popular from '../containers/Popular';
 import TopRated from '../containers/TopRated';
 import Upcoming from '../containers/Upcoming';
 import Navigation from '../components/Navigation';
+import Movie from '../containers/Movie';
 
 const Routes = () => (
  <BrowserRouter>
@@ -14,6 +15,7 @@ const Routes = () => (
  <Route path="/" component={Popular} exact />
  <Route path="/top" component={TopRated} />
  <Route path="/upcoming" component={Upcoming} />
+ <Route path="/movie/:id" component={Movie} />
  </Switch>
  <div id="modalsContainer" />
  </BrowserRouter>