diff --git a/src/components/MainContent.js b/src/components/MainContent.js index a9c16d6..368f9ae 100644 --- a/src/components/MainContent.js +++ b/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) diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 509c4d2..37aadb0 100644 --- a/src/components/Navbar.js +++ b/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('') diff --git a/src/pages/Search.js b/src/pages/Search.js index 7aedc75..fe403db 100644 --- a/src/pages/Search.js +++ b/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 ( <> diff --git a/src/store/actions/index.js b/src/store/actions/index.js index f71ea2e..c2ba0f2 100644 --- a/src/store/actions/index.js +++ b/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) => { diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js index 99e3191..bf9a80a 100644 --- a/src/store/reducers/index.js +++ b/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 diff --git a/src/store/reducers/reducerSearchMovie.js b/src/store/reducers/reducerSearchMovie.js new file mode 100644 index 0000000..48a199d --- /dev/null +++ b/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 + } +}