From eb5987108e36136bc079873499f95567b9051029 Mon Sep 17 00:00:00 2001 From: Alberto Mac Date: Mon, 26 Aug 2024 18:52:46 +0100 Subject: revision, and minor fixes --- app/browse/page.tsx | 18 +++++--- app/components/Genre.tsx | 84 ++++++++++++++++++++++++---------- app/components/Modal.tsx | 15 +++++-- app/components/PreviewCard.tsx | 2 +- app/hello/page.tsx | 99 ----------------------------------------- app/page.tsx | 8 ++++ app/page.tsx~ | 0 app/profiles/page.tsx | 12 ++--- app/register/page.tsx | 6 ++- bun.lockb | Bin 0 -> 255358 bytes services/requests.tsx | 2 +- 11 files changed, 103 insertions(+), 143 deletions(-) delete mode 100644 app/hello/page.tsx create mode 100644 app/page.tsx create mode 100644 app/page.tsx~ create mode 100755 bun.lockb 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 = () => { Kids
- - - + + User Avatar +
@@ -105,7 +109,7 @@ const Home = () => {
{heroMovie?.original_title} -
+
SVG image

#1 in TV Shows Today

@@ -150,4 +154,4 @@ const Home = () => {
) } -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 ( -
- {genres?.map((genre, index) => { - return ( -
{genre.name}
- ) - })} -
- ) -} - -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
Loading genres...
; + } + + if (notFound) { + // Instead of throwing an error, simply render nothing if the movie is not found + return null; + } + + return ( +
+ {genres.map((genre, index) => ( +
{genre.name}
+ ))} +
+ ); +}; + +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 }) => {

{modalContent?.original_name}{modalContent?.original_title}

{modalContent?.overview}

-
-
+
+
+
+
+
{ similarMovies?.map((movie, index) => ( @@ -59,6 +65,7 @@ const Modal = ({ modalVisible, modalContent, setModalVisible, type }) => { ))}
+
) 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 ( -
-

Login

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

Create account

- -
- -
- Forgot your password?{' '} - -

Recover

- -
-
- ); -} 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 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) => (
- - + +

{user.name}

@@ -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 Binary files /dev/null and b/bun.lockb differ 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 -- cgit v1.2.3-54-g00ecf