diff options
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/Genre.tsx | 84 | ||||
| -rw-r--r-- | app/components/Modal.tsx | 15 | ||||
| -rw-r--r-- | app/components/PreviewCard.tsx | 2 |
3 files changed, 72 insertions, 29 deletions
diff --git a/app/components/Genre.tsx b/app/components/Genre.tsx index 13e7ed2..0e90b84 100644 --- a/app/components/Genre.tsx +++ b/app/components/Genre.tsx @@ -1,24 +1,60 @@ -import { useEffect, useState } from "react"
-
-const Genres = ({id}) => {
-
- const [genres, setGenres] = useState()
-
- useEffect(() => {
- fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=8216fbb9997cd81a67471e6cb5a6f2df`).then((res) => res.json()).then((data) => {
- setGenres(data?.genres)
- })
- }, [id])
-
- return (
- <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
- {genres?.map((genre, index) => {
- return (
- <div key={index}>{genre.name}</div>
- )
- })}
- </div>
- )
-}
-
-export default Genres
\ No newline at end of file +import { useEffect, useState } from "react";
+
+const Genres = ({ id }) => {
+ const [genres, setGenres] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [notFound, setNotFound] = useState(false);
+
+ useEffect(() => {
+ if (!id) return; // Prevent API call if id is undefined or null
+
+ const fetchGenres = async () => {
+ setLoading(true);
+ setNotFound(false); // Reset the notFound state on each new request
+ try {
+ const response = await fetch(
+ `https://api.themoviedb.org/3/movie/${id}?api_key=8216fbb9997cd81a67471e6cb5a6f2df`
+ );
+
+ if (response.status === 404) {
+ console.log('test');
+ setNotFound(true);
+ return;
+ }
+ if (!response.ok) {
+ // If the response is not okay, just set the notFound flag
+ setNotFound(true);
+ return;
+ }
+
+ const data = await response.json();
+ setGenres(data.genres || []);
+ } catch (err) {
+ console.error("An error occurred while fetching genres:", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchGenres();
+ }, [id]);
+
+ if (loading) {
+ return <div className="text-white/60 text-xs">Loading genres...</div>;
+ }
+
+ if (notFound) {
+ // Instead of throwing an error, simply render nothing if the movie is not found
+ return null;
+ }
+
+ return (
+ <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
+ {genres.map((genre, index) => (
+ <div key={index}>{genre.name}</div>
+ ))}
+ </div>
+ );
+};
+
+export default Genres;
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index e783cfa..dd2e850 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react' import { XMarkIcon } from '@heroicons/react/24/outline'
import Genre from './Genre'
-const baseURL = 'https://api.themoviedb.org/3/'
+const baseURL = 'https://api.themoviedb.org/3'
const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => {
const [content, setContent] = useState()
@@ -14,7 +14,10 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => { })
}, [modalContent])
useEffect(() => {
- if (modalContent) {
+ if (modalContent) {
+ console.log(baseURL);
+ console.log(modalContent.media_type);
+ console.log(modalContent.id);
fetch(`${baseURL}/${modalContent.media_type}/${modalContent.id}/videos?api_key=${API_KEY}`)
.then((res) => res.json())
.then((data) => {
@@ -42,8 +45,11 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => { <Genre id={modalContent?.id} />
<h3 className={'text-xl'}>{modalContent?.original_name}{modalContent?.original_title}</h3>
<p className='w-full break-words h-[70px] overflow-y-auto'>{modalContent?.overview}</p>
- <hr className='my-4'/>
- <div className='flex flex-row overflow-x-auto gap-8'>
+ <hr className='my-4'/>
+ <div className='relative'>
+ <div className="absolute left-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-r from-gray-800"></div>
+ <div className="absolute right-0 top-0 bottom-0 w-16 z-50 pointer-events-none bg-gradient-to-l from-gray-800"></div>
+ <div className='flex flex-row overflow-x-auto gap-8 relative'>
{
similarMovies?.map((movie, index) => (
@@ -59,6 +65,7 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => { ))}
</div>
</div>
+ </div>
</div>
</div>
)
diff --git a/app/components/PreviewCard.tsx b/app/components/PreviewCard.tsx index 132f50a..0a15949 100644 --- a/app/components/PreviewCard.tsx +++ b/app/components/PreviewCard.tsx @@ -17,4 +17,4 @@ const PreviewCard = ({ movie, setModalContentId, setModalVisible }) => { )}
-export default PreviewCard
\ No newline at end of file +export default PreviewCard
|