diff --git a/config/firebase.ts b/config/firebase.ts index bfdce05..94e8e3a 100644 --- a/config/firebase.ts +++ b/config/firebase.ts @@ -1,5 +1,6 @@ import firebase from "firebase/compat/app"; import { getFirestore, collection } from "firebase/firestore"; + // import { getAnalytics } from "firebase/analytics"; import "firebase/compat/auth"; import Constants from "expo-constants"; @@ -39,7 +40,6 @@ const db = getFirestore(app); // Retrieve the collection of users export const userRef = collection(db, 'users'); - export const auth = firebase.auth(); export default db; diff --git a/package-lock.json b/package-lock.json index a29c462..d90723e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "packages": { "": { + "name": "rumble", "version": "1.0.0", "dependencies": { - "@react-native-community/datetimepicker": "3.5.2", "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.5", "@types/styled-components": "^5.1.15", @@ -19,6 +19,7 @@ "firebase-tools": "^9.23.0", "react": "17.0.1", "react-dom": "17.0.1", + "react-hook-form": "^7.20.5", "react-native": "0.64.3", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.9.0", @@ -3126,14 +3127,6 @@ "ora": "^3.4.0" } }, - "node_modules/@react-native-community/datetimepicker": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", - "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==", - "dependencies": { - "invariant": "^2.2.4" - } - }, "node_modules/@react-native/assets": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz", @@ -4628,7 +4621,6 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", - "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5898,8 +5890,7 @@ "esprima": "^4.0.1", "estraverse": "^4.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -6210,7 +6201,6 @@ "expo-application": "~4.0.0", "expo-asset": "~8.4.3", "expo-constants": "~12.1.3", - "expo-error-recovery": "~3.0.3", "expo-file-system": "~13.0.3", "expo-font": "~10.0.3", "expo-keep-awake": "~10.0.0", @@ -8544,7 +8534,6 @@ "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", - "fsevents": "^2.1.2", "graceful-fs": "^4.2.4", "jest-regex-util": "^26.0.0", "jest-serializer": "^26.6.2", @@ -11946,6 +11935,21 @@ "scheduler": "^0.20.1" } }, + "node_modules/react-hook-form": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.20.5.tgz", + "integrity": "sha512-xYeBmQW6oqxDYAYVWIoZYC7tRD6lJBJt9b8Rr1Mv/VhZ+ZUCy2IuXlm2YA9i0/zl0TKKxqBWQOxGEb3qyVIhMg==", + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -13912,7 +13916,6 @@ "on-finished": "^2.2.0", "on-headers": "^1.0.0", "path-to-regexp": "^1.8.0", - "re2": "^1.15.8", "router": "^1.3.1", "rsvp": "^4.8.5", "string-length": "^1.0.0", @@ -18096,14 +18099,6 @@ "ora": "^3.4.0" } }, - "@react-native-community/datetimepicker": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz", - "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==", - "requires": { - "invariant": "^2.2.4" - } - }, "@react-native/assets": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz", @@ -25446,6 +25441,12 @@ "scheduler": "^0.20.1" } }, + "react-hook-form": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.20.5.tgz", + "integrity": "sha512-xYeBmQW6oqxDYAYVWIoZYC7tRD6lJBJt9b8Rr1Mv/VhZ+ZUCy2IuXlm2YA9i0/zl0TKKxqBWQOxGEb3qyVIhMg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 5cdd283..49ba574 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "firebase-tools": "^9.23.0", "react": "17.0.1", "react-dom": "17.0.1", + "react-hook-form": "^7.20.5", "react-native": "0.64.3", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.9.0", diff --git a/src/screens/LogInScreen.tsx b/src/screens/LogInScreen.tsx index 240ee8b..942fd19 100644 --- a/src/screens/LogInScreen.tsx +++ b/src/screens/LogInScreen.tsx @@ -30,7 +30,7 @@ const LogIn: FC = () => { useEffect(() => { const unsubscribe = auth.onAuthStateChanged((user) => { if (user) { - navigation.navigate("HomePage"); + navigation.replace("HomePage"); } }); return unsubscribe; @@ -38,6 +38,8 @@ const LogIn: FC = () => { async function handleLogin() { try { + email.replace(/\s/g,""); + password.replace(/\s/g,""); const userCredential = await auth.signInWithEmailAndPassword( email, password @@ -55,11 +57,15 @@ const LogIn: FC = () => { Get Ready! setEmail(text)} > setPassword(text)} diff --git a/src/screens/SignUpScreen.tsx b/src/screens/SignUpScreen.tsx index 6c3f4da..54cef6e 100644 --- a/src/screens/SignUpScreen.tsx +++ b/src/screens/SignUpScreen.tsx @@ -4,8 +4,10 @@ import { Text, Alert, TextInput, + Image, ScrollView, Platform, + TouchableOpacity, } from "react-native"; import styled from "styled-components/native"; import db, { auth, userRef } from "../../config/firebase"; @@ -13,25 +15,31 @@ import { doc, setDoc } from "firebase/firestore"; import { useNavigation } from "@react-navigation/native"; import { NativeStackNavigationProp } from "@react-navigation/native-stack"; import { RootStackParamList } from "../navigation/index"; +import {RumbleBtn, RumbleTxt} from '../components/Stylesheet' -type signUpStack = NativeStackNavigationProp; +const images = { + angryGirl: "https://www.news.ucsb.edu/sites/default/files/images/2014/angry%20face.jpg", + angryMsn: "http://1.bp.blogspot.com/-1-yZXyA3oY8/VoK8n89SVOI/AAAAAAAAR2Q/tz5kFjjkQDU/s1600/brewing-anger.png", + angryBird: "https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" +} + +type signUpStack = NativeStackNavigationProp; -type UserProps = { - email: string; - password: string; +interface UserProps{ + email: string, + password: string, user: undefined; age?: string; } const SignUpScreen: FC = () => { const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [age, setAge] = useState(""); + const [password, setPassword] = useState(""); // space replace& capital first letter + const [age, setAge] = useState(""); const [bio, setBio] = useState(""); const [profileUrl, setProfileUrl] = useState( - "" || - "https://www.news.ucsb.edu/sites/default/files/images/2014/angry%20face.jpg" + "" || "https://www.news.ucsb.edu/sites/default/files/images/2014/angry%20face.jpg" ); const navigation = useNavigation(); @@ -47,24 +55,36 @@ const SignUpScreen: FC = () => { async function handleSignUp() { try { - const userCredential = await auth.createUserWithEmailAndPassword( - email, - password - ); - - const user = userCredential.user; - console.log("Registered with: ", user); - await setDoc(doc(db, "users", user.uid), { - email: email, - password: password, - age: age, - bio: bio, - profileUrl: profileUrl - }); + // Replacing spaces in typescript like in JS by using string.replace(). + email.replace(/\s/g,""); + password.replace(/\s/g,""); + if (handleAge()) { + const userCredential = await auth.createUserWithEmailAndPassword( + email, + password + ); + + const user = userCredential.user; + console.log("Registered with: ", user); + await setDoc(doc(db, "users", user.uid), { + email: email, + // password: password, // Try to sent user without password + age: Number(age), //Sending age as a number type + bio: bio, + profileUrl: profileUrl + }); + } } catch (error: any) { Alert.alert(error.message); } } + + // handleNumber() will validate if the user is 18 or older to then be able to sign up. + function handleAge() { + return Number(age) >= 18 ? true : Alert.alert('You still Crawling....Get out of here') + } + + return ( @@ -72,11 +92,16 @@ const SignUpScreen: FC = () => { Get Ready! setEmail(text)} > setPassword(text)} @@ -84,31 +109,37 @@ const SignUpScreen: FC = () => { > setAge(age)} - // onChangeText={(num) => { - // console.log('Age num: ', num); - // // Number(num) >= 18 - // // ? setAge(num) - // // : Alert.alert("You still crawling.....GET OUT OF HERE!"); - // }} /> - + setProfileUrl(images.angryGirl) } > + + + setProfileUrl(images.angryMsn)} > + setProfileUrl(images.angryBird) }> + + {/* setProfileUrl(text)} - /> + /> */} setBio(text)} /> - Alert.alert( "Alert Title", @@ -122,7 +153,7 @@ const SignUpScreen: FC = () => { { text: "I Accept", onPress: handleSignUp } ] )} - > + >Let's Rumble @@ -162,7 +193,7 @@ const Input = styled.TextInput` margin: 20px 10px; width: 250px; `; -const StyledButton = styled.Button` +const StyledButton = styled.TouchableOpacity` background: green; color: #fff; padding: 10px;