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

MRI: Adding some styling for NotFound component

Browse Source
This commit is contained in:
MOHAMED RIAD
2021-12-10 22:45:43 +01:00
parent 4ba3e9fc32
commit 969e28f26e
5 changed files with 144 additions and 118 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 { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import Home from './pages/Home'
import NotFound from './pages/NotFound'
import Search from './pages/Search'
import Navbar from './components/Navbar'
import Footer from './components/Footer'
import React from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import Footer from './components/Footer';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Search from './pages/Search';
const AppRouter = () => (
<BrowserRouter>
<Navbar />
<Switch>
<Route path='/' exact render={() => <Redirect to='/browse' />} />
<Route path='/browse' component={Home} />
<Route path='/search' component={Search} />
<Route component={NotFound} />
</Switch>
<Footer />
</BrowserRouter>
)
<BrowserRouter>
<Navbar />
<Switch>
<Route path='/' exact render={() => <Redirect to='/browse' />} />
<Route path='/browse' component={Home} />
<Route path='/search' component={Search} />
<Route component={NotFound} />
</Switch>
<Footer />
</BrowserRouter>
);
export default AppRouter
export default AppRouter;

16
src/pages/NotFound.js
View File

@@ -1,11 +1,11 @@
import React from 'react';
const NotFound = () => {
return (
<div>
<h1>NOT FOUND</h1>
</div>
);
}
const NotFound = () => {
return (
<div className='not-found__message'>
<h1>NOT FOUND</h1>
</div>
);
};
export default NotFound
export default NotFound;

175
src/pages/Search.js
View File

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

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

@@ -1,14 +1,15 @@
@import "abstracts/functions";
@import "abstracts/variables";
@import 'abstracts/functions';
@import 'abstracts/variables';
@import "base/base";
@import 'base/base';
@import "components/backdrop";
@import "components/modal";
@import "components/search";
@import "components/movie";
@import "components/movieShowcase";
@import 'components/backdrop';
@import 'components/modal';
@import 'components/search';
@import 'components/movie';
@import 'components/movieShowcase';
@import 'components/notfound';
@import "layout/footer";
@import "layout/header";
@import "layout/navigation";
@import 'layout/footer';
@import 'layout/header';
@import 'layout/navigation';