diff --git a/src/components/DisplayMovieRow.js b/src/components/DisplayMovieRow.tsx similarity index 87% rename from src/components/DisplayMovieRow.js rename to src/components/DisplayMovieRow.tsx index 1e58d20..f2e34aa 100644 --- a/src/components/DisplayMovieRow.js +++ b/src/components/DisplayMovieRow.tsx @@ -4,10 +4,24 @@ import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper' import { useViewport } from '../hooks/useViewport' +import { IMovieDetails } from '../store/slices/movieDetailsSlice' + +interface IDisplayMovie { + title: string + isNetflixMovies?: boolean + movies: IMovieDetails[] + selectMovieHandler?: (movie: IMovieDetails) => void +} + // install Swiper components SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]) -const DisplayMovieRow = ({ title, isNetflixMovies, movies, selectMovieHandler }) => { +const DisplayMovieRow = ({ + title, + isNetflixMovies, + movies, + selectMovieHandler, +}: IDisplayMovie) => { const [windowDimensions] = useViewport() const { width } = windowDimensions diff --git a/src/components/MainContent.js b/src/components/MainContent.tsx similarity index 70% rename from src/components/MainContent.js rename to src/components/MainContent.tsx index 0221abf..5fc76c4 100644 --- a/src/components/MainContent.js +++ b/src/components/MainContent.tsx @@ -1,14 +1,17 @@ import React, { useEffect } from 'react' -import * as actionMovies from '../store/slices/actionMovieSlice' +import * as actionMoviesSlice from '../store/slices/actionMovieSlice' +import * as movieDetailsSlice from '../store/slices/movieDetailsSlice' +import * as netflixOriginalsSlice from '../store/slices/netflixOriginalsSlice' +import * as trendingSlice from '../store/slices/trendingSlice' import { useAppSelector, useAppDispatch } from '../store' import Header from './Header' import DisplayMovieRow from './DisplayMovieRow' -const MainContent = ({ selectMovieHandler }) => { - // const { movieDetails } = useSelector((state) => state.movieDetails) - // const netflixOriginals = useSelector((state) => state.netflixOriginals) - // const trending = useSelector((state) => state.trending) +const MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => { + const { movieDetails } = useAppSelector((state) => state.movieDetails) + const netflixOriginals = useAppSelector((state) => state.netflixOriginals) + const trending = useAppSelector((state) => state.trending) // const topRated = useSelector((state) => state.topRated) const actionMoviesState = useAppSelector((state) => state.action) // const comedyMovies = useSelector((state) => state.comedy) @@ -19,11 +22,17 @@ const MainContent = ({ selectMovieHandler }) => { const dispatch = useAppDispatch() useEffect(() => { - // dispatch(movieActions.fetchMovieDetails('tv', '63351')) - // dispatch(movieActions.fetchNetflixOriginals()) - // dispatch(movieActions.fetchTrending()) + // dispatch(movieDetailsSlice.getMovieDetailsAsync('tv', '63351')) + dispatch( + movieDetailsSlice.getMovieDetailsAsync({ + mediaType: 'tv', + mediaId: '63351', + }) + ) + dispatch(netflixOriginalsSlice.getNetflixOriginalsAsync()) + dispatch(trendingSlice.getTrendingAsync()) // dispatch(movieActions.fetchTopRated()) - dispatch(actionMovies.getActionMoviesAsync()) + dispatch(actionMoviesSlice.getActionMoviesAsync()) // dispatch(movieActions.fetchComedyMovies()) // dispatch(movieActions.fetchHorrorMovies()) // dispatch(movieActions.fetchRomanceMovies()) @@ -32,9 +41,9 @@ const MainContent = ({ selectMovieHandler }) => { return (
- {/*
*/} +
- {/* { selectMovieHandler={selectMovieHandler} movies={trending.data} /> - { const [toggleModal, setToggleModal] = useState(false) - const [movieDetails, setMovieDetails] = useState({}) + const [movieDetails, setMovieDetails] = useState() - const selectMovieHandler = async (movie) => { + const selectMovieHandler = async (movie: IMovieDetails) => { setToggleModal(true) setMovieDetails(movie) } diff --git a/src/store/index.ts b/src/store/index.ts index 3b79271..c2a8461 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,8 +1,8 @@ import { configureStore } from '@reduxjs/toolkit' import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' -import TrendingReducer from './slices/reducerTrending' -import NetflixOriginalsReducer from './slices/reducerNetflixOriginals' +import TrendingReducer from './slices/trendingSlice' +import NetflixOriginalsReducer from './slices/netflixOriginalsSlice' import TopRatedReducer from './slices/reducerTopRated' import ActionMoviesReducer from './slices/actionMovieSlice' import ComedyMoviesReducer from './slices/reducerComedyMovies' @@ -14,8 +14,8 @@ import MovieDetailsReducer from './slices/movieDetailsSlice' export const store = configureStore({ reducer: { - // trending: TrendingReducer, - // netflixOriginals: NetflixOriginalsReducer, + trending: TrendingReducer, + netflixOriginals: NetflixOriginalsReducer, // topRated: TopRatedReducer, action: ActionMoviesReducer, // comedy: ComedyMoviesReducer, diff --git a/src/store/slices/actionMovieSlice.ts b/src/store/slices/actionMovieSlice.ts index b946e6e..63dd248 100644 --- a/src/store/slices/actionMovieSlice.ts +++ b/src/store/slices/actionMovieSlice.ts @@ -1,21 +1,11 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' import axios from '../../axios-movies' -// import { FETCH_ACTION_MOVIES } from '../actions/index' import { RootState } from '../index' +import { IMovieDetails } from './movieDetailsSlice' -// export default function (state = {}, action: any) { -// switch (action.type) { -// case FETCH_ACTION_MOVIES: -// const data = action.payload.data.results -// return { ...state, data } -// default: -// return state -// } -// } - -const initialState = { - data: [{}], +const initialState: { data: IMovieDetails[] } = { + data: [], } export const getActionMoviesAsync = createAsyncThunk< diff --git a/src/store/slices/movieDetailsSlice.ts b/src/store/slices/movieDetailsSlice.ts index 9aae25a..c3fa08b 100644 --- a/src/store/slices/movieDetailsSlice.ts +++ b/src/store/slices/movieDetailsSlice.ts @@ -2,14 +2,8 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' import axios from '../../axios-movies' import { RootState } from '../index' -import { - FETCH_MOVIE_DETAILS, - FETCH_MOVIE_DETAILS_SUCCESS, - FETCH_MOVIE_DETAILS_FAIL, -} from '../actions/index' -import { string } from 'prop-types' -interface IMovieDetails { +export interface IMovieDetails { backdrop_path?: string poster_path?: string title: any @@ -34,25 +28,6 @@ const media_type = { movie: 'movie', } -// const initialState: IInitialState = { -// isLoading: false, -// movieDetails: [], -// } - -// export default function (state = initialState, action: any) { -// switch (action.type) { -// case FETCH_MOVIE_DETAILS: -// return { ...state, isLoading: true } -// case FETCH_MOVIE_DETAILS_FAIL: -// return { ...state, isLoading: false } -// case FETCH_MOVIE_DETAILS_SUCCESS: -// const movieDetails = action.payload.data -// return { ...state, movieDetails, isLoading: false } -// default: -// return state -// } -// } - const initialState: IInitialState = { isLoading: false, movieDetails: { @@ -73,9 +48,9 @@ const initialState: IInitialState = { export const getMovieDetailsAsync = createAsyncThunk< any, - string, + { mediaType: string; mediaId: string }, { state: RootState } ->('movieDetails/getMovieDetailsAsync', async (mediaType, mediaId) => { +>('movieDetails/getMovieDetailsAsync', async ({ mediaType, mediaId }) => { let urlPath if (mediaType === media_type.movie) urlPath = `/movie/${mediaId}?api_key=${process.env.API_KEY}` diff --git a/src/store/slices/netflixOriginalsSlice.ts b/src/store/slices/netflixOriginalsSlice.ts new file mode 100644 index 0000000..41cd618 --- /dev/null +++ b/src/store/slices/netflixOriginalsSlice.ts @@ -0,0 +1,36 @@ +import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' + +import axios from '../../axios-movies' +import { RootState } from '../index' +import { IMovieDetails } from './movieDetailsSlice' + +const initialState: { data: IMovieDetails[] } = { + data: [], +} + +export const getNetflixOriginalsAsync = createAsyncThunk< + any, + void, + { state: RootState } +>('netflixOriginals/getNetflixOriginals', async () => { + const response = await axios.get( + `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213` + ) + return response.data.results +}) + +const netflixOriginalsSlice = createSlice({ + name: 'netflixOriginals', + initialState, + reducers: {}, + extraReducers: (builder) => { + builder.addCase( + getNetflixOriginalsAsync.fulfilled, + (state, { payload }) => { + state.data = payload + } + ) + }, +}) + +export default netflixOriginalsSlice.reducer diff --git a/src/store/slices/reducerNetflixOriginals.ts b/src/store/slices/reducerNetflixOriginals.ts deleted file mode 100644 index 9cf4255..0000000 --- a/src/store/slices/reducerNetflixOriginals.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FETCH_NETFLIX_ORIGINALS } from '../actions/index' - -export default function (state = {}, action: any) { - switch (action.type) { - case FETCH_NETFLIX_ORIGINALS: - const data = action.payload.data.results - return { ...state, data } - default: - return state - } -} diff --git a/src/store/slices/reducerTrending.ts b/src/store/slices/reducerTrending.ts deleted file mode 100644 index 62c52e0..0000000 --- a/src/store/slices/reducerTrending.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FETCH_TRENDING } from '../actions/index' - -export default function (state = {}, action: any) { - switch (action.type) { - case FETCH_TRENDING: - const data = action.payload.data.results - return { ...state, data } - default: - return state - } -} diff --git a/src/store/slices/trendingSlice.ts b/src/store/slices/trendingSlice.ts new file mode 100644 index 0000000..d088460 --- /dev/null +++ b/src/store/slices/trendingSlice.ts @@ -0,0 +1,33 @@ +import { createSlice, createAsyncThunk } from '@reduxjs/toolkit' + +import axios from '../../axios-movies' +import { RootState } from '../index' +import { IMovieDetails } from './movieDetailsSlice' + +const initialState: { data: IMovieDetails[] } = { + data: [], +} + +export const getTrendingAsync = createAsyncThunk< + any, + void, + { state: RootState } +>('trending/getTrending', async () => { + const response = await axios.get( + `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US` + ) + return response.data.results +}) + +const trendingSlice = createSlice({ + name: 'trending', + initialState, + reducers: {}, + extraReducers: (builder) => { + builder.addCase(getTrendingAsync.fulfilled, (state, { payload }) => { + state.data = payload + }) + }, +}) + +export default trendingSlice.reducer