Refactor signup

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;
 

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",

src/screens/LogInScreen.tsx

@@ -30,14 +30,16 @@ const LogIn: FC = () => {
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
-        navigation.navigate("HomePage");
+        navigation.replace("HomePage");
       }
     });
     return unsubscribe;
   }, []);
 
   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 = () => {
         <Login>
           <LoginText>Get Ready!</LoginText>
           <Input
+            autoCapitalize="none"
+            keyboardType="email-address"
+            clearButtonMode="while-editing"
             placeholder="Email"
             value={email}
             onChangeText={(text) => setEmail(text)}
           ></Input>
           <Input
+            clearButtonMode="while-editing"
             placeholder="Password"
             value={password}
             onChangeText={(text) => setPassword(text)}

src/screens/SignUpScreen.tsx

@@ -4,34 +4,42 @@ import {
   Text,
   Alert,
   TextInput,
+  Image,
   ScrollView,
   Platform,
+  TouchableOpacity,
 } from "react-native";
 import styled from "styled-components/native";
 import db, { auth, userRef } from "../../config/firebase";
 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<RootStackParamList, "SignUp">;
 
+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<RootStackParamList, "SignUp">;
 
-type UserProps = {
-  email: string;
-  password: string;
+interface UserProps{
+  email: string,
+  password: string,
   user: undefined;
   age?: string;
 }
 
 const SignUpScreen: FC<UserProps> = () => {
   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<signUpStack>();
@@ -47,68 +55,91 @@ const SignUpScreen: FC<UserProps> = () => {
 
   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 (
     <Container {...(Platform.OS === "ios" ? { behavior: "padding" } : null)}>
       <View>
         <Signup>
           <ScrollView>
             <SignupText>Get Ready!</SignupText>
             <Input
+            clearButtonMode="while-editing"
+             autoCapitalize="none"
+             keyboardType="email-address"
               placeholder="Email"
               value={email}
               onChangeText={(text) => setEmail(text)}
             ></Input>
             <Input
+            clearButtonMode="while-editing"
+             autoCapitalize="none"
               placeholder="Password"
               value={password}
               onChangeText={(text) => setPassword(text)}
               secureTextEntry
             ></Input>
             <View>
               <Input
+              clearButtonMode="while-editing"
+              keyboardType="number-pad"
+              maxLength={2}
+              // textContentType="oneTimeCode"
                 placeholder="Age"
                 value={age}
                 onChangeText={(age) => setAge(age)}
-                // onChangeText={(num) => {
-                //   console.log('Age num: ', num);
-                //   // Number(num) >= 18
-                //   //   ? setAge(num)
-                //   //   : Alert.alert("You still crawling.....GET OUT OF HERE!");
-                // }}
               />
-              <Input
+              <View style={{paddingVertical: 20, flex: 3, flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
+                <TouchableOpacity onPress={() => setProfileUrl(images.angryGirl) } >
+                  <Image style={{width: 80, height: 80, borderRadius: 20}} source={{uri: images.angryGirl}} />
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => setProfileUrl(images.angryMsn)} ><Image style={{width: 80, height: 80, borderRadius: 20}} source={{uri: images.angryMsn}} /></TouchableOpacity>
+                <TouchableOpacity onPress={() => setProfileUrl(images.angryBird) }><Image style={{width: 80, height: 80, borderRadius: 20}} source={{uri: images.angryBird}} /></TouchableOpacity>
+              </View>
+              {/* <Input
                 placeholder="Enter Image Url"
                 value={profileUrl}
                 onChangeText={(text) => setProfileUrl(text)}
-              />
+              /> */}
               <BioInput
+              keyboardType="twitter"
                 multiline={true}
+                maxLength={280}
                 style={{ textAlignVertical: "top" }}
                 placeholder="Enter a brief bio"
                 value={bio}
                 onChangeText={(text) => setBio(text)}
               />
             </View>
-            <StyledButton
-              title="Let's Rumble"
+            <RumbleBtn style={{marginTop: 20, marginBottom: 50}}
               onPress={() => 
                 Alert.alert(
                   "Alert Title",
@@ -122,7 +153,7 @@ const SignUpScreen: FC<UserProps> = () => {
                     { text: "I Accept", onPress: handleSignUp }
                   ]
                 )}
-            ></StyledButton>
+            ><RumbleTxt>Let's Rumble</RumbleTxt></RumbleBtn>
           </ScrollView>
         </Signup>
       </View>
@@ -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;