diff --git a/README.md b/README.md index dc40a35..90b3ce9 100644 --- a/README.md +++ b/README.md @@ -36,10 +36,15 @@ - Dashborad - Trending Movies and TV Series - Discover Movies and TV Series in different genres +- Latest, Pupoular , Upcoming Movies and TV Series - Search Movies and TV Series - Movie and TV Series Details(Cast, Crew, Trivia, Photos, Videos etc.) - Recommendations for Each Movie and TV Series -- Add to Watchlist +- Add and Remove from Watchlist +- Trending Persons +- Search Persons +- Person Detail Page with Biography, Movies, TV Series and Gallery etc. +- Image Carousel with Zoom - and More... ## Tech Stack 👾 diff --git a/src/404/NotFound.js b/src/404/NotFound.js new file mode 100644 index 0000000..3b99654 --- /dev/null +++ b/src/404/NotFound.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; +import { v4 as uuidv4 } from 'uuid'; + +import { IoIosArrowForward } from 'react-icons/io'; + +import { errorPage } from '../data/notFound'; + +const NotFound = () => { + return ( + +
+
+

+ Oops +

+

Page Not Found

+
+ {errorPage.map((item) => ( + + {item.title} + + ))} +
+ + Back to Homepage + +
+
+
+ not found +
+
+ + ); +}; + +const Container = styled.div` + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 40px 16px; + min-height: 90vh; +`; + +export default NotFound; diff --git a/src/App.js b/src/App.js index 6e34883..2e38a0c 100644 --- a/src/App.js +++ b/src/App.js @@ -154,12 +154,12 @@ const App = () => { + +
- - diff --git a/src/components/cards/MovieSeries.js b/src/components/cards/MovieSeries.js index 2fd598d..9a4a6f0 100644 --- a/src/components/cards/MovieSeries.js +++ b/src/components/cards/MovieSeries.js @@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom'; import { toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import { img300, unavailableLandscape } from '../../helpers/config'; import { BiListPlus } from 'react-icons/bi'; import { AiFillStar } from 'react-icons/ai'; import { BsFillTrashFill } from 'react-icons/bs'; @@ -21,8 +20,10 @@ import { updateProfileWatchlist, } from '../../services/firebase'; +import { img300, unavailableLandscape } from '../../config/imgConfig'; + import { LOGIN } from '../../constants/routes'; -import { settings } from '../../helpers/notification'; +import { notificationSettings } from '../../helpers/notificationSettings'; import ButtonLoading from '../loaders/ButtonLoading'; const MovieSeries = ({ @@ -55,6 +56,8 @@ const MovieSeries = ({ }; checkIfThisInWatchlist(); + + // eslint-disable-next-line react-hooks/exhaustive-deps }, [inWatchlist]); const handleWatchlist = async (id, media_type, title) => { @@ -64,12 +67,12 @@ const MovieSeries = ({ setInWatchlist(true); toast.success(`${title} Added to Your Watchlist`, { - ...settings, + ...notificationSettings, }); setLoading(false); } catch (error) { toast.error('Something Went Wrong', { - ...settings, + ...notificationSettings, }); setLoading(false); } @@ -82,12 +85,12 @@ const MovieSeries = ({ await deleteItemFromWatchlist(userId, id, media_type); setInWatchlist(false); toast.warn(`${title} removed from Your Watchlist`, { - ...settings, + ...notificationSettings, }); setLoading(false); } catch (error) { toast.error('Something Went Wrong', { - ...settings, + ...notificationSettings, }); setLoading(false); } diff --git a/src/components/cards/PersonCard.js b/src/components/cards/PersonCard.js index 32b47f0..0e62b22 100644 --- a/src/components/cards/PersonCard.js +++ b/src/components/cards/PersonCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { img300, noUserImg } from '../../helpers/config'; +import { img300, noUserImg } from '../../config/imgConfig'; const PersonCard = ({ person }) => { return ( diff --git a/src/components/details/BannerInfo.js b/src/components/details/BannerInfo.js index 4d78367..c60e07e 100644 --- a/src/components/details/BannerInfo.js +++ b/src/components/details/BannerInfo.js @@ -16,13 +16,14 @@ import { updateProfileWatchlist, } from '../../services/firebase'; -import { img300, img500, unavailable } from '../../helpers/config'; +import { img300, img500, unavailable } from '../../config/imgConfig'; import formatTime from '../../helpers/formatTime'; import voteColor from '../../helpers/voteColor'; import { LOGIN } from '../../constants/routes'; import SocialLinks from '../widget/SocialLinks'; -import { settings } from '../../helpers/notification'; +import { notificationSettings } from '../../helpers/notificationSettings'; import ButtonLoading from '../loaders/ButtonLoading'; +import WatchData from './WatchData'; const BannerInfo = ({ content, type, runtime }) => { const [loading, setLoading] = useState(false); @@ -40,6 +41,7 @@ const BannerInfo = ({ content, type, runtime }) => { }; checkIfThisInWatchlist(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [inWatchlist]); const handleDelete = async (id, media_type, title) => { @@ -49,12 +51,12 @@ const BannerInfo = ({ content, type, runtime }) => { await deleteItemFromWatchlist(userId, id, media_type); setInWatchlist(false); toast.warn(`${title} removed from Your Watchlist`, { - ...settings, + ...notificationSettings, }); setLoading(false); } catch (error) { toast.error('Something Went Wrong', { - ...settings, + ...notificationSettings, }); setLoading(false); } @@ -68,12 +70,12 @@ const BannerInfo = ({ content, type, runtime }) => { setInWatchlist(true); toast.success(`${title} Added to Your Watchlist`, { - ...settings, + ...notificationSettings, }); setLoading(false); } catch (error) { toast.error('Something Went Wrong', { - ...settings, + ...notificationSettings, }); setLoading(false); } @@ -86,21 +88,19 @@ const BannerInfo = ({ content, type, runtime }) => { style={{ backgroundImage: `radial-gradient(circle at 20% 50%, rgba(30, 39, 44, 0.9) 0%, rgba(30, 39, 44, 0.8) 100%), url(${img500}${content.backdrop_path})`, }} - className="flex flex-col justify-start items-start sm:flex-row gap-4 bg-cover bg-center" + className="flex flex-col justify-start items-start sm:flex-row bg-cover bg-center shadow-lg" > -
- {content.title} -
+ {content.title}
-

+

{content.name || content.title}{' '} {content.first_air_date || content.release_date ? `(${( @@ -117,6 +117,8 @@ const BannerInfo = ({ content, type, runtime }) => { {runtime ? • {formatTime(runtime)} : ' '}

+ + {content.tagline && ( {content.tagline} diff --git a/src/components/details/CastnCrew.js b/src/components/details/CastnCrew.js index 644b090..ce15a4e 100644 --- a/src/components/details/CastnCrew.js +++ b/src/components/details/CastnCrew.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; -import { img200, noUserImg } from '../../helpers/config'; +import { img200, noUserImg } from '../../config/imgConfig'; import SearchBar from '../search/SearchBar'; const CastnCrew = ({ credits, title }) => { diff --git a/src/components/details/CollectionData.js b/src/components/details/CollectionData.js index c7e2d8c..a5e1fa1 100644 --- a/src/components/details/CollectionData.js +++ b/src/components/details/CollectionData.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; -import { img300 } from '../../helpers/config'; +import { img300 } from '../../config/imgConfig'; import { API_URL } from '../../constants/constant'; import ContentGrid from '../widget/ContentGrid'; import LoaderCustom from '../loaders/LoaderCustom'; diff --git a/src/components/details/FactBox.js b/src/components/details/FactBox.js index 9502f54..e06d8d5 100644 --- a/src/components/details/FactBox.js +++ b/src/components/details/FactBox.js @@ -1,12 +1,11 @@ import React from 'react'; -import { img200, noPicture } from '../../helpers/config'; +import { img200, noPicture } from '../../config/imgConfig'; import formatTime from '../../helpers/formatTime'; import { getDirector, getProducer } from '../../helpers/getCrew'; import { getLangDetail } from '../../helpers/getLangDetail'; import CollectionData from './CollectionData'; -// import WatchData from './WatchData'; import { v4 as uuidv4 } from 'uuid'; -import { dateData } from '../../helpers/dateData'; +import { dateSettings } from '../../helpers/dateSettings'; const FactBox = ({ content, type }) => { const { @@ -32,8 +31,6 @@ const FactBox = ({ content, type }) => {

Facts About {title}

- {/* */} - {original_title && (

@@ -109,7 +106,10 @@ const FactBox = ({ content, type }) => {

Release Date : - {new Date(release_date).toLocaleDateString('en-US', dateData)} + {new Date(release_date).toLocaleDateString( + 'en-US', + dateSettings + )}

@@ -120,7 +120,7 @@ const FactBox = ({ content, type }) => {

Release Date : - {new Date(release).toLocaleDateString('en-US', dateData)} + {new Date(release).toLocaleDateString('en-US', dateSettings)}

@@ -131,7 +131,10 @@ const FactBox = ({ content, type }) => {

First Air Date : - {new Date(first_air_date).toLocaleDateString('en-US', dateData)} + {new Date(first_air_date).toLocaleDateString( + 'en-US', + dateSettings + )}

@@ -142,7 +145,10 @@ const FactBox = ({ content, type }) => {

Last Air Date : - {new Date(last_air_date).toLocaleDateString('en-US', dateData)} + {new Date(last_air_date).toLocaleDateString( + 'en-US', + dateSettings + )}

diff --git a/src/components/details/Gallery.js b/src/components/details/Gallery.js index b473686..b14f408 100644 --- a/src/components/details/Gallery.js +++ b/src/components/details/Gallery.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; -import { img500, imgOriginal } from '../../helpers/config'; +import { img500, imgOriginal } from '../../config/imgConfig'; import LightBoxPop from '../widget/LightBoxPop'; const Gallery = ({ title, photos, backdrop_path, poster_path }) => { diff --git a/src/components/details/WatchData.js b/src/components/details/WatchData.js index f83d504..42f9891 100644 --- a/src/components/details/WatchData.js +++ b/src/components/details/WatchData.js @@ -1,18 +1,23 @@ import React, { useEffect, useState } from 'react'; import axios from 'axios'; +import { v4 as uuidv4 } from 'uuid'; import { API_URL } from '../../constants/constant'; +import { img200, noPicture } from '../../config/imgConfig'; const apiKey = `api_key=${process.env.REACT_APP_TMDB}`; const WatchData = ({ type, id }) => { // eslint-disable-next-line const [watchData, setCatchData] = useState([]); + const [country, setCountry] = useState(); const fetchWatchData = async () => { + const country = await axios.get('http://ip-api.com/json'); + setCountry(country.data.countryCode); + const { data } = await axios( `${API_URL}/${type}/${id}//watch/providers?${apiKey}` ); - setCatchData(data.results); }; @@ -21,9 +26,32 @@ const WatchData = ({ type, id }) => { // eslint-disable-next-line }, []); - // console.log(watchData); - - return
; + const CountryWatchData = watchData[country]; + + return ( +
+ {CountryWatchData?.flatrate?.map((item) => ( + + {item.provider_name} +
+ Watch now on{' '} +

{item.provider_name}

+
+ + ))} +
+ ); }; export default WatchData; diff --git a/src/components/nav/Header.js b/src/components/nav/Header.js index 1f8562b..b59d68d 100644 --- a/src/components/nav/Header.js +++ b/src/components/nav/Header.js @@ -18,7 +18,7 @@ const Header = () => { const { user } = useContext(UserContext); return ( - + { )} - + ); }; -const Container = styled.div` +const NavWrap = styled.nav` display: flex; align-items: center; justify-content: space-between; @@ -90,6 +90,10 @@ const Container = styled.div` top: 0; left: 0; z-index: 100; + + @media only screen and (max-width: 480px) { + padding: 10px; + } `; const HeaderRight = styled.div` diff --git a/src/components/options/Options.js b/src/components/options/Options.js index f882fb2..0845179 100644 --- a/src/components/options/Options.js +++ b/src/components/options/Options.js @@ -45,7 +45,7 @@ const Options = ({ options, colored }) => { ); }; -const Navmain = styled.nav` +const Navmain = styled.div` padding: 0px 20px; display: flex; justify-content: center; diff --git a/src/components/person/DetailCard.js b/src/components/person/DetailCard.js index a86f5c3..ef9c0f4 100644 --- a/src/components/person/DetailCard.js +++ b/src/components/person/DetailCard.js @@ -2,7 +2,7 @@ import React from 'react'; import { getAge } from '../../helpers/getAge'; import SocialLinks from '../widget/SocialLinks'; import { v4 as uuidv4 } from 'uuid'; -import { dateData } from '../../helpers/dateData'; +import { dateSettings } from '../../helpers/dateSettings'; const DetailCard = ({ creditData }) => { const { @@ -38,7 +38,7 @@ const DetailCard = ({ creditData }) => {

Born : - {new Date(birthday).toLocaleDateString('en-US', dateData)} + {new Date(birthday).toLocaleDateString('en-US', dateSettings)}

@@ -48,7 +48,7 @@ const DetailCard = ({ creditData }) => {

Died : - {new Date(deathday).toLocaleDateString('en-US', dateData)} + {new Date(deathday).toLocaleDateString('en-US', dateSettings)}

diff --git a/src/components/person/PersonCredits.js b/src/components/person/PersonCredits.js index 59740d1..e50abbb 100644 --- a/src/components/person/PersonCredits.js +++ b/src/components/person/PersonCredits.js @@ -20,6 +20,7 @@ const PersonCredits = ({ credits, media_type }) => { useEffect(() => { setItems(filtered.slice((page - 1) * itemPerPage, itemPerPage * page)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [page, search]); const handleChange = (e) => { diff --git a/src/components/person/PersonGallery.js b/src/components/person/PersonGallery.js index 287d0aa..33c81fc 100644 --- a/src/components/person/PersonGallery.js +++ b/src/components/person/PersonGallery.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { img500, imgOriginal } from '../../helpers/config'; +import { img500, imgOriginal } from '../../config/imgConfig'; import { v4 as uuidv4 } from 'uuid'; import LightBoxPop from '../widget/LightBoxPop'; diff --git a/src/components/person/PersonIntro.js b/src/components/person/PersonIntro.js index f05d739..ae352d3 100644 --- a/src/components/person/PersonIntro.js +++ b/src/components/person/PersonIntro.js @@ -1,11 +1,33 @@ -import React from 'react'; +import React, { useState } from 'react'; import rehypeRaw from 'rehype-raw'; import ReactMarkdown from 'react-markdown'; -import { img500 } from '../../helpers/config'; + +import LightBoxPop from '../widget/LightBoxPop'; +import { img500, imgOriginal } from '../../config/imgConfig'; const PersonIntro = ({ creditData }) => { + const [isOpen, setIsOpen] = useState(false); + const [photoIndex, setPhotoIndex] = useState(0); + + if (isOpen) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'auto'; + } + + const imageArray = [`${imgOriginal}${creditData?.profile_path}`]; + return (
+ {isOpen && ( + + )} + { : 'https://via.placeholder.com/500x750' } alt={creditData?.name} - className="w-60 rounded-md mx-auto md:mx-0" + className="w-60 rounded-md mx-auto md:mx-0 cursor-pointer" + onClick={() => { + if (creditData?.profile_path) { + setIsOpen(true); + setPhotoIndex(0); + } + }} />

diff --git a/src/helpers/config.js b/src/config/imgConfig.js similarity index 100% rename from src/helpers/config.js rename to src/config/imgConfig.js diff --git a/src/data/notFound.js b/src/data/notFound.js new file mode 100644 index 0000000..cdc478d --- /dev/null +++ b/src/data/notFound.js @@ -0,0 +1,33 @@ +import * as ROUTES from '../constants/routes'; + +export const errorPage = [ + { + title: 'Trending', + route: ROUTES.Trending, + }, + { + title: 'Popular Persons', + route: ROUTES.Popular_Persons, + }, + { + title: 'Discover Movies', + route: ROUTES.Series_Discover, + }, + { + title: 'Discover Series', + route: ROUTES.Series_Discover, + }, + + { + title: 'Movie & TV Search', + route: ROUTES.Search, + }, + { + title: 'Person Search', + route: ROUTES.Perosn_Search, + }, + { + title: 'Genres', + route: ROUTES.Genres, + }, +]; diff --git a/src/helpers/dateData.js b/src/helpers/dateSettings.js similarity index 65% rename from src/helpers/dateData.js rename to src/helpers/dateSettings.js index 15059ab..e15cf9a 100644 --- a/src/helpers/dateData.js +++ b/src/helpers/dateSettings.js @@ -1,4 +1,4 @@ -export const dateData = { +export const dateSettings = { day: 'numeric', month: 'short', year: 'numeric', diff --git a/src/helpers/getSlug.js b/src/helpers/getSlug.js new file mode 100644 index 0000000..1160fbf --- /dev/null +++ b/src/helpers/getSlug.js @@ -0,0 +1,5 @@ +export const convertToSlug = (Text) => { + return Text.toLowerCase() + .replace(/ /g, '-') + .replace(/[^\w-]+/g, ''); +}; diff --git a/src/helpers/notification.js b/src/helpers/notificationSettings.js similarity index 80% rename from src/helpers/notification.js rename to src/helpers/notificationSettings.js index 2d41baf..716271b 100644 --- a/src/helpers/notification.js +++ b/src/helpers/notificationSettings.js @@ -1,4 +1,4 @@ -export const settings = { +export const notificationSettings = { position: 'top-right', autoClose: 5000, hideProgressBar: false, diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index de4d887..f74cd5a 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -52,7 +52,9 @@ const Dashboard = () => {

) ) : ( -

Fetching Your list...

+

+ Fetching Your Watchlist... +

)} diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js index 3d6a937..780afb4 100644 --- a/src/pages/NotFound.js +++ b/src/pages/NotFound.js @@ -1,23 +1,8 @@ -import React, { useEffect } from 'react'; -import styled from 'styled-components'; +import React from 'react'; +import NotFound from '../404/NotFound'; -const NotFound = () => { - useEffect(() => { - document.title = 'Page not found'; - }, []); - - return ( - -

Not Found

- - ); +const NotFoundPage = () => { + return ; }; -const NotFoundWrap = styled.div` - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; -`; - -export default NotFound; +export default NotFoundPage; diff --git a/src/pages/search/MovieTVSearch.js b/src/pages/search/MovieTVSearch.js index 45835eb..bddbded 100644 --- a/src/pages/search/MovieTVSearch.js +++ b/src/pages/search/MovieTVSearch.js @@ -20,7 +20,7 @@ const MovieTVSearch = () => { const [type, setType] = useState('movie'); const [page, setPage] = useState(1); const [searchText, setSearchText] = useState(''); - const [contents, setContents] = useState([]); + const [contents, setContents] = useState(); const [numOfPages, setNumOfPages] = useState(); // Tabs @@ -40,7 +40,7 @@ const MovieTVSearch = () => { `${searchURL}${type}?${apiKey}&language=en-US&query=${searchText}&page=${page}` ); - setContents(data.results); + setContents(data); setNumOfPages(data.total_pages); }; @@ -106,11 +106,27 @@ const MovieTVSearch = () => {

- - - {searchText && !contents &&

Try searching something else

} - - {numOfPages > 1 && contents.length > 0 && ( + {contents === undefined ? ( + '' + ) : ( + <> + {searchText && contents.results.length > 0 ? ( + <> +

+ Found {contents.total_results} Result(s) with{' '} +

+ + + ) : ( +

+ Oops, No Results Found +
+ Try searching something else +

+ )} + + )} + {numOfPages > 1 && contents.results.length > 0 && ( )} diff --git a/src/pages/search/PersonSearch.js b/src/pages/search/PersonSearch.js index f62283d..9d05d4c 100644 --- a/src/pages/search/PersonSearch.js +++ b/src/pages/search/PersonSearch.js @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import DocumentMeta from 'react-document-meta'; -import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; import { Container, PageTitle } from '../../styles/Styles'; @@ -17,15 +16,15 @@ const apiKey = `api_key=${process.env.REACT_APP_TMDB}`; const PersonSearch = () => { const [page, setPage] = useState(1); const [searchText, setSearchText] = useState(''); - const [persons, setPersons] = useState([]); + const [persons, setPersons] = useState(); const [numOfPages, setNumOfPages] = useState(); const fetchSearch = async () => { const { data } = await axios.get( - `${searchURL}?${apiKey}&language=en-US&query=${searchText}&page=${page}$` + `${searchURL}?${apiKey}&language=en-US&query=${searchText}&page=${page}` ); - setPersons(data.results); + setPersons(data); setNumOfPages(data.total_pages); }; @@ -73,15 +72,32 @@ const PersonSearch = () => { /> -
- {persons.map((person) => ( - - ))} -
- - {searchText && !persons &&

Try searching something else

} + {persons === undefined ? ( + '' + ) : ( + <> + {searchText && persons.results.length > 0 ? ( + <> +

+ Found {persons.total_results} Result(s) +

+
+ {persons?.results.map((person) => ( + + ))} +
+ + ) : ( +

+ Oops, No Results Found +
+ Try searching something else +

+ )} + + )} - {numOfPages > 1 && persons.length > 0 && ( + {numOfPages > 1 && persons.results.length > 0 && ( )} @@ -89,17 +105,4 @@ const PersonSearch = () => { ); }; -const Tab = styled.div` - width: 50%; - white-space: nowrap; - padding: 12px 18px; - line-height: 1; - border: ${(props) => - props.active ? '2px solid rgb(96, 165, 250)' : '2px solid transparent'}; - opacity: ${(props) => (props.active ? '1' : '.8')}; - background-color: ${(props) => - props.active ? 'white' : 'rgb(195, 221, 253)'}; - transition: background-color 0.5s ease-in-out; -`; - export default PersonSearch; diff --git a/src/pages/topic/Genres.js b/src/pages/topic/Genres.js index 04cd54c..e6d5e25 100644 --- a/src/pages/topic/Genres.js +++ b/src/pages/topic/Genres.js @@ -49,7 +49,7 @@ const GenresPage = () => { }; const GenreGrid = ({ title, genres, type }) => ( - <> +
{title}
{genres.length > 0 && @@ -62,7 +62,7 @@ const GenresPage = () => { ))}
- +
); return ( diff --git a/src/pages/withid/DetailsPage.js b/src/pages/withid/DetailsPage.js index d2e628a..af37f8c 100644 --- a/src/pages/withid/DetailsPage.js +++ b/src/pages/withid/DetailsPage.js @@ -12,7 +12,7 @@ import Recommended from '../../components/details/Recomamded'; import Gallery from '../../components/details/Gallery'; import { API_URL, BASE_URL } from '../../constants/constant'; -import { img500 } from '../../helpers/config'; +import { img500 } from '../../config/imgConfig'; import { Container } from '../../styles/Styles'; import LoaderCustom from '../../components/loaders/LoaderCustom'; @@ -99,11 +99,11 @@ const DetailsPage = () => { return ( + {content && ( + + )} - {content && ( - - )} -
+
{ const { gid } = useParams(); @@ -17,18 +18,20 @@ const GenreDetail = () => { const apiKey = `api_key=${process.env.REACT_APP_TMDB}`; const [contentGens, setContentGens] = useState(); + const [page, setPage] = useState(1); const fetchDataGen = async () => { const { data } = await axios.get( - `${genresURL}${apiKey}&with_genres=${gid}` + `${genresURL}${apiKey}&with_genres=${gid}&page=${page}` ); + setContentGens(data.results); }; useEffect(() => { fetchDataGen(); // eslint-disable-next-line - }, []); + }, [page]); const getType = type === 'movie' ? 'Movies' : 'TV Series'; const getSlug = `/genre/${type}/${name}/${gid}`; @@ -54,6 +57,7 @@ const GenreDetail = () => { + {contentGens?.length > 0 && } ); diff --git a/src/pages/withid/PersonDetail.js b/src/pages/withid/PersonDetail.js index 0ead25f..a27405d 100644 --- a/src/pages/withid/PersonDetail.js +++ b/src/pages/withid/PersonDetail.js @@ -2,14 +2,14 @@ import axios from 'axios'; import React, { useEffect, useState } from 'react'; import DocumentMeta from 'react-document-meta'; import { useParams } from 'react-router-dom'; + import DetailCard from '../../components/person/DetailCard'; import PersonIntro from '../../components/person/PersonIntro'; import PresonTabs from '../../components/person/PresonTabs'; -import { API_URL, BASE_URL } from '../../constants/constant'; - import { Container } from '../../styles/Styles'; -import { img500 } from '../../helpers/config'; +import { img500 } from '../../config/imgConfig'; import LoaderCustom from '../../components/loaders/LoaderCustom'; +import { API_URL, BASE_URL } from '../../constants/constant'; const detailURL = `${API_URL}/`; const apiKey = `api_key=${process.env.REACT_APP_TMDB}`; @@ -26,12 +26,16 @@ const PersonDetail = () => { `${detailURL}person/${id}?${apiKey}&language=en&append_to_response=external_ids,movie_credits,tv_credits,images` ); + console.log(data); + setCreditData(data); setLoading(false); }; useEffect(() => { fetchData(); + + return () => {}; // eslint-disable-next-line }, []);