refactored search movie handler function

src/components/MainContent.js

@@ -4,7 +4,6 @@ import * as movieActions from '../store/actions'
 
 import Header from './Header'
 import Footer from './Footer'
-
 import DisplayMovieRow from './DisplayMovieRow'
 
 const MainContent = ({ selectMovieHandler }) => {
@@ -13,7 +12,7 @@ const MainContent = ({ selectMovieHandler }) => {
   const trending = useSelector((state) => state.trending)
   const topRated = useSelector((state) => state.topRated)
   const actionMovies = useSelector((state) => state.action)
-  const comedyMovies= useSelector((state) => state.comedy)
+  const comedyMovies = useSelector((state) => state.comedy)
   const horrorMovies = useSelector((state) => state.horror)
   const romanceMovies = useSelector((state) => state.romance)
   const documentaries = useSelector((state) => state.documentary)

src/components/Navbar.js

@@ -2,10 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
 import _ from 'lodash'
 import { withRouter } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { useScroll } from '../hooks/useScroll'
 import { useDebounce } from '../hooks/useDebounce'
-import axios from '../axios-movies'
+import * as movieActions from '../store/actions'
+// import axios from '../axios-movies'
 import SearchLogo from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
 import BellLogo from '../static/images/bell-logo.svg'
@@ -14,9 +16,11 @@ import DropdownContent from '../components/DropdownContent'
 
 const Navbar = (props) => {
   const [userInput, setUserInput] = useState('')
+  const searchResults = useSelector((state) => state.searchMovie)
   const [scrollDimensions] = useScroll()
   const { scrollY } = scrollDimensions
 
+  const dispatch = useDispatch()
   const debouncedUserInput = useDebounce(userInput, 500)
 
   const onChange = async (event) => {
@@ -24,27 +28,52 @@ const Navbar = (props) => {
   }
 
   useEffect(() => {
-    onSearchUserInputHandler(userInput)
+    // onSearchUserInputHandler(userInput)
     if (debouncedUserInput) {
-      onSearchUserInputHandler(debouncedUserInput)
+      // if (userInput.length === 0) {
+      //   props.history.push('/')
+      //   return
+      // }
+      // onSearchUserInputHandler(debouncedUserInput)
+      dispatch(movieActions.fetchSearchMovie(debouncedUserInput))
+      // props.history.push({
+      //   pathname: '/search',
+      //   movieRows: searchResults,
+      //   userInput: userInput,
+      // })
     }
   }, [debouncedUserInput])
 
-  const onSearchUserInputHandler = async (searchItem) => {
-    if (searchItem.length === 0) {
-      props.history.push('/')
-      return
+  useEffect(() => {
+    // if (userInput.length === 1) {
+    //   console.log('goiong home...', userInput.length)
+    //   props.history.push('/')
+    //   return
+    // }
+    if (searchResults) {
+      console.log('useEffect()', searchResults.data)
+      props.history.push({
+        pathname: '/search',
+        movieRows: searchResults,
+        userInput: userInput,
+      })
+
     }
-    const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`
-    const response = await axios.get(url)
-    const results = response.data.results
-    console.log('called api...')
-    props.history.push({
-      pathname: '/search',
-      movieRows: results,
-      userInput: searchItem,
-    })
-  }
+  }, [searchResults])
+
+  // const onSearchUserInputHandler = async (searchItem) => {
+
+  //   // const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`
+  //   // const response = await axios.get(url)
+  //   // const results = response.data.results
+  //   dispatch(movieActions.fetchSearchMovie(searchItem))
+  //   // console.log('called api...', searchResults)
+  //   // props.history.push({
+  //   //   pathname: '/search',
+  //   //   movieRows: results,
+  //   //   userInput: searchItem,
+  //   // })
+  // }
 
   const onLogoClick = () => {
     setUserInput('')

src/pages/Search.js

@@ -17,12 +17,17 @@ export default class Search extends Component {
   }
 
   componentDidMount = async () => {
+
+    console.log('movie roww', movieRows)
     const { movieRows } = this.props.history.location;
-    if (movieRows)
+    if (movieRows) {
       await this.setState({ movies: movieRows });
+
+    }
   }
 
   componentDidUpdate = async (prevProps) => {
+    console.log('hiiiiiii')
     if (
       prevProps.location.movieRows.length !==
       this.props.location.movieRows.length
@@ -62,6 +67,7 @@ export default class Search extends Component {
   render() {
     const { movies } = this.state
     const { userInput } = this.props.location
+    console.log('search().render()', this.props.history.location)
 
     return (
       <>

src/store/actions/index.js

@@ -1,6 +1,7 @@
 import axios from '../../axios-movies'
 
 export const FETCH_HEADER_MOVIE = 'FETCH_HEADER_MOVIE'
+export const FETCH_SEARCH_MOVIE = 'FETCH_SEARCH_MOVIE'
 export const FETCH_TRENDING = 'FETCH_TRENDING'
 export const FETCH_NETFLIX_ORIGINALS = 'FETCH_NETFLIX_ORIGINALS'
 export const FETCH_TOP_RATED = 'FETCH_TOP_RATED'
@@ -10,6 +11,20 @@ export const FETCH_HORROR_MOVIES = 'FETCH_HORROR_MOVIES'
 export const FETCH_ROMANCE_MOVIES = 'FETCH_ROMANCE_MOVIES'
 export const FETCH_DOCUMENTARIES = 'FETCH_DOCUMENTARIES'
 
+export const fetchSearchMovie = (searchTerm) => {
+  return async (dispatch) => {
+    try {
+      const request = await axios.get(
+        `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchTerm}`
+      )
+      console.log('action.index.fetachSearchMove()', request)
+      dispatch({ type: FETCH_SEARCH_MOVIE, payload: request })
+    } catch (error) {
+      console.log('error', error)
+    }
+  }
+}
+
 export const fetchHeaderMovie = () => {
   const movieId = 63351
   return async (dispatch) => {

src/store/reducers/index.js

@@ -8,6 +8,7 @@ import HorrorMoviesReducer from './reducerHorrorMovies'
 import RomanceMoviesReducer from './reducerRomanceMovies'
 import DocumentaryReducer from './reducerDocumentary'
 import HeaderMovieReducer from './reducerHeaderMovie'
+import SearchMovieReducer from './reducerSearchMovie'
 
 const rootReducer = combineReducers({
   trending: TrendingReducer,
@@ -19,6 +20,7 @@ const rootReducer = combineReducers({
   romance: RomanceMoviesReducer,
   documentary: DocumentaryReducer,
   headerMovie: HeaderMovieReducer,
+  searchMovie: SearchMovieReducer,
 })
 
 export default rootReducer

src/store/reducers/reducerSearchMovie.js

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