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

formatted code

Browse Source
This commit is contained in:
andres alcocer
2022-02-03 19:06:02 -05:00
parent da9414a7c9
commit 4b72e0cfc1
5 changed files with 115 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/AppRouter.js
View File

@@ -1,22 +1,22 @@
import React from 'react'; import React from 'react'
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
import Footer from './components/Footer'; import Footer from './components/Footer'
import Navbar from './components/Navbar'; import Navbar from './components/Navbar'
import Home from './pages/Home'; import Home from './pages/Home'
import NotFound from './pages/NotFound'; import NotFound from './pages/NotFound'
import Search from './pages/Search'; import Search from './pages/Search'
const AppRouter = () => ( const AppRouter = () => (
<BrowserRouter> <BrowserRouter>
<Navbar /> <Navbar />
<Switch> <Switch>
<Route path='/' exact render={() => <Redirect to='/browse' />} /> <Route path='/' exact render={() => <Redirect to='/browse' />} />
<Route path='/browse' component={Home} /> <Route path='/browse' component={Home} />
<Route path='/search' component={Search} /> <Route path='/search' component={Search} />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
<Footer /> <Footer />
</BrowserRouter> </BrowserRouter>
); )
export default AppRouter; export default AppRouter

39
src/pages/NotFound.js
View File

@@ -1,34 +1,23 @@
import React from 'react' import React from 'react'
const NotFound = () => { const NotFound = () => {
<<<<<<< HEAD
return ( return (
<div> <div className='not-found__message'>
<h1>NOT FOUND</h1> {/* TODO: add css to match netflix not found page */}
<h1>LOST YOUR WAY?</h1>
<p>
Sorry, we can't find that page. You'll find lots to explore on the home
page.
</p>
<button>Netflix Home</button>
<span>
Error Code <strong>NSES-404</strong>
</span>
<span>
FROM <strong>LOST IN SPACE</strong>
</span>
</div> </div>
) )
} }
export default NotFound export default NotFound
=======
return (
<div className='not-found__message'>
{/* TODO: add css to match netflix not found page */}
<h1>LOST YOUR WAY?</h1>
<p>
Sorry, we can't find that page. You'll find lots to explore on
the home page.
</p>
<button>Netflix Home</button>
<span>
Error Code <strong>NSES-404</strong>
</span>
<span>
FROM <strong>LOST IN SPACE</strong>
</span>
</div>
);
};
export default NotFound;
>>>>>>> e91ba1936642090199bf3c2946edc8cc861f864f

174
src/pages/Search.js
View File

@@ -1,108 +1,90 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom'
import ModalMovieDetails from '../components/ModalMovieDetails'; import ModalMovieDetails from '../components/ModalMovieDetails'
import Modal from '../components/UI/Modal'; import Modal from '../components/UI/Modal'
import { useDebounce } from '../hooks/useDebounce'; import { useDebounce } from '../hooks/useDebounce'
import * as movieActions from '../store/actions'; import * as movieActions from '../store/actions'
// A custom hook that builds on useLocation to parse // A custom hook that builds on useLocation to parse
// the query string for you. // the query string for you.
const useQuery = () => { const useQuery = () => {
return new URLSearchParams(useLocation().search); return new URLSearchParams(useLocation().search)
}; }
const Search = () => { const Search = () => {
let query = useQuery(); let query = useQuery()
const debouncedSearchTerm = useDebounce(query.get('q'), 500); const debouncedSearchTerm = useDebounce(query.get('q'), 500)
const [isToggleModal, setIsToggleModal] = useState(false); const [isToggleModal, setIsToggleModal] = useState(false)
const { searchResults, isLoading } = useSelector( const { searchResults, isLoading } = useSelector((state) => state.searchMovie)
(state) => state.searchMovie const { movieDetails } = useSelector((state) => state.movieDetails)
); const dispatch = useDispatch()
const { movieDetails } = useSelector((state) => state.movieDetails);
const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
if (debouncedSearchTerm) { if (debouncedSearchTerm) {
dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm)); dispatch(movieActions.fetchSearchMovie(debouncedSearchTerm))
} }
}, [debouncedSearchTerm]); }, [debouncedSearchTerm])
const onCloseModalHandler = () => { const onCloseModalHandler = () => {
setIsToggleModal(false); setIsToggleModal(false)
}; }
const onSelectMovieHandler = (movie) => { const onSelectMovieHandler = (movie) => {
dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id)); dispatch(movieActions.fetchMovieDetails(movie.media_type, movie.id))
setIsToggleModal(true); setIsToggleModal(true)
}; }
const renderSearchResults = () => { const renderSearchResults = () => {
return searchResults.length > 0 ? ( return searchResults.length > 0 ? (
<> <>
<div className='search-container'> <div className='search-container'>
{searchResults.map((movie) => { {searchResults.map((movie) => {
if ( if (movie.backdrop_path !== null && movie.media_type !== 'person') {
movie.backdrop_path !== null && const movieImageUrl =
movie.media_type !== 'person' 'https://image.tmdb.org/t/p/w500' + movie.backdrop_path
) { return (
const movieImageUrl = <div className='movie'>
'https://image.tmdb.org/t/p/w500' + <div
movie.backdrop_path; onClick={() => onSelectMovieHandler(movie)}
return ( className='movie__column-poster'
<div className='movie'> >
<div <img src={movieImageUrl} alt='' className='movie__poster' />
onClick={() => </div>
onSelectMovieHandler(movie) </div>
} )
className='movie__column-poster' }
> })}
<img </div>
src={movieImageUrl} <Modal
alt='' show={isToggleModal}
className='movie__poster' modalClosed={onCloseModalHandler}
/> backgroundImage={
</div> movieDetails.backdrop_path || movieDetails.poster_path
</div> }
); >
} <ModalMovieDetails movie={movieDetails} />
})} </Modal>
</div> </>
<Modal ) : (
show={isToggleModal} <div className='no-results'>
modalClosed={onCloseModalHandler} <div className='no-results__text'>
backgroundImage={ <p>
movieDetails.backdrop_path || movieDetails.poster_path Your search for "{debouncedSearchTerm}" did not have any matches.
} </p>
> <p>Suggestions:</p>
<ModalMovieDetails movie={movieDetails} /> <ul>
</Modal> <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>
<div className='no-results'> <li>Try a genre, like comedy, romance, sports, or drama</li>
<div className='no-results__text'> </ul>
<p> </div>
Your search for "{debouncedSearchTerm}" did not have any </div>
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>
);
};
return !isLoading ? renderSearchResults() : <h1>Loading...</h1>; return !isLoading ? renderSearchResults() : <h1>Loading...</h1>
}; }
export default Search; export default Search

8
src/static/sass/components/_notfound.scss
View File

@@ -1,9 +1,9 @@
.not-found__message { .not-found__message {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
} }
.not-found__message > h1 { .not-found__message > h1 {
color: #fff; color: #fff;
} }

3
src/static/sass/style.scss
View File

@@ -8,10 +8,7 @@
@import 'components/search'; @import 'components/search';
@import 'components/movie'; @import 'components/movie';
@import 'components/movieShowcase'; @import 'components/movieShowcase';
<<<<<<< HEAD
=======
@import 'components/notfound'; @import 'components/notfound';
>>>>>>> e91ba1936642090199bf3c2946edc8cc861f864f
@import 'layout/footer'; @import 'layout/footer';
@import 'layout/header'; @import 'layout/header';