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

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;