revision, and minor fixes

11 files changed, 103 insertions, 143 deletions

diff --git a/app/browse/page.tsx b/app/browse/page.tsx
index 7806738..461586c 100644
--- a/app/browse/page.tsx
+++ b/app/browse/page.tsx
@@ -14,7 +14,7 @@ import { signOut } from 'firebase/auth';
 import { AuthContext } from '../components/AuthContext'

 

 // import NetflixLogo from '../../../public/images/netflix_logo.svg'

-const baseURL ='https://api.themoviedb.org/3/'

+const baseURL ='https://api.themoviedb.org/3'

 const imageURL = 'https://image.tmdb.org/t/p/original'

 

 const Home = () => {

@@ -59,7 +59,11 @@ const Home = () => {
 

   useEffect(() => {

     fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {

-      setHeroMovie(data.results[3])

+      setHeroMovie(data.results[0]);

+      console.log('toprated');

+      console.log(data.results[0]);

+      console.log(imageURL);

+      console.log(heroMovie?.backdrop_path);

     })

   }, [])

   useEffect(() => {

@@ -91,9 +95,9 @@ const Home = () => {
           <a className='text-white'>Kids</a>

           <BellIcon className='h-4 w-4'/>

           <div className='h-8 w-8'>

-              <Link href='../' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">

-                <img src='https://avatars.dicebear.com/api/male/124.svg' alt=""/>

-              </Link>

+      <Link href='../' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">

+      <img src='https://api.dicebear.com/9.x/adventurer/svg?seed=alberto' alt="User Avatar"/>

+      </Link>

           </div>

               <ArrowSmallDownIcon className='h-4 w-4 cursor-pointer' onClick={logoutUser}/>

         </div>

@@ -105,7 +109,7 @@ const Home = () => {
           </div>

           <div className='h-fit text-[3rem]'>

               {heroMovie?.original_title}

-          </div>

+    </div>

           <div className='flex items-center'>

             <img className='scale-[45%]' src="../images/Top10.svg" alt="SVG image"/> 

             <h2 className='font-bold'>#1 in TV Shows Today</h2>

@@ -150,4 +154,4 @@ const Home = () => {
     </div>

   )

 }

-export default Home;
\ No newline at end of file
+export default Home;

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

diff --git a/app/hello/page.tsx b/app/hello/page.tsx
deleted file mode 100644
index 89e730e..0000000
--- a/app/hello/page.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'

-import { signInWithEmailAndPassword } from "firebase/auth";

-import Link from "next/link";

-import { auth } from "../../services/firebase";

-

-export default function Hello() {

-  let email = ''

-  let isValidEmail = ''

-  let setIsValidEmail = ''

-  let password = ''

-  let isValidPassword = ''

-  let setIsValidPassword = ''

-  let setIsPasswordVisible = ''

-  let se

-

-  const emailValidation = () => {

-    const emailRegex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

-    if (!email || emailRegex.test(email) === false) {

-      setIsValidEmail(false);

-      return false;

-    }

-    setIsValidEmail(true);

-    return true;

-  };

-

-  const passwordValidation = () => {

-    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{8,}$/i;

-

-    if (!password || passwordRegex.test(password) === false) {

-      setIsValidPassword(false)

-      return false

-    }

-    setIsValidPassword(true)

-    return true

-  }

-

-  const debounce = fn => {

-    let id = null;

-

-    return (...args) => {

-      if (id) {

-        clearTimeout(id);

-      }

-      id = setTimeout(() => {

-        fn(...args);

-        id = null;

-      }, 300);

-    };

-  };

-

-  const loginUser = () => {

-    if (isValidEmail && isValidPassword) {

-      signInWithEmailAndPassword(auth, email, password)

-        .then(data => {console.log(data.user)

-        

-          console.log('User signed in successfully!');

-          router.push('/browse');

-        }) 

-          // Navigate to the home screen or other desired screen

-        .catch(error => {

-          console.error(error);

-          // Display an error message to the user

-        });

-    }

-  };

-

-  return (

-    <div className='text-white flex flex-col items-center justify-center h-screen'>

-      <h1 className='text-2xl font-bold mb-6'>Login</h1>

-      <form className='w-64' >

-        <div className='mb-4'>

-          <label htmlFor='email' className='block font-medium mb-1'>Email:</label>

-          <input type="email" id='email' className='text-black w-full px-3 py-2 border rounded'/>

-        </div>

-        <div className='mb-4'>

-          <label htmlFor="password" className='block font-medium mb-1'>Password:</label>

-          <input type='password' id='password' className='text-black w-full px-3 py-2 border rounded'/>

-        </div>

-            <button type="submit" className='w-full py-2 bg-red-600 text-white font-medium rounded'>

-              Login

-            </button>

-      </form>

-

-       <div className="mt-4">

-         Don't have an account?{' '}

-               <Link href='../register' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">

-                 <p>Create account</p>

-               </Link>

-       </div>

-

-       <div className="mt-2">

-         Forgot your password?{' '}

-               <Link href='../password-recovery' className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">

-                 <p>Recover</p>

-               </Link>

-       </div>

-    </div>

-  );

-}

diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..b903c5a
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,8 @@
+// app/page.tsx
+
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/login');
+  return null; // Since the redirect is immediate, nothing will render here
+}
diff --git a/app/page.tsx~ b/app/page.tsx~
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/page.tsx~
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index fca89a5..1a9c29a 100644
--- a/app/profiles/page.tsx
+++ b/app/profiles/page.tsx
@@ -28,8 +28,8 @@ export default function Profiles() {
         {
           USERS.map((user, index) => (
             <div key={index} className="flex flex-col items-center justify-center">
-              <Link href={'/browse'} className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
-                <Image src={user.avatar} width={128} height={128} alt=""/>
+<Link href={'/browse'} className="w-[128px] h-[128px] rounded-xl overflow-hidden bg-white">
+  <img src={user.avatar} alt="" className="w-full h-full" />
               </Link>
               <p className="text-gray-400 text-xs">{user.name}</p>
             </div>
@@ -42,15 +42,15 @@ export default function Profiles() {
 const USERS = [
   {
     name:'Alberto',
-    avatar:'https://avatars.dicebear.com/api/male/124.svg'
+    avatar:'https://api.dicebear.com/9.x/adventurer/svg?seed=alberto'
   },
   {
     name:'Kids',
-    avatar:'https://avatars.dicebear.com/api/male/122.svg'
+    avatar:'https://api.dicebear.com/9.x/adventurer/svg?seed=kids'
   },
   {
     name:'Add profile',
-    avatar:'https://avatars.dicebear.com/api/female/12.svg'
+    avatar:'https://api.dicebear.com/9.x/adventurer/svg?seed=add'
     // icon:'...'
   }
-]
\ No newline at end of file
+]
diff --git a/app/register/page.tsx b/app/register/page.tsx
index 45941fd..d480ab1 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -76,6 +76,10 @@ const Register = () => {
 

 

   const registerUser = () => {

+        console.log(email);

+    console.log(password);

+    console.log(isValidEmail);

+    console.log(isValidPassword);

   if (isValidEmail && isValidPassword) {

     createUserWithEmailAndPassword(auth, email, password)

         .then(() => {

@@ -120,4 +124,4 @@ const Register = () => {
   );

 }

 

-export default Register;
\ No newline at end of file
+export default Register;

diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..00da9aa
--- /dev/null
+++ b/bun.lockb
diff --git a/services/requests.tsx b/services/requests.tsx
index b11982d..8914a7d 100644
--- a/services/requests.tsx
+++ b/services/requests.tsx
@@ -6,4 +6,4 @@ const requests = {
     fetchTrendingTv: `/trending/tv/day?api_key=${API_KEY}`,

 }

 

-export default requests
\ No newline at end of file
+export default requests