psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored Header component

Browse Source
This commit is contained in:
andres alcocer
2021-10-07 12:59:45 -04:00
parent f3ac25f825
commit 5f7afb7e46
11 changed files with 287 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/DisplayMovieRow.js
View File

@@ -71,7 +71,7 @@ export default class DisplayMovieRow extends Component {
slideToClickedSlide={false}
pagination={{ clickable: true }}
>
{this.props.movies.map((movie, idx) => {
{this.props.movies && this.props.movies.map((movie, idx) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (

61
src/components/Header.js
View File

@@ -1,34 +1,45 @@
import React from 'react';
import React from 'react'
import PlayLogo from '../static/images/play-button.svg';
import AddLogo from '../static/images/add.svg';
import PlayLogo from '../static/images/play-button.svg'
import AddLogo from '../static/images/add.svg'
export default function Header(props) {
const Header = ({ movie }) => {
const backgroundStyle = {
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
backgroundPosition: 'center',
};
}
return (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{props.movie.name}</h1>
<button
onClick={() => alert('not a movie!')}
className="header__container-btnPlay"
>
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
movie && (
<header
style={{
backgroundSize: 'cover',
backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
backgroundPosition: 'center',
}}
className='header'
>
<div className='header__container'>
<h1 className='header__container-heading'>{movie.name}</h1>
<button
onClick={() => alert('not a movie!')}
className='header__container-btnPlay'
>
<PlayLogo className='header__container-btnMyList-play' />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>
</header>
);
<button className='header__container-btnMyList'>
<AddLogo className='header__container-btnMyList-add' />
My List
</button>
<p className='header__container-overview'>{movie.overview}</p>
</div>
<div className='header--fadeBottom'></div>
</header>
)
)
}
export default Header

273
src/components/MainContent.js
View File

@@ -1,10 +1,12 @@
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useDispatch, useSelector } from 'react-redux'
import * as movieActions from '../store/actions'
// import { bindActionCreators } from 'redux'
// import { connect } from 'react-redux'
import Header from './Header';
import Footer from './Footer';
import Header from './Header'
import Footer from './Footer'
import {
fetchNetflixOriginals,
fetchTrending,
@@ -13,128 +15,144 @@ import {
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies,
} from '../store/actions/index';
import DisplayMovieRow from './DisplayMovieRow';
} from '../store/actions/index'
import DisplayMovieRow from './DisplayMovieRow'
class MainContent extends Component {
state = {
/** Will hold our chosen movie to display on the header */
selectedMovie: {},
movieInfo: [
{
title: 'Netflix Originals',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
movies: [],
},
{
title: 'Trending Now',
url: `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`,
movies: [],
},
{
title: 'Top Rated',
url: `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`,
movies: [],
},
{
title: 'Action Movies',
url: `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`,
movies: [],
},
{
title: 'Comedy Movies',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`,
movies: [],
},
{
title: 'Horror Movies',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`,
movies: [],
},
{
title: 'Documentaries',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`,
movies: [],
},
],
};
const MainContent = () => {
// const [netflixOriginals, setNetflixOriginals] = useState([])
const headerMovie = useSelector((state) => state.headerMovie)
const netflixOriginals = useSelector((state) => state.netflixOriginals)
componentDidMount = async () => {
await this.getMovie();
await this.props.fetchNetflixOriginals();
await this.props.fetchTrending();
await this.props.fetchTopRated();
await this.props.fetchActionMovies();
await this.props.fetchComedyMovies();
await this.props.fetchDocumentaries();
await this.props.fetchHorrorMovies();
const dispatch = useDispatch()
const newMoviesArray = this.state.movieInfo.map((movie) => {
if (movie.title === 'Netflix Originals') {
movie.movies.push(...this.props.netflixOriginals.data);
}
if (movie.title === 'Trending Now') {
movie.movies.push(...this.props.trending.data);
}
if (movie.title === 'Top Rated') {
movie.movies.push(...this.props.topRated.data);
}
if (movie.title === 'Action Movies') {
movie.movies.push(...this.props.actionMovies.data);
}
if (movie.title === 'Comedy Movies') {
movie.movies.push(...this.props.comedyMovies.data);
}
if (movie.title === 'Documentaries') {
movie.movies.push(...this.props.documentaries.data);
}
if (movie.title === 'Horror Movies') {
movie.movies.push(...this.props.horrorMovies.data);
}
return movie;
});
await this.setState({ movieInfo: newMoviesArray });
};
useEffect(() => {
dispatch(movieActions.fetchNetflixOriginals())
dispatch(movieActions.fetchHeaderMovie())
}, [dispatch])
getMovie = () => {
/** Movie Id for the Narcos series */
const movieId = 63351;
/** Make Api call to retrieve the details for a single movie */
const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`;
axios
.get(url)
.then((res) => {
const movieData = res.data;
this.setState({ selectedMovie: movieData });
})
.catch((error) => {
console.log(error);
});
};
// state = {
// /** Will hold our chosen movie to display on the header */
// selectedMovie: {},
// movieInfo: [
// {
// title: 'Netflix Originals',
// url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
// movies: [],
// },
// {
// title: 'Trending Now',
// url: `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`,
// movies: [],
// },
// {
// title: 'Top Rated',
// url: `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`,
// movies: [],
// },
// {
// title: 'Action Movies',
// url: `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`,
// movies: [],
// },
// {
// title: 'Comedy Movies',
// url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`,
// movies: [],
// },
// {
// title: 'Horror Movies',
// url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`,
// movies: [],
// },
// {
// title: 'Documentaries',
// url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`,
// movies: [],
// },
// ],
// };
render() {
return (
<div className="container">
<Header movie={this.state.selectedMovie} />
<div className="movieShowcase">
{this.state.movieInfo.map((info) => {
if (info.movies.length > 0) {
return (
<DisplayMovieRow
selectMovieHandler={this.props.selectMovieHandler}
key={info.title}
title={info.title}
url={info.url}
movies={info.movies}
/>
);
}
})}
</div>
<Footer />
// componentDidMount = async () => {
// await this.getMovie()
// await this.props.fetchNetflixOriginals()
// await this.props.fetchTrending()
// await this.props.fetchTopRated()
// await this.props.fetchActionMovies()
// await this.props.fetchComedyMovies()
// await this.props.fetchDocumentaries()
// await this.props.fetchHorrorMovies()
// const newMoviesArray = this.state.movieInfo.map((movie) => {
// if (movie.title === 'Netflix Originals') {
// movie.movies.push(...this.props.netflixOriginals.data)
// }
// if (movie.title === 'Trending Now') {
// movie.movies.push(...this.props.trending.data)
// }
// if (movie.title === 'Top Rated') {
// movie.movies.push(...this.props.topRated.data)
// }
// if (movie.title === 'Action Movies') {
// movie.movies.push(...this.props.actionMovies.data)
// }
// if (movie.title === 'Comedy Movies') {
// movie.movies.push(...this.props.comedyMovies.data)
// }
// if (movie.title === 'Documentaries') {
// movie.movies.push(...this.props.documentaries.data)
// }
// if (movie.title === 'Horror Movies') {
// movie.movies.push(...this.props.horrorMovies.data)
// }
// return movie
// })
// await this.setState({ movieInfo: newMoviesArray })
// }
// getMovie = () => {
// /** Movie Id for the Narcos series */
// const movieId = 63351
// /** Make Api call to retrieve the details for a single movie */
// const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`
// axios
// .get(url)
// .then((res) => {
// const movieData = res.data
// this.setState({ selectedMovie: movieData })
// })
// .catch((error) => {
// console.log(error)
// })
// }
return (
<div className='container'>
<Header movie={headerMovie} />
<div className='movieShowcase'>
<DisplayMovieRow
title='Netflix Originals'
movies={netflixOriginals.data}
/>
</div>
);
}
{/* <Header movie={this.state.selectedMovie} />
<div className='movieShowcase'>
{this.state.movieInfo.map((info) => {
if (info.movies.length > 0) {
return (
<DisplayMovieRow
selectMovieHandler={this.props.selectMovieHandler}
key={info.title}
title={info.title}
url={info.url}
movies={info.movies}
/>
)
}
})}
</div> */}
<Footer />
</div>
)
}
const mapStateToProps = (state) => {
@@ -146,8 +164,8 @@ const mapStateToProps = (state) => {
comedyMovies: state.comedy,
documentaries: state.documentary,
horrorMovies: state.horror,
};
};
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
@@ -161,7 +179,8 @@ const mapDispatchToProps = (dispatch) => {
fetchHorrorMovies,
},
dispatch
);
};
)
}
export default connect(mapStateToProps, mapDispatchToProps)(MainContent);
// export default connect(mapStateToProps, mapDispatchToProps)(MainContent)
export default MainContent

32
src/index.js
View File

@@ -1,26 +1,26 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import '@babel/polyfill';
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import '@babel/polyfill'
import reducers from './store/reducers';
import AppRouter from './AppRouter';
import reducers from './store/reducers'
import AppRouter from './AppRouter'
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
// Import main sass file to apply global styles
import './static/sass/style.scss';
import './static/sass/style.scss'
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
const store = createStore(reducers, applyMiddleware(ReduxThunk))
const app = (
<Provider store={createStoreWithMiddleware(reducers)}>
<Provider store={store}>
<AppRouter />
</Provider>
);
)
ReactDOM.render(app, document.getElementById('app'));
ReactDOM.render(app, document.getElementById('app'))

3
src/pages/Home.js
View File

@@ -8,10 +8,7 @@ const Home = () => {
const [toggleModal, setToggleModal] = useState(false)
const [movieOverview, setMovieOverview] = useState({})
/* Get the appropriate details for a specific movie that was clicked */
const selectMovieHandler = async (movie) => {
console.log('movei is', movie)
setToggleModal(true)
setMovieOverview(movie)
}

101
src/store/actions/index.js
View File

@@ -1,98 +1,117 @@
import axios from '../../axios-movies';
import axios from '../../axios-movies'
export const FETCH_TRENDING = 'FETCH_TRENDING';
export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS';
export const FETCH_TOP_RATED = 'FETCH_TOP_RATED';
export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES';
export const FETCH_COMEDY_MOVIES = 'FETCH_COMEDY_MOVIES';
export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES';
export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES';
export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES';
export const FETCH_HEADER_MOVIE = 'FETCH_HEADER_MOVIE'
export const FETCH_TRENDING = 'FETCH_TRENDING'
export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS'
export const FETCH_TOP_RATED = 'FETCH_TOP_RATED'
export const FETCH_ACTION_MOVIES = 'FETCH_ACTION_MOVIES'
export const FETCH_COMEDY_MOVIES = 'FETCH_COMEDY_MOVIES'
export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES'
export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES'
export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES'
export function fetchTrending() {
export const fetchHeaderMovie = () => {
const movieId = 63351
return async (dispatch) => {
try {
const request = await axios.get(
`tv/${movieId}?api_key=${process.env.API_KEY}`
)
dispatch({ type: FETCH_HEADER_MOVIE, payload: request })
} catch (error) {
console.log('error', error)
}
}
}
export const fetchNetflixOriginals = () => {
return async (dispatch) => {
try {
const request = await axios.get(
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
)
dispatch({ type: FETCH_NETFLIX_ORIGINALS, payload: request })
} catch (error) {
console.log('error', error)
}
}
}
export const fetchTrending = () => {
const request = axios.get(
`/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`
);
)
return {
type: FETCH_TRENDING,
payload: request,
};
}
}
export function fetchNetflixOriginals() {
const request = axios.get(
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
);
return {
type: FETCH_NETFLIX_ORIGINALS,
payload: request,
};
}
export function fetchTopRated() {
export const fetchTopRated = () => {
const request = axios.get(
`/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`
);
)
return {
type: FETCH_TOP_RATED,
payload: request,
};
}
}
export function fetchActionMovies() {
export const fetchActionMovies = () => {
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`
);
)
return {
type: FETCH_ACTION_MOVIES,
payload: request,
};
}
}
export function fetchComedyMovies() {
export const fetchComedyMovies = () => {
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=35`
);
)
return {
type: FETCH_COMEDY_MOVIES,
payload: request,
};
}
}
export function fetchHorrorMovies() {
export const fetchHorrorMovies = () => {
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=27`
);
)
return {
type: FETCH_HORROR_MOVIES,
payload: request,
};
}
}
export function fetchRomanceMovies() {
export const fetchRomanceMovies = () => {
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=10749`
);
)
return {
type: FETCH_ROMANCE_MOVIES,
payload: request,
};
}
}
export function fetchDocumentaries() {
export const fetchDocumentaries = () => {
const request = axios.get(
`/discover/movie?api_key=${process.env.API_KEY}&with_genres=99`
);
)
return {
type: FETCH_DOCUMENTARIES,
payload: request,
};
}
}

24
src/store/reducers/index.js
View File

@@ -1,12 +1,13 @@
import { combineReducers } from 'redux';
import TrendingReducer from './reducerTrending';
import NetflixOriginalsReducer from './reducerNetflixOriginals';
import TopRatedReducer from './reducerTopRated';
import ActionMoviesReducer from './reducerActionMovies';
import ComedyMoviesReducer from './reducerComedyMovies';
import HorrorMoviesReducer from './reducerHorrorMovies';
import RomanceMoviesReducer from './reducerRomanceMovies';
import DocumentaryReducer from './reducerDocumentary';
import { combineReducers } from 'redux'
import TrendingReducer from './reducerTrending'
import NetflixOriginalsReducer from './reducerNetflixOriginals'
import TopRatedReducer from './reducerTopRated'
import ActionMoviesReducer from './reducerActionMovies'
import ComedyMoviesReducer from './reducerComedyMovies'
import HorrorMoviesReducer from './reducerHorrorMovies'
import RomanceMoviesReducer from './reducerRomanceMovies'
import DocumentaryReducer from './reducerDocumentary'
import HeaderMovieReducer from './reducerHeaderMovie'
const rootReducer = combineReducers({
trending: TrendingReducer,
@@ -17,6 +18,7 @@ const rootReducer = combineReducers({
horror: HorrorMoviesReducer,
romance: RomanceMoviesReducer,
documentary: DocumentaryReducer,
});
headerMovie: HeaderMovieReducer,
})
export default rootReducer;
export default rootReducer

11
src/store/reducers/reducerHeaderMovie.js Normal file
View File

@@ -0,0 +1,11 @@
import { FETCH_HEADER_MOVIE } from '../actions/index'
export default function (state = {}, action) {
switch (action.type) {
case FETCH_HEADER_MOVIE:
const data = action.payload.data
return { ...state, ...data }
default:
return state
}
}

8
src/store/reducers/reducerNetflixOriginals.js
View File

@@ -1,11 +1,11 @@
import { FETCH_NETFLIX_ORIGINALS } from '../actions/index';
import { FETCH_NETFLIX_ORIGINALS } from '../actions/index'
export default function (state = {}, action) {
switch (action.type) {
case FETCH_NETFLIX_ORIGINALS:
const data = action.payload.data.results;
return { ...state, data };
const data = action.payload.data.results
return { ...state, data }
default:
return state;
return state
}
}