From 6ff7c459e3d08ebdf6da6973ebe0410b5cab9c0a Mon Sep 17 00:00:00 2001 From: Alberto-Duarte Date: Thu, 11 May 2023 11:40:35 +0100 Subject: first commit --- screens/discover.js | 6 ++ screens/home.js | 162 +++++++++++++++++++++++++++++++++++ screens/modal.js | 18 ++++ screens/passwordRecovery.js | 54 ++++++++++++ screens/profile.js | 21 +++++ screens/signin.js | 178 +++++++++++++++++++++++++++++++++++++++ screens/signup.js | 201 ++++++++++++++++++++++++++++++++++++++++++++ screens/topRated.js | 6 ++ 8 files changed, 646 insertions(+) create mode 100644 screens/discover.js create mode 100644 screens/home.js create mode 100644 screens/modal.js create mode 100644 screens/passwordRecovery.js create mode 100644 screens/profile.js create mode 100644 screens/signin.js create mode 100644 screens/signup.js create mode 100644 screens/topRated.js (limited to 'screens') diff --git a/screens/discover.js b/screens/discover.js new file mode 100644 index 0000000..0213eed --- /dev/null +++ b/screens/discover.js @@ -0,0 +1,6 @@ +import {Text} from 'react-native'; +const Discover = () => { + return Discover; +}; + +export default Discover; diff --git a/screens/home.js b/screens/home.js new file mode 100644 index 0000000..184bbf9 --- /dev/null +++ b/screens/home.js @@ -0,0 +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; diff --git a/screens/modal.js b/screens/modal.js new file mode 100644 index 0000000..43181e4 --- /dev/null +++ b/screens/modal.js @@ -0,0 +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 + + + + ); +}; + +export default Modal; \ No newline at end of file diff --git a/screens/passwordRecovery.js b/screens/passwordRecovery.js new file mode 100644 index 0000000..61a5f10 --- /dev/null +++ b/screens/passwordRecovery.js @@ -0,0 +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; diff --git a/screens/profile.js b/screens/profile.js new file mode 100644 index 0000000..0bd1cd9 --- /dev/null +++ b/screens/profile.js @@ -0,0 +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; diff --git a/screens/signin.js b/screens/signin.js new file mode 100644 index 0000000..49d328d --- /dev/null +++ b/screens/signin.js @@ -0,0 +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; diff --git a/screens/signup.js b/screens/signup.js new file mode 100644 index 0000000..73edf4f --- /dev/null +++ b/screens/signup.js @@ -0,0 +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; diff --git a/screens/topRated.js b/screens/topRated.js new file mode 100644 index 0000000..e4685fe --- /dev/null +++ b/screens/topRated.js @@ -0,0 +1,6 @@ +import {Text} from 'react-native'; +const TopRated = () => { + return Top Rated; +}; + +export default TopRated; -- cgit v1.2.3-54-g00ecf