set search query params
This commit is contained in:
andres alcocer
@@ -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 = () => (
|
||||
<BrowserRouter>
|
||||
<Navbar />
|
||||
<Switch>
|
||||
<Route path='/' exact component={Home} />
|
||||
<Route path='/' exact render={() => <Redirect to='/browse' />} />
|
||||
<Route path='/browse' component={Home} />
|
||||
<Route path='/search' component={Search} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
|
||||
@@ -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('')
|
||||
|
||||
@@ -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 <h1>hello</h1>
|
||||
// searchResults === undefined ? (
|
||||
// <Redirect to='/' />
|
||||
// ) : (
|
||||
// <div className='search-container'>
|
||||
// {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 = (
|
||||
// <Movie
|
||||
// // movieDetails={() => 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
|
||||
// })}
|
||||
// </div>
|
||||
// )
|
||||
|
||||
axios.get(url)
|
||||
.then(res => {
|
||||
const movieData = res.data;
|
||||
this.setState({ movieOverview: movieData });
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
// <>
|
||||
// {searchResults && searchResults.data.length > 0 ? (
|
||||
// <div className='search-container'>
|
||||
// {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 = (
|
||||
// <Movie
|
||||
// // movieDetails={() => this.selectMovieHandler(movie)}
|
||||
// key={movie.id}
|
||||
// movieImage={movieImageUrl}
|
||||
// movie={movie}
|
||||
// />
|
||||
// )
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
movies.length > 0 ? (
|
||||
<div className="search-container">
|
||||
{
|
||||
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 = <Movie
|
||||
movieDetails={() => this.selectMovieHandler(movie)}
|
||||
key={movie.id}
|
||||
movieImage={movieImageUrl}
|
||||
movie={movie} />
|
||||
|
||||
/** Push our movie component to our movieRows array */
|
||||
movieRows.push(movieComponent);
|
||||
}
|
||||
return movieRows
|
||||
})
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-results">
|
||||
<div className="no-results__text">
|
||||
<p>Your search for "{userInput}" did not have any matches.</p>
|
||||
<p>Suggestions:</p>
|
||||
<ul>
|
||||
<li>Try different keywords</li>
|
||||
<li>Looking for a movie or TV show?</li>
|
||||
<li>Try using a movie, TV show title, an actor or director</li>
|
||||
<li>Try a genre, like comedy, romance, sports, or drama</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<Modal Modal show={this.state.toggleModal}
|
||||
modalClosed={this.closeModal}
|
||||
movie={this.state.movieOverview} >
|
||||
<MovieDetails movie={this.state.movieOverview} />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// /** Push our movie component to our movieRows array */
|
||||
// movieRows.push(movieComponent)
|
||||
// }
|
||||
// return movieRows
|
||||
// })}
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div className='no-results'>
|
||||
// <div className='no-results__text'>
|
||||
// <p>Your search for "{userInput}" did not have any matches.</p>
|
||||
// <p>Suggestions:</p>
|
||||
// <ul>
|
||||
// <li>Try different keywords</li>
|
||||
// <li>Looking for a movie or TV show?</li>
|
||||
// <li>Try using a movie, TV show title, an actor or director</li>
|
||||
// <li>Try a genre, like comedy, romance, sports, or drama</li>
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
/* <Modal
|
||||
Modal
|
||||
show={isToggleModal}
|
||||
modalClosed={closeModal}
|
||||
// movie={this.state.movieOverview}
|
||||
> */
|
||||
/* <MovieDetails movie={this.state.movieOverview} /> */
|
||||
/* </Modal> */
|
||||
// </>
|
||||
}
|
||||
|
||||
export default Search
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user