diff --git a/src/AppRouter.js b/src/AppRouter.js index dea4dae..d37d79a 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -1,5 +1,5 @@ import React from 'react' -import { BrowserRouter, Route, Switch } from 'react-router-dom' +import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' import Home from './pages/Home' import NotFound from './pages/NotFound' @@ -10,7 +10,8 @@ const AppRouter = () => ( - + } /> + diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 37aadb0..e528360 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -14,7 +14,7 @@ import BellLogo from '../static/images/bell-logo.svg' import DropdownArrow from '../static/images/drop-down-arrow.svg' import DropdownContent from '../components/DropdownContent' -const Navbar = (props) => { +const Navbar = ({ history }) => { const [userInput, setUserInput] = useState('') const searchResults = useSelector((state) => state.searchMovie) const [scrollDimensions] = useScroll() @@ -27,53 +27,17 @@ const Navbar = (props) => { setUserInput(event.target.value) } - useEffect(() => { - // onSearchUserInputHandler(userInput) - if (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]) + // useEffect(() => { + // if (debouncedUserInput) { + // history.push(`/search?=${userInput}`) + // } + // }, [debouncedUserInput]) 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, - }) - - } - }, [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, - // // }) - // } + userInput.length <= 0 + ? history.push('/') + : history.push(`/search?=${userInput}`) + }, [userInput]) const onLogoClick = () => { setUserInput('') diff --git a/src/pages/Search.js b/src/pages/Search.js index fe403db..e90c62c 100644 --- a/src/pages/Search.js +++ b/src/pages/Search.js @@ -1,121 +1,165 @@ -import React, { Component } from 'react'; +import React, { useState, useEffect } from 'react' +import { Redirect } from 'react-router-dom' -import Modal from '../components/UI/Modal'; -import MovieDetails from '../components/Movie/MovieDetails'; -import Movie from '../components/Movie/Movie'; -import axios from '../axios-movies'; +import Modal from '../components/UI/Modal' +import MovieDetails from '../components/Movie/MovieDetails' +import Movie from '../components/Movie/Movie' +import axios from '../axios-movies' -export default class Search extends Component { - constructor(props) { - super(props) - this.state = { - movies: [], - toggleModal: false, - /** Holds the movie information for a single movie. */ - movieOverview: {}, - } +const Search = ({ location: { searchResults, userInput }, history }) => { + // constructor(props) { + // super(props) + // this.state = { + // movies: [], + // toggleModal: false, + // /** Holds the movie information for a single movie. */ + // movieOverview: {}, + // } + // } + + const [isToggleModal, setIsToggleModal] = useState(false) + + // componentDidMount = async () => { + + // console.log('movie roww', movieRows) + // const { movieRows } = this.props.history.location; + // if (movieRows) { + // await this.setState({ movies: movieRows }); + + // } + // } + + // useEffect(() => { + // if (!userInput) { + // console.log('Search.useEffect()') + // history.push('/') + // } + // }, [userInput]) + + // useEffect(() => { + // console.log('searchResults', searchResults) + // }, [searchResults]) + + // componentDidUpdate = async (prevProps) => { + // console.log('hiiiiiii') + // if ( + // prevProps.location.movieRows.length !== + // this.props.location.movieRows.length + // ) { + // await this.setState({ movies: this.props.location.movieRows }); + // } + // } + + const closeModal = () => { + setIsToggleModal(false) } - componentDidMount = async () => { + // /* Get the appropriate details for a specific movie that was clicked */ + // selectMovieHandler = (movie) => { + // this.setState({ toggleModal: true }); - console.log('movie roww', movieRows) - const { movieRows } = this.props.history.location; - if (movieRows) { - await this.setState({ movies: movieRows }); + // let url; + // /** Make the appropriate API call to get the details for a single movie or tv show. */ + // if (movie.media_type === "movie") { + // const movieId = movie.id; + // url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`; - } - } + // } else if (movie.media_type === "tv") { + // const tvId = movie.id + // url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`; + // } - componentDidUpdate = async (prevProps) => { - console.log('hiiiiiii') - if ( - prevProps.location.movieRows.length !== - this.props.location.movieRows.length - ) { - await this.setState({ movies: this.props.location.movieRows }); - } - } + // axios.get(url) + // .then(res => { + // const movieData = res.data; + // this.setState({ movieOverview: movieData }); + // }).catch(error => { + // console.log(error); + // }); + // } - closeModal = () => { - this.setState({ toggleModal: false }); - } + // const { movies } = this.state + // const { userInput } = this.props.location + // console.log('search().render()', this.props.history.location) - /* Get the appropriate details for a specific movie that was clicked */ - selectMovieHandler = (movie) => { - this.setState({ toggleModal: true }); + return

hello

+ // searchResults === undefined ? ( + // + // ) : ( + //
+ // {searchResults.map((movie) => { + // let movieRows = [] + // let movieImageUrl + // if (movie.poster_path !== null && movie.media_type !== 'person') { + // movieImageUrl = 'https://image.tmdb.org/t/p/w500' + movie.poster_path - let url; - /** Make the appropriate API call to get the details for a single movie or tv show. */ - if (movie.media_type === "movie") { - const movieId = movie.id; - url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`; + // /** Set the movie object to our Movie component */ + // const movieComponent = ( + // this.selectMovieHandler(movie)} + // key={movie.id} + // movieImage={movieImageUrl} + // movie={movie} + // /> + // ) - } else if (movie.media_type === "tv") { - const tvId = movie.id - url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`; - } + // /** Push our movie component to our movieRows array */ + // movieRows.push(movieComponent) + // } + // return movieRows + // })} + //
+ // ) - axios.get(url) - .then(res => { - const movieData = res.data; - this.setState({ movieOverview: movieData }); - }).catch(error => { - console.log(error); - }); - } + // <> + // {searchResults && searchResults.data.length > 0 ? ( + //
+ // {searchResults.map((movie) => { + // let movieRows = [] + // let movieImageUrl + // if (movie.poster_path !== null && movie.media_type !== 'person') { + // movieImageUrl = + // 'https://image.tmdb.org/t/p/w500' + movie.poster_path - render() { - const { movies } = this.state - const { userInput } = this.props.location - console.log('search().render()', this.props.history.location) + // /** Set the movie object to our Movie component */ + // const movieComponent = ( + // this.selectMovieHandler(movie)} + // key={movie.id} + // movieImage={movieImageUrl} + // movie={movie} + // /> + // ) - return ( - <> - { - movies.length > 0 ? ( -
- { - movies.map((movie) => { - let movieRows = [] - let movieImageUrl; - 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); - } - return movieRows - }) - } -
- ) : ( -
-
-

Your search for "{userInput}" did not have any matches.

-

Suggestions:

-
    -
  • Try different keywords
    • -
  • Looking for a movie or TV show?
    • -
  • Try using a movie, TV show title, an actor or director
    • -
  • Try a genre, like comedy, romance, sports, or drama
    • -
-
-
- ) - } - - - - - ); - } + // /** Push our movie component to our movieRows array */ + // movieRows.push(movieComponent) + // } + // return movieRows + // })} + //
+ // ) : ( + //
+ //
+ //

Your search for "{userInput}" did not have any matches.

+ //

Suggestions:

+ //
    + //
  • Try different keywords
    • + //
  • Looking for a movie or TV show?
    • + //
  • Try using a movie, TV show title, an actor or director
    • + //
  • Try a genre, like comedy, romance, sports, or drama
    • + //
+ //
+ //
+ // )} + /* */ + /* */ + /* */ + // } + +export default Search diff --git a/src/store/actions/index.js b/src/store/actions/index.js index c2ba0f2..80811db 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -17,7 +17,6 @@ export const fetchSearchMovie = (searchTerm) => { 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)