From 72cf36e033ba794db7982befa45f035b62fa6cd2 Mon Sep 17 00:00:00 2001
From: "Alberto Duarte (PWC)" <alberto.duarte.delgado@pwc.com>
Date: Mon, 9 Oct 2023 17:32:25 +0100
Subject: Changes

---
 app/browse/page.tsx | 153 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 app/browse/page.tsx

(limited to 'app/browse')

diff --git a/app/browse/page.tsx b/app/browse/page.tsx
new file mode 100644
index 0000000..7806738
--- /dev/null
+++ b/app/browse/page.tsx
@@ -0,0 +1,153 @@
+'use client'
+import { link } from 'fs'
+import Link from 'next/link'
+import { BellIcon, MagnifyingGlassIcon, PlayIcon, ArrowSmallDownIcon} from '@heroicons/react/24/solid'
+import { InformationCircleIcon} from '@heroicons/react/24/outline'
+import { useEffect, useState, useContext } from 'react'
+import requests from '../../services/requests'
+import Image from "next/image"
+import PreviewCard from '../components/PreviewCard'
+import Modal from '../components/Modal'
+import { auth } from '../../services/firebase';
+import { useRouter } from 'next/navigation';
+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 imageURL = 'https://image.tmdb.org/t/p/original'
+
+const Home = () => {
+  const router = useRouter();
+  const [heroMovie, setHeroMovie] = useState()
+  const [trendingMovies, setTrendingMovies] = useState()
+  const [trendingTv, setTrendingTv] = useState()
+  const [modalVisible, setModalVisible] = useState(false)
+  const [modalContent, setModalContent] = useState()
+  const user = useContext(AuthContext);
+
+  useEffect(() => {
+    // Check if user is authenticated
+    if (!user) {
+      // Redirect or perform any necessary action
+      router.push('/login');
+    } else {
+      // User is authenticated, continue with desired logic
+    }
+  }, [user]);
+
+    useEffect(() => {
+    const user = auth.currentUser;
+    if (!user) {
+      // User is not signed in, redirect to the login page
+      router.push('/login');
+    }
+  }, []);
+
+  const logoutUser = () => {
+      signOut(auth)
+        .then(() => {
+          console.log('User signed Out!');
+          // Navigate to the home screen or other desired screen
+          router.push('/login');
+        })
+        .catch(error => {
+          console.error(error);
+          // Display an error message to the user
+        });
+    }
+
+  useEffect(() => {
+    fetch(`${baseURL}${requests.fetchTopRated}`).then(res => res.json()).then((data) => {
+      setHeroMovie(data.results[3])
+    })
+  }, [])
+  useEffect(() => {
+    fetch(`${baseURL}${requests.fetchTrendingMovies}`).then(res => res.json()).then((data) => {
+      setTrendingMovies(data.results)
+      console.log(data.results)
+    })
+  }, [])
+  useEffect(() => {
+    fetch(`${baseURL}${requests.fetchTrendingTv}`).then(res => res.json()).then((data) => {
+      setTrendingTv(data.results)
+    })
+  }, [])
+
+  return (
+    <div className="flex flex-col text-white justify-between gap-10 h-screen">
+      <header className='flex justify-between pt-3 px-8 z-10 text-xs'>
+        <div className='flex items-center gap-4'>
+          <img className='scale-[65%] mr-4' src="../images/netflix_logo.svg" alt="SVG image"/> 
+          <a className='text-white font-bold'>Home</a>
+          <a className='text-white'>TV Shows</a>
+          <a className='text-white'>Movies</a>
+          <a className='text-white'>News & Popular</a>
+          <a className='text-white'>My List</a>
+          <a className='text-white'>Browse by Language</a>
+        </div>
+        <div className='flex items-center gap-4'>
+          <MagnifyingGlassIcon className='h-4 w-4'/>
+          <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>
+          </div>
+              <ArrowSmallDownIcon className='h-4 w-4 cursor-pointer' onClick={logoutUser}/>
+        </div>
+      </header>
+        <section className='w-1/3 ml-10'>
+          <div className='flex items-center'>
+            <img className='scale-[65%] mr-5' src="../images/N.svg" alt="SVG image"/> 
+            <h1 className='text-sm font-mono tracking-[.4rem]'>MOVIES</h1>
+          </div>
+          <div className='h-fit text-[3rem]'>
+              {heroMovie?.original_title}
+          </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>
+          </div>
+          <div>
+            <p className=' text-sm break-words text-justify'>
+              {heroMovie?.overview}
+            </p>
+          </div>
+          <div className='flex gap-4 mt-4'>
+            <button className='flex items-center p-4 h-10 bg-white text-black text-xl justify-center font-semibold rounded hover:outline outline-offset-4 outline-4 outline-white'>
+              <PlayIcon className='h-6 w-6 mr-2'/>Play
+            </button>
+            <button className='flex items-center p-4 h-10 bg-gray-700/80 justify-center rounded hover:outline outline-offset-4 outline-4'>
+              <InformationCircleIcon className='h-6 w-6 mr-2'/>More Info
+            </button>
+          </div>
+        </section>
+        <section className=' ml-10 mb-10 z-10'>
+          <h2>Popular on Netflix</h2>
+          <div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-6 pl-10 -ml-10'>
+            {
+              trendingMovies?.map((movie, index) => (
+                <PreviewCard key={index} movie={movie} setModalContentId={setModalContent} setModalVisible={setModalVisible}/>
+            ))} 
+          </div>
+        </section>
+        <section className=' ml-10 mb-10 z-10'>
+          <h2>Tv Shows</h2>
+          <div className='flex flex-row gap-3 overflow-x-auto mt-4 items-center p-5 pl-10 -ml-10'>
+            {
+              trendingTv?.map((movie, index) => (
+                <PreviewCard key={index} movie={movie} setModalContentId={setModalContent} setModalVisible={setModalVisible}/>
+            ))} 
+          </div>
+        </section>
+      <Modal modalContent={modalContent} setModalVisible={setModalVisible} modalVisible={modalVisible}/>
+      <div className='absolute h-full w-full bg-contain bg-right -z-20 bg-no-repeat' style={{backgroundImage: `url(${imageURL}${heroMovie?.backdrop_path})`}}></div>
+      <div className='absolute w-full h-32 -z-10 bg-gradient-to-b from-black'></div>
+      <div className='absolute bottom-0 w-full h-20 -z-10 bg-gradient-to-t from-black'></div>
+      <div className='absolute w-2/3 h-full -z-10 bg-gradient-to-r from-black'></div>
+    </div>
+  )
+}
+export default Home;
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf