From eb5987108e36136bc079873499f95567b9051029 Mon Sep 17 00:00:00 2001
From: Alberto Mac <alberto.duarte.delgado@pwc.com>
Date: Mon, 26 Aug 2024 18:52:46 +0100
Subject: revision, and minor fixes

---
 app/components/Genre.tsx       | 84 ++++++++++++++++++++++++++++++------------
 app/components/Modal.tsx       | 15 ++++++--
 app/components/PreviewCard.tsx |  2 +-
 3 files changed, 72 insertions(+), 29 deletions(-)

(limited to 'app/components')

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
-- 
cgit v1.2.3-54-g00ecf