From 69b9513a19e8d0aa280bae8ec7b91dd5e81de2fa Mon Sep 17 00:00:00 2001 From: "Alberto Duarte (PWC)" Date: Mon, 9 Oct 2023 17:31:33 +0100 Subject: Second commit --- screens/discover.js | 12 +- screens/home.js | 324 +++++++++++++++++------------------ screens/modal.js | 34 ++-- screens/passwordRecovery.js | 108 ++++++------ screens/profile.js | 42 ++--- screens/signin.js | 356 +++++++++++++++++++-------------------- screens/signup.js | 402 ++++++++++++++++++++++---------------------- screens/topRated.js | 12 +- 8 files changed, 645 insertions(+), 645 deletions(-) (limited to 'screens') diff --git a/screens/discover.js b/screens/discover.js index 0213eed..924308a 100644 --- a/screens/discover.js +++ b/screens/discover.js @@ -1,6 +1,6 @@ -import {Text} from 'react-native'; -const Discover = () => { - return Discover; -}; - -export default Discover; +import {Text} from 'react-native'; +const Discover = () => { + return Discover; +}; + +export default Discover; diff --git a/screens/home.js b/screens/home.js index 184bbf9..9d5addc 100644 --- a/screens/home.js +++ b/screens/home.js @@ -1,162 +1,162 @@ -import {useCallback, useEffect, useState} from 'react'; -import { - ImageBackground, - Platform, - Pressable, - SafeAreaView, - ScrollView, - Text, - TextInput, - View, -} from 'react-native'; -import tw from 'twrnc'; -import {useDeviceContext} from 'twrnc'; -import requests from '../lib/requests'; -import PreviewCard from '../components/PreviewCard'; -import Modal from './modal'; -//ICONS -import {TvIcon} from 'react-native-heroicons/outline'; -import {MagnifyingGlassIcon} from 'react-native-heroicons/outline'; -import {ChevronDownIcon} from 'react-native-heroicons/solid'; -import {UserIcon} from 'react-native-heroicons/outline'; -import ImageColors from 'react-native-image-colors'; -import LinearGradient from 'react-native-linear-gradient'; - -const Home = ({navigation}) => { - useDeviceContext(tw); - const imgAssets = process.env.IMG_ASSETS; - const [heroMovie, setHeroMovie] = useState(); - const [heroMovieColor, setHeroMovieColor] = useState(); - const [topRatedMovies, setTopRatedMovies] = useState(); - const [isModalVisible, setModalVisible] = useState(false); - const [modalContent, setModalContent] = useState(); - - const toggleModal = (movie) => { - setModalVisible(!isModalVisible); - setModalContent(movie); -}; - - useEffect(() => { - fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=f247ff737ec8062f3b5e027789eab748&language=en`) - .then(res => res.json()) - .then(data => { - setHeroMovie(data.results[1]); - setTopRatedMovies(data.results) - }); - }, []); - - useEffect(() => { - const fetchColor = async () => { - const data = await ImageColors.getColors( - `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`, - { - fallback: '#000000', - cache: true, - key: 'unique_key', - }, - ).then(data => { - if (Platform.OS === 'ios') { - setHeroMovieColor(data.primary); - } else { - setHeroMovieColor(data.average); - } - }); - } - if (heroMovie?.poster_path != undefined) { - fetchColor() - .catch(e => { - console.log(e) - return e - }); - } - }, [heroMovie]) - - return ( - - - - - For Matias - - - - - - - - - navigation.navigate('Profile')} - style={tw`rounded bg-white/20 w-6 h-6 flex items-center justify-center`} - > - - - - - - - TV Shows - - - Movies - - - Categories - - - - - - - {heroMovieColor !== undefined && ( - - )} - - Popular on Netflix - - { - topRatedMovies?.map((movie, index) => ( - toggleModal(movie)}> - - - ))} - - - {isModalVisible && ( - - )} - - - ); -}; - -export default Home; +import {useCallback, useEffect, useState} from 'react'; +import { + ImageBackground, + Platform, + Pressable, + SafeAreaView, + ScrollView, + Text, + TextInput, + View, +} from 'react-native'; +import tw from 'twrnc'; +import {useDeviceContext} from 'twrnc'; +import requests from '../lib/requests'; +import PreviewCard from '../components/PreviewCard'; +import Modal from './modal'; +//ICONS +import {TvIcon} from 'react-native-heroicons/outline'; +import {MagnifyingGlassIcon} from 'react-native-heroicons/outline'; +import {ChevronDownIcon} from 'react-native-heroicons/solid'; +import {UserIcon} from 'react-native-heroicons/outline'; +import ImageColors from 'react-native-image-colors'; +import LinearGradient from 'react-native-linear-gradient'; + +const Home = ({navigation}) => { + useDeviceContext(tw); + const imgAssets = process.env.IMG_ASSETS; + const [heroMovie, setHeroMovie] = useState(); + const [heroMovieColor, setHeroMovieColor] = useState(); + const [topRatedMovies, setTopRatedMovies] = useState(); + const [isModalVisible, setModalVisible] = useState(false); + const [modalContent, setModalContent] = useState(); + + const toggleModal = (movie) => { + setModalVisible(!isModalVisible); + setModalContent(movie); +}; + + useEffect(() => { + fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=f247ff737ec8062f3b5e027789eab748&language=en`) + .then(res => res.json()) + .then(data => { + setHeroMovie(data.results[1]); + setTopRatedMovies(data.results) + }); + }, []); + + useEffect(() => { + const fetchColor = async () => { + const data = await ImageColors.getColors( + `https://image.tmdb.org/t/p/original${heroMovie?.poster_path}`, + { + fallback: '#000000', + cache: true, + key: 'unique_key', + }, + ).then(data => { + if (Platform.OS === 'ios') { + setHeroMovieColor(data.primary); + } else { + setHeroMovieColor(data.average); + } + }); + } + if (heroMovie?.poster_path != undefined) { + fetchColor() + .catch(e => { + console.log(e) + return e + }); + } + }, [heroMovie]) + + return ( + + + + + For Matias + + + + + + + + + navigation.navigate('Profile')} + style={tw`rounded bg-white/20 w-6 h-6 flex items-center justify-center`} + > + + + + + + + TV Shows + + + Movies + + + Categories + + + + + + + {heroMovieColor !== undefined && ( + + )} + + Popular on Netflix + + { + topRatedMovies?.map((movie, index) => ( + toggleModal(movie)}> + + + ))} + + + {isModalVisible && ( + + )} + + + ); +}; + +export default Home; diff --git a/screens/modal.js b/screens/modal.js index 43181e4..1d51891 100644 --- a/screens/modal.js +++ b/screens/modal.js @@ -1,18 +1,18 @@ -import { Pressable, SafeAreaView, Text, View } from 'react-native'; -import tw from 'twrnc'; -import PreviewCard from '../components/PreviewCard'; - -const Modal = ({ closeModal, movie }) => { - return ( - - - {movie?.original_name || movie?.original_title} - - Dismiss - - - - ); -}; - +import { Pressable, SafeAreaView, Text, View } from 'react-native'; +import tw from 'twrnc'; +import PreviewCard from '../components/PreviewCard'; + +const Modal = ({ closeModal, movie }) => { + return ( + + + {movie?.original_name || movie?.original_title} + + Dismiss + + + + ); +}; + export default Modal; \ No newline at end of file diff --git a/screens/passwordRecovery.js b/screens/passwordRecovery.js index 61a5f10..94d00f2 100644 --- a/screens/passwordRecovery.js +++ b/screens/passwordRecovery.js @@ -1,54 +1,54 @@ -import { - Keyboard, - KeyboardAvoidingView, - Platform, - Pressable, - SafeAreaView, - Text, - TextInput, - TouchableWithoutFeedback, - View, -} from 'react-native'; - -import tw from 'twrnc'; - -import Logo from '../static/images/netflix-logo.svg'; - -const PasswordRecovery = ({navigation}) => { - return ( - - { - Keyboard.dismiss(); - }} - > - - - - - Recuperar contraseña - - - Recuperar contraseña - - navigation.goBack()} style={tw`mb-16`}> - Volver - - - - - - ); -}; - -export default PasswordRecovery; +import { + Keyboard, + KeyboardAvoidingView, + Platform, + Pressable, + SafeAreaView, + Text, + TextInput, + TouchableWithoutFeedback, + View, +} from 'react-native'; + +import tw from 'twrnc'; + +import Logo from '../static/images/netflix-logo.svg'; + +const PasswordRecovery = ({navigation}) => { + return ( + + { + Keyboard.dismiss(); + }} + > + + + + + Recuperar contraseña + + + Recuperar contraseña + + navigation.goBack()} style={tw`mb-16`}> + Volver + + + + + + ); +}; + +export default PasswordRecovery; diff --git a/screens/profile.js b/screens/profile.js index 0bd1cd9..53f71f0 100644 --- a/screens/profile.js +++ b/screens/profile.js @@ -1,21 +1,21 @@ -import React, { Component } from 'react'; -import { View, Text , Pressable} from 'react-native'; -import tw from 'twrnc' -import auth from '@react-native-firebase/auth'; - - -const Profile = () => { - return ( - - auth().signOut()} - > - Logout - - - ); -} - - -export default Profile; +import React, { Component } from 'react'; +import { View, Text , Pressable} from 'react-native'; +import tw from 'twrnc' +import auth from '@react-native-firebase/auth'; + + +const Profile = () => { + return ( + + auth().signOut()} + > + Logout + + + ); +} + + +export default Profile; diff --git a/screens/signin.js b/screens/signin.js index 49d328d..85a179e 100644 --- a/screens/signin.js +++ b/screens/signin.js @@ -1,178 +1,178 @@ -import {useEffect, useState} from 'react'; -import { - Image, - Keyboard, - KeyboardAvoidingView, - Platform, - Pressable, - SafeAreaView, - Text, - TextInput, - TouchableWithoutFeedback, - View, -} from 'react-native'; - -import tw from 'twrnc'; - -import {EyeIcon} from 'react-native-heroicons/outline'; -import {EyeSlashIcon} from 'react-native-heroicons/outline'; -import auth from '@react-native-firebase/auth'; - -const SignIn = ({navigation}) => { - - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [isValidEmail, setIsValidEmail] = useState(false); - const [isValidPassword, setIsValidPassword] = useState(false); - const [isPasswordVisible, setIsPasswordVisible] = useState(true); - - useEffect(() => { - debounce(emailValidation()); - }, [email]); - - useEffect(() => { - debounce(passwordValidation()); - }, [password]); - - 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 - } - - // Utility FN · Mover a carpeta utils/utils.js - const debounce = fn => { - let id = null; - - return (...args) => { - if (id) { - clearTimeout(id); - } - id = setTimeout(() => { - fn(...args); - id = null; - }, 300); - }; - }; - - const loginUser = () => { - if (isValidEmail && isValidPassword) { - auth() - .signInWithEmailAndPassword(email, password) - .then(() => { - console.log('User signed in successfully!'); - // Navigate to the home screen or other desired screen - }) - .catch(error => { - console.error(error); - // Display an error message to the user - }); - } -}; - - return ( - - { - Keyboard.dismiss(); - }} - > - - - - - - - ingresar - - { - setEmail(textInput); - }} - autoCapitalize={'none'} - keyboardType={'email-address'} - /> - - email incorrecto. - - - { - setIsPasswordVisible(!isPasswordVisible) - }} style={tw`absolute top-3 right-3 z-10`}> - {!isPasswordVisible? ( - - ) : ( - - )} - - { - setPassword(passwordInput) - }} - secureTextEntry={!isPasswordVisible} - /> - - - debe contener a-b-0-! - - - ingresar - - navigation.navigate('PasswordRecovery')} - style={tw`mb-16`} - > - ¿olvidaste tu contraseña? - - - ¿no tienes una cuenta? - navigation.navigate('SignUp')}> - registrate - - - - - - - ); -}; - -export default SignIn; +import {useEffect, useState} from 'react'; +import { + Image, + Keyboard, + KeyboardAvoidingView, + Platform, + Pressable, + SafeAreaView, + Text, + TextInput, + TouchableWithoutFeedback, + View, +} from 'react-native'; + +import tw from 'twrnc'; + +import {EyeIcon} from 'react-native-heroicons/outline'; +import {EyeSlashIcon} from 'react-native-heroicons/outline'; +import auth from '@react-native-firebase/auth'; + +const SignIn = ({navigation}) => { + + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isValidEmail, setIsValidEmail] = useState(false); + const [isValidPassword, setIsValidPassword] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(true); + + useEffect(() => { + debounce(emailValidation()); + }, [email]); + + useEffect(() => { + debounce(passwordValidation()); + }, [password]); + + 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 + } + + // Utility FN · Mover a carpeta utils/utils.js + const debounce = fn => { + let id = null; + + return (...args) => { + if (id) { + clearTimeout(id); + } + id = setTimeout(() => { + fn(...args); + id = null; + }, 300); + }; + }; + + const loginUser = () => { + if (isValidEmail && isValidPassword) { + auth() + .signInWithEmailAndPassword(email, password) + .then(() => { + console.log('User signed in successfully!'); + // Navigate to the home screen or other desired screen + }) + .catch(error => { + console.error(error); + // Display an error message to the user + }); + } +}; + + return ( + + { + Keyboard.dismiss(); + }} + > + + + + + + + ingresar + + { + setEmail(textInput); + }} + autoCapitalize={'none'} + keyboardType={'email-address'} + /> + + email incorrecto. + + + { + setIsPasswordVisible(!isPasswordVisible) + }} style={tw`absolute top-3 right-3 z-10`}> + {!isPasswordVisible? ( + + ) : ( + + )} + + { + setPassword(passwordInput) + }} + secureTextEntry={!isPasswordVisible} + /> + + + debe contener a-b-0-! + + + ingresar + + navigation.navigate('PasswordRecovery')} + style={tw`mb-16`} + > + ¿olvidaste tu contraseña? + + + ¿no tienes una cuenta? + navigation.navigate('SignUp')}> + registrate + + + + + + + ); +}; + +export default SignIn; diff --git a/screens/signup.js b/screens/signup.js index 73edf4f..5f531d3 100644 --- a/screens/signup.js +++ b/screens/signup.js @@ -1,201 +1,201 @@ -import {useEffect, useState} from 'react'; -import { - Keyboard, - KeyboardAvoidingView, - Platform, - Pressable, - SafeAreaView, - Text, - TextInput, - TouchableWithoutFeedback, - View, -} from 'react-native'; - -import auth from '@react-native-firebase/auth'; -import tw from 'twrnc'; -import {useToast} from 'react-native-toast-notifications'; - -import Logo from '../static/images/netflix-logo.svg'; -import {EyeIcon} from 'react-native-heroicons/outline'; -import {EyeSlashIcon} from 'react-native-heroicons/outline'; - -const SignUp = ({navigation}) => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [isValidEmail, setIsValidEmail] = useState(false); - const [isValidPassword, setIsValidPassword] = useState(false); - const [isPasswordVisible, setIsPasswordVisible] = useState(false); - - const toast = useToast(); - - useEffect(() => { - debounce(emailValidation()); - }, [email]); - - useEffect(() => { - debounce(passwordValidation()); - }, [password]); - - 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])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/i; - if (!password || passwordRegex.test(password) === false) { - setIsValidPassword(false); - return false; - } - setIsValidPassword(true); - return true; - }; - - // Utility FN · Mover a carpeta utils/utils.js - const debounce = fn => { - let id = null; - - return (...args) => { - if (id) { - clearTimeout(id); - } - id = setTimeout(() => { - fn(...args); - id = null; - }, 300); - }; - }; - - const registerUser = () => { - if (isValidEmail && isValidPassword) { - auth() - .createUserWithEmailAndPassword(email, password) - .then(() => { - console.log('User account created & signed in!'); - }) - .catch(error => { - if (error.code === 'auth/email-already-in-use') { - console.log('That email address is already in use!'); - toast.show({ - type: 'info', - text1: 'Este email ya existe.', - text2: 'Por favor prueba un diferente.' - }); - toast.show('Este email ya existe', { - type: 'info', - data: { - subtitle: 'Por favor prueba uno diferente.', - }, - }); - console.log('hello') - return error - } - - if (error.code === 'auth/invalid-email') { - console.log('That email address is invalid!'); - return error - } - - console.error(error); - }); - } - }; - - return ( - - { - Keyboard.dismiss(); - }} - > - - - - - - Registrate - - { - setEmail(textInput); - }} - autoCorrect={false} - autoCapitalize={'none'} - keyboardType={'email-address'} - /> - - Email incorrecto. - - - { - setIsPasswordVisible(!isPasswordVisible); - }} - style={tw`absolute top-3 right-3 z-10`} - > - {!isPasswordVisible ? ( - - ) : ( - - )} - - { - setPassword(passwordInput); - }} - secureTextEntry={!isPasswordVisible} - /> - - - Debe contener A-b-0-! - - { - registerUser(); - }} - style={tw`mb-12`} - > - Registrate - - - ¿Ya tienes una cuenta? - navigation.navigate('SignIn')}> - Ingresa - - - - - - - ); -}; - -export default SignUp; +import {useEffect, useState} from 'react'; +import { + Keyboard, + KeyboardAvoidingView, + Platform, + Pressable, + SafeAreaView, + Text, + TextInput, + TouchableWithoutFeedback, + View, +} from 'react-native'; + +import auth from '@react-native-firebase/auth'; +import tw from 'twrnc'; +import {useToast} from 'react-native-toast-notifications'; + +import Logo from '../static/images/netflix-logo.svg'; +import {EyeIcon} from 'react-native-heroicons/outline'; +import {EyeSlashIcon} from 'react-native-heroicons/outline'; + +const SignUp = ({navigation}) => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isValidEmail, setIsValidEmail] = useState(false); + const [isValidPassword, setIsValidPassword] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + + const toast = useToast(); + + useEffect(() => { + debounce(emailValidation()); + }, [email]); + + useEffect(() => { + debounce(passwordValidation()); + }, [password]); + + 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])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/i; + if (!password || passwordRegex.test(password) === false) { + setIsValidPassword(false); + return false; + } + setIsValidPassword(true); + return true; + }; + + // Utility FN · Mover a carpeta utils/utils.js + const debounce = fn => { + let id = null; + + return (...args) => { + if (id) { + clearTimeout(id); + } + id = setTimeout(() => { + fn(...args); + id = null; + }, 300); + }; + }; + + const registerUser = () => { + if (isValidEmail && isValidPassword) { + auth() + .createUserWithEmailAndPassword(email, password) + .then(() => { + console.log('User account created & signed in!'); + }) + .catch(error => { + if (error.code === 'auth/email-already-in-use') { + console.log('That email address is already in use!'); + toast.show({ + type: 'info', + text1: 'Este email ya existe.', + text2: 'Por favor prueba un diferente.' + }); + toast.show('Este email ya existe', { + type: 'info', + data: { + subtitle: 'Por favor prueba uno diferente.', + }, + }); + console.log('hello') + return error + } + + if (error.code === 'auth/invalid-email') { + console.log('That email address is invalid!'); + return error + } + + console.error(error); + }); + } + }; + + return ( + + { + Keyboard.dismiss(); + }} + > + + + + + + Registrate + + { + setEmail(textInput); + }} + autoCorrect={false} + autoCapitalize={'none'} + keyboardType={'email-address'} + /> + + Email incorrecto. + + + { + setIsPasswordVisible(!isPasswordVisible); + }} + style={tw`absolute top-3 right-3 z-10`} + > + {!isPasswordVisible ? ( + + ) : ( + + )} + + { + setPassword(passwordInput); + }} + secureTextEntry={!isPasswordVisible} + /> + + + Debe contener A-b-0-! + + { + registerUser(); + }} + style={tw`mb-12`} + > + Registrate + + + ¿Ya tienes una cuenta? + navigation.navigate('SignIn')}> + Ingresa + + + + + + + ); +}; + +export default SignUp; diff --git a/screens/topRated.js b/screens/topRated.js index e4685fe..9beae37 100644 --- a/screens/topRated.js +++ b/screens/topRated.js @@ -1,6 +1,6 @@ -import {Text} from 'react-native'; -const TopRated = () => { - return Top Rated; -}; - -export default TopRated; +import {Text} from 'react-native'; +const TopRated = () => { + return Top Rated; +}; + +export default TopRated; -- cgit v1.2.3-54-g00ecf