-
-
- {this.state.movieInfo.map((info) => {
- if (info.movies.length > 0) {
- return (
-
- );
- }
- })}
-
-
+ // 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 (
+
+
+
+
- );
- }
+ {/*
+
+ {this.state.movieInfo.map((info) => {
+ if (info.movies.length > 0) {
+ return (
+
+ )
+ }
+ })}
+
*/}
+
+
+ )
}
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
diff --git a/src/index.js b/src/index.js
index 07d5f11..5e6455f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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 = (
-
+
-);
+)
-ReactDOM.render(app, document.getElementById('app'));
+ReactDOM.render(app, document.getElementById('app'))
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 85972b8..5b180a5 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -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)
}
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index cc4952b..ddbc134 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -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,
- };
+ }
}
diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js
index 708e628..99e3191 100644
--- a/src/store/reducers/index.js
+++ b/src/store/reducers/index.js
@@ -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
diff --git a/src/store/reducers/reducerHeaderMovie.js b/src/store/reducers/reducerHeaderMovie.js
new file mode 100644
index 0000000..1c752fb
--- /dev/null
+++ b/src/store/reducers/reducerHeaderMovie.js
@@ -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
+ }
+}
diff --git a/src/store/reducers/reducerNetflixOriginals.js b/src/store/reducers/reducerNetflixOriginals.js
index b769226..7792681 100644
--- a/src/store/reducers/reducerNetflixOriginals.js
+++ b/src/store/reducers/reducerNetflixOriginals.js
@@ -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
}
}