From df9a71c1d4528f46953704cb18f8dd8b46d52c0d Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Fri, 10 Jul 2020 18:26:07 -0400 Subject: [PATCH] implemented debounce function successfuly --- src/containers/Home.js | 62 +-------------------------- src/containers/Navbar.js | 91 +++++++++++++++++++++------------------- src/containers/Search.js | 10 ++--- src/index.js | 1 + 4 files changed, 55 insertions(+), 109 deletions(-) diff --git a/src/containers/Home.js b/src/containers/Home.js index 1914ced..eac328b 100644 --- a/src/containers/Home.js +++ b/src/containers/Home.js @@ -19,62 +19,6 @@ class Home extends Component { movieOverview: {}, } - /** Make API call as soon as the user starts typing. */ - makeAipCall = (searchItem) => { - const url = `/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchItem}`; - - axios.get(url) - .then(res => { - const results = res.data.results; - let movieImageUrl; - /** Will hold all our movies Components */ - let movieRows = []; - - /** Loop through all the movies */ - results.forEach((movie) => { - /** Manually build our image url and set it on the Movie component. */ - if (movie.poster_path !== null && movie.media_type !== "person") { - movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; - - /** Set the movie object to our Movie component */ - const movieComponent = this.selectMovieHandler(movie)} - key={movie.id} - movieImage={movieImageUrl} - movie={movie} /> - - /** Push our movie component to our movieRows array */ - movieRows.push(movieComponent); - } - }) - /** Set our MovieList array to the movieRows array */ - this.setState({ MovieList: movieRows }); - }).catch(error => { - console.log(error); - }); - } - - /** Get the user input */ - onSearchHandler = (event) => { - /** Display the movie list. */ - // navigate to search comp - // this.props.history.push('/search) - this.props.history.push('/search') - // this.setState({ - // toggleMovieList: false - // }); - - const userInput = event.target.value; - /** Pass in the user input to make the API call. */ - this.makeAipCall(userInput); - - /** If the input is empty don't display the movie list. */ - if (userInput === "") { - this.setState({ - toggleMovieList: true - }); - } - } /* Get the appropriate details for a specific movie that was clicked */ selectMovieHandler = (movie) => { @@ -108,11 +52,7 @@ class Home extends Component { render() { return (
- {/* */} - { - this.state.toggleMovieList ? :
{this.state.MovieList}
- } + diff --git a/src/containers/Navbar.js b/src/containers/Navbar.js index 8edc060..1a4529d 100644 --- a/src/containers/Navbar.js +++ b/src/containers/Navbar.js @@ -2,8 +2,9 @@ import React, { Component } from 'react'; import { NavLink } from 'react-router-dom'; import _ from 'lodash'; import { withRouter } from 'react-router-dom'; +import axios from '../axios-movies'; +import Movie from '../components/Movie/Movie'; -import NavigationItem from '../components/NavigationItem' 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'; @@ -15,9 +16,11 @@ class Navbar extends Component { super(props) this.state = { scrolling: false, + movieList: [], + userInput: '' } // use to debounce api call - this.onSearchHandler = _.debounce(this.onSearchHandler, 1000) + this.makeAipCall = _.debounce(this.makeAipCall, 1000) } componentDidMount() { @@ -38,63 +41,64 @@ class Navbar extends Component { } } - /** makes api call */ - onSearchHandler = (event) => { - this.props.history.push('/search') - console.log('helo--', event.target.value) - } + onChange = async (event) => { + await this.setState({ userInput: event.target.value }) + const { userInput } = this.state - onChange = (event) => { - const userInput = event.target.value; - this.props.history.push('/search') - this.onSearchHandler(event) - if (userInput === "") { - this.props.history.push('/') - } + await this.makeAipCall(userInput); } /** Make API call as soon as the user starts typing. */ - makeAipCall = (searchItem) => { + makeAipCall = async (searchItem) => { + if (searchItem.length === 0) { + this.props.history.push('/') + return + } + 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; + let movieImageUrl; + /** Will hold all our movies Components */ + let movieRows = []; - axios.get(url) - .then(res => { - const results = res.data.results; - let movieImageUrl; - /** Will hold all our movies Components */ - let movieRows = []; + /** Loop through all the movies */ + results.forEach((movie) => { + /** Manually build our image url and set it on the Movie component. */ + if (movie.poster_path !== null && movie.media_type !== "person") { + movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; - /** Loop through all the movies */ - results.forEach((movie) => { - /** Manually build our image url and set it on the Movie component. */ - if (movie.poster_path !== null && movie.media_type !== "person") { - movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; + /** Set the movie object to our Movie component */ + const movieComponent = this.selectMovieHandler(movie)} + key={movie.id} + movieImage={movieImageUrl} + movie={movie} /> - /** Set the movie object to our Movie component */ - const movieComponent = this.selectMovieHandler(movie)} - key={movie.id} - movieImage={movieImageUrl} - movie={movie} /> + /** Push our movie component to our movieRows array */ + movieRows.push(movieComponent); + } + }) + /** Set our MovieList array to the movieRows array */ + await this.setState({ movieList: movieRows }); + this.props.history.push({ + pathname: '/search', + movieRows: this.state.movieList + }); + } - /** Push our movie component to our movieRows array */ - movieRows.push(movieComponent); - } - }) - /** Set our MovieList array to the movieRows array */ - this.setState({ MovieList: movieRows }); - }).catch(error => { - console.log(error); - }); + onLogoClick = () => { + // reset state + this.setState({ userInput: '' }) } render() { - const { scrolling, showMovies } = this.state; + const { scrolling } = this.state; return (