set movie details types

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
 

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 MainContent = ({ selectMovieHandler }: { selectMovieHandler: any }) => {
-  // const { movieDetails } = useSelector((state) => state.movieDetails)
+  const { movieDetails } = useAppSelector((state) => state.movieDetails)
-  // const netflixOriginals = useSelector((state) => state.netflixOriginals)
+  const netflixOriginals = useAppSelector((state) => state.netflixOriginals)
-  // const trending = useSelector((state) => state.trending)
+  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(movieDetailsSlice.getMovieDetailsAsync('tv', '63351'))
-    // dispatch(movieActions.fetchNetflixOriginals())
+    dispatch(
-    // dispatch(movieActions.fetchTrending())
+      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 (
     <div className='container'>
-      {/* <Header movie={movieDetails} /> */}
+      <Header movie={movieDetails} />
       <div className='movieShowcase'>
-        {/* <DisplayMovieRow
+        <DisplayMovieRow
           isNetflixMovies={true}
           title='Netflix Originals'
           selectMovieHandler={selectMovieHandler}
@@ -45,7 +54,7 @@ const MainContent = ({ selectMovieHandler }) => {
           selectMovieHandler={selectMovieHandler}
           movies={trending.data}
         />
-        <DisplayMovieRow
+        {/* <DisplayMovieRow
           title='Top Rated'
           selectMovieHandler={selectMovieHandler}
           movies={topRated.data}

src/pages/Home.tsx

@@ -3,12 +3,13 @@ import React, { useState } from 'react'
 import MainContent from '../components/MainContent'
 import Modal from '../components/UI/Modal'
 import ModalMovieDetails from '../components/ModalMovieDetails'
+import { IMovieDetails } from '../store/slices/movieDetailsSlice'
 
 const Home = () => {
   const [toggleModal, setToggleModal] = useState(false)
-  const [movieDetails, setMovieDetails] = useState({})
+  const [movieDetails, setMovieDetails] = useState<IMovieDetails>()
 
-  const selectMovieHandler = async (movie) => {
+  const selectMovieHandler = async (movie: IMovieDetails) => {
     setToggleModal(true)
     setMovieDetails(movie)
   }

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 TrendingReducer from './slices/trendingSlice'
-import NetflixOriginalsReducer from './slices/reducerNetflixOriginals'
+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,
+    trending: TrendingReducer,
-    // netflixOriginals: NetflixOriginalsReducer,
+    netflixOriginals: NetflixOriginalsReducer,
     // topRated: TopRatedReducer,
     action: ActionMoviesReducer,
     // comedy: ComedyMoviesReducer,

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) {
+const initialState: { data: IMovieDetails[] } = {
-//   switch (action.type) {
+  data: [],
-//     case FETCH_ACTION_MOVIES:
-//       const data = action.payload.data.results
-//       return { ...state, data }
-//     default:
-//       return state
-//   }
-// }
-
-const initialState = {
-  data: [{}],
 }
 
 export const getActionMoviesAsync = createAsyncThunk<

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}`

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

src/store/slices/reducerNetflixOriginals.ts

@@ -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
-  }
-}

src/store/slices/reducerTrending.ts

@@ -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
-  }
-}

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