psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set search query params

Browse Source
This commit is contained in:
andres alcocer
2021-10-08 11:27:08 -04:00
parent f6a828e243
commit 29a274048b
4 changed files with 163 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/AppRouter.js
View File

@@ -1,5 +1,5 @@
import React from 'react' 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 Home from './pages/Home'
import NotFound from './pages/NotFound' import NotFound from './pages/NotFound'
@@ -10,7 +10,8 @@ const AppRouter = () => (
<BrowserRouter> <BrowserRouter>
<Navbar /> <Navbar />
<Switch> <Switch>
<Route path='/' exact component={Home} /> <Route path='/' exact render={() => <Redirect to='/browse' />} />
<Route path='/browse' component={Home} />
<Route path='/search' component={Search} /> <Route path='/search' component={Search} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>

56
src/components/Navbar.js
View File

@@ -14,7 +14,7 @@ import BellLogo from '../static/images/bell-logo.svg'
import DropdownArrow from '../static/images/drop-down-arrow.svg' import DropdownArrow from '../static/images/drop-down-arrow.svg'
import DropdownContent from '../components/DropdownContent' import DropdownContent from '../components/DropdownContent'
const Navbar = (props) => { const Navbar = ({ history }) => {
const [userInput, setUserInput] = useState('') const [userInput, setUserInput] = useState('')
const searchResults = useSelector((state) => state.searchMovie) const searchResults = useSelector((state) => state.searchMovie)
const [scrollDimensions] = useScroll() const [scrollDimensions] = useScroll()
@@ -27,53 +27,17 @@ const Navbar = (props) => {
setUserInput(event.target.value) setUserInput(event.target.value)
} }
useEffect(() => { // useEffect(() => {
// onSearchUserInputHandler(userInput) // if (debouncedUserInput) {
if (debouncedUserInput) { // history.push(`/search?=${userInput}`)
// if (userInput.length === 0) { // }
// props.history.push('/') // }, [debouncedUserInput])
// return
// }
// onSearchUserInputHandler(debouncedUserInput)
dispatch(movieActions.fetchSearchMovie(debouncedUserInput))
// props.history.push({
// pathname: '/search',
// movieRows: searchResults,
// userInput: userInput,
// })
}
}, [debouncedUserInput])
useEffect(() => { useEffect(() => {
// if (userInput.length === 1) { userInput.length <= 0
// console.log('goiong home...', userInput.length) ? history.push('/')
// props.history.push('/') : history.push(`/search?=${userInput}`)
// return }, [userInput])
// }
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,
// // })
// }
const onLogoClick = () => { const onLogoClick = () => {
setUserInput('') setUserInput('')

256
src/pages/Search.js
View File

@@ -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 Modal from '../components/UI/Modal'
import MovieDetails from '../components/Movie/MovieDetails'; import MovieDetails from '../components/Movie/MovieDetails'
import Movie from '../components/Movie/Movie'; import Movie from '../components/Movie/Movie'
import axios from '../axios-movies'; import axios from '../axios-movies'
export default class Search extends Component { const Search = ({ location: { searchResults, userInput }, history }) => {
constructor(props) { // constructor(props) {
super(props) // super(props)
this.state = { // this.state = {
movies: [], // movies: [],
toggleModal: false, // toggleModal: false,
/** Holds the movie information for a single movie. */ // /** Holds the movie information for a single movie. */
movieOverview: {}, // 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) // let url;
const { movieRows } = this.props.history.location; // /** Make the appropriate API call to get the details for a single movie or tv show. */
if (movieRows) { // if (movie.media_type === "movie") {
await this.setState({ movies: movieRows }); // 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) => { // axios.get(url)
console.log('hiiiiiii') // .then(res => {
if ( // const movieData = res.data;
prevProps.location.movieRows.length !== // this.setState({ movieOverview: movieData });
this.props.location.movieRows.length // }).catch(error => {
) { // console.log(error);
await this.setState({ movies: this.props.location.movieRows }); // });
} // }
}
closeModal = () => { // const { movies } = this.state
this.setState({ toggleModal: false }); // const { userInput } = this.props.location
} // console.log('search().render()', this.props.history.location)
/* Get the appropriate details for a specific movie that was clicked */ return <h1>hello</h1>
selectMovieHandler = (movie) => { // searchResults === undefined ? (
this.setState({ toggleModal: true }); // <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; // /** Set the movie object to our Movie component */
/** Make the appropriate API call to get the details for a single movie or tv show. */ // const movieComponent = (
if (movie.media_type === "movie") { // <Movie
const movieId = movie.id; // // movieDetails={() => this.selectMovieHandler(movie)}
url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`; // key={movie.id}
// movieImage={movieImageUrl}
// movie={movie}
// />
// )
} else if (movie.media_type === "tv") { // /** Push our movie component to our movieRows array */
const tvId = movie.id // movieRows.push(movieComponent)
url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`; // }
} // return movieRows
// })}
// </div>
// )
axios.get(url) // <>
.then(res => { // {searchResults && searchResults.data.length > 0 ? (
const movieData = res.data; // <div className='search-container'>
this.setState({ movieOverview: movieData }); // {searchResults.map((movie) => {
}).catch(error => { // let movieRows = []
console.log(error); // let movieImageUrl
}); // if (movie.poster_path !== null && movie.media_type !== 'person') {
} // movieImageUrl =
// 'https://image.tmdb.org/t/p/w500' + movie.poster_path
render() { // /** Set the movie object to our Movie component */
const { movies } = this.state // const movieComponent = (
const { userInput } = this.props.location // <Movie
console.log('search().render()', this.props.history.location) // // movieDetails={() => this.selectMovieHandler(movie)}
// key={movie.id}
// movieImage={movieImageUrl}
// movie={movie}
// />
// )
return ( // /** Push our movie component to our movieRows array */
<> // movieRows.push(movieComponent)
{ // }
movies.length > 0 ? ( // return movieRows
<div className="search-container"> // })}
{ // </div>
movies.map((movie) => { // ) : (
let movieRows = [] // <div className='no-results'>
let movieImageUrl; // <div className='no-results__text'>
if (movie.poster_path !== null && movie.media_type !== "person") { // <p>Your search for "{userInput}" did not have any matches.</p>
movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path; // <p>Suggestions:</p>
// <ul>
/** Set the movie object to our Movie component */ // <li>Try different keywords</li>
const movieComponent = <Movie // <li>Looking for a movie or TV show?</li>
movieDetails={() => this.selectMovieHandler(movie)} // <li>Try using a movie, TV show title, an actor or director</li>
key={movie.id} // <li>Try a genre, like comedy, romance, sports, or drama</li>
movieImage={movieImageUrl} // </ul>
movie={movie} /> // </div>
// </div>
/** Push our movie component to our movieRows array */ // )}
movieRows.push(movieComponent); /* <Modal
} Modal
return movieRows show={isToggleModal}
}) modalClosed={closeModal}
} // movie={this.state.movieOverview}
</div> > */
) : ( /* <MovieDetails movie={this.state.movieOverview} /> */
<div className="no-results"> /* </Modal> */
<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>
</>
);
}
} }
export default Search

1
src/store/actions/index.js
View File

@@ -17,7 +17,6 @@ export const fetchSearchMovie = (searchTerm) => {
const request = await axios.get( const request = await axios.get(
`/search/multi?api_key=${process.env.API_KEY}&language=en-US&include_adult=false&query=${searchTerm}` `/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 }) dispatch({ type: FETCH_SEARCH_MOVIE, payload: request })
} catch (error) { } catch (error) {
console.log('error', error) console.log('error', error)