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

fixed merge conflict

Browse Source
This commit is contained in:
andres alcocer
2022-02-03 19:00:39 -05:00
parent c301bcf316 e91ba19366
commit da9414a7c9
5 changed files with 151 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/AppRouter.js
View File

@@ -1,23 +1,22 @@
import React from 'react' import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom' import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import Footer from './components/Footer';
import Home from './pages/Home' import Navbar from './components/Navbar';
import NotFound from './pages/NotFound' import Home from './pages/Home';
import Search from './pages/Search' import NotFound from './pages/NotFound';
import Navbar from './components/Navbar' import Search from './pages/Search';
import Footer from './components/Footer'
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;

23
src/pages/NotFound.js
View File

@@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
const NotFound = () => { const NotFound = () => {
<<<<<<< HEAD
return ( return (
<div> <div>
<h1>NOT FOUND</h1> <h1>NOT FOUND</h1>
@@ -9,3 +10,25 @@ const NotFound = () => {
} }
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

175
src/pages/Search.js
View File

@@ -1,91 +1,108 @@
import React, { useState, useEffect } from 'react' import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux' import { useLocation } from 'react-router-dom';
import ModalMovieDetails from '../components/ModalMovieDetails';
import { useDebounce } from '../hooks/useDebounce' import Modal from '../components/UI/Modal';
import * as movieActions from '../store/actions' import { useDebounce } from '../hooks/useDebounce';
import Modal from '../components/UI/Modal' import * as movieActions from '../store/actions';
import ModalMovieDetails from '../components/ModalMovieDetails'
// 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((state) => state.searchMovie) const { searchResults, isLoading } = useSelector(
const { movieDetails } = useSelector((state) => state.movieDetails) (state) => state.searchMovie
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 (movie.backdrop_path !== null && movie.media_type !== 'person') { if (
const movieImageUrl = movie.backdrop_path !== null &&
'https://image.tmdb.org/t/p/w500' + movie.backdrop_path movie.media_type !== 'person'
return ( ) {
<div className='movie'> const movieImageUrl =
<div 'https://image.tmdb.org/t/p/w500' +
onClick={() => onSelectMovieHandler(movie)} movie.backdrop_path;
className='movie__column-poster' return (
> <div className='movie'>
<img src={movieImageUrl} alt='' className='movie__poster' /> <div
</div> onClick={() =>
</div> onSelectMovieHandler(movie)
) }
} className='movie__column-poster'
})} >
</div> <img
<Modal src={movieImageUrl}
show={isToggleModal} alt=''
modalClosed={onCloseModalHandler} className='movie__poster'
backgroundImage={ />
movieDetails.backdrop_path || movieDetails.poster_path </div>
} </div>
> );
<ModalMovieDetails movie={movieDetails} /> }
</Modal> })}
</> </div>
) : ( <Modal
<div className='no-results'> show={isToggleModal}
<div className='no-results__text'> modalClosed={onCloseModalHandler}
<p> backgroundImage={
Your search for "{debouncedSearchTerm}" did not have any matches. movieDetails.backdrop_path || movieDetails.poster_path
</p> }
<p>Suggestions:</p> >
<ul> <ModalMovieDetails movie={movieDetails} />
<li>Try different keywords</li> </Modal>
<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> <div className='no-results'>
</ul> <div className='no-results__text'>
</div> <p>
</div> Your search for "{debouncedSearchTerm}" 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>
);
};
return !isLoading ? renderSearchResults() : <h1>Loading...</h1> return !isLoading ? renderSearchResults() : <h1>Loading...</h1>;
} };
export default Search export default Search;

9
src/static/sass/components/_notfound.scss Normal file
View File

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

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

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