[Update] Complete registeration

Author: ibbybuilds

src/hooks/useAuth.js

@@ -11,7 +11,7 @@ const useAuth = () => {
     try {
       const signUpUrl = API_BASE_URL + "/signup";
       const user = await axios.post(signUpUrl, userData);
-      console.log("User registered: ", user.data);
+      return user.data;
     } catch (error) {
       throw error;
     } finally {

src/screens/auth/RegisterScreen.jsx

@@ -1,12 +1,103 @@
 import { View, StyleSheet, ScrollView } from "react-native";
-import React from "react";
+import { useState } from "react";
 import { Button, Input, Text } from "@rneui/themed";
 import { COLORS } from "../../constants";
+import useAuth from "../../hooks/useAuth";
 
 const Register = ({ navigation }) => {
+  // Variables
+  const { register, loading } = useAuth();
+  const [firstName, setFirstName] = useState({
+    value: null,
+    errorMessage: null,
+  });
+  const [lastName, setLastName] = useState({ value: null, errorMessage: null });
+  const [email, setEmail] = useState({ value: null, errorMessage: null });
+  const [password, setPassword] = useState({ value: null, errorMessage: null });
+  const [confirmPassword, setConfirmPassword] = useState({
+    value: null,
+    errorMessage: null,
+  });
+
+  // Event handlers
   const handleLoginPress = () => {
     navigation.navigate("Login");
   };
+  const handleRegisterPress = async () => {
+    setFirstName({ ...firstName, errorMessage: null });
+    setLastName({ ...lastName, errorMessage: null });
+    setEmail({ ...email, errorMessage: null });
+    setPassword({ ...password, errorMessage: null });
+    setConfirmPassword({ ...confirmPassword, errorMessage: null });
+    if (!firstName.value) {
+      setFirstName({
+        ...firstName,
+        errorMessage: "Please fill out all fields.",
+      });
+    }
+    if (!lastName.value) {
+      setLastName({
+        ...lastName,
+        errorMessage: "Please fill out all fields.",
+      });
+    }
+    if (!email.value) {
+      setEmail({ ...email, errorMessage: "Please fill out all fields." });
+    }
+    if (!password.value) {
+      setPassword({
+        ...password,
+        errorMessage: "Please fill out all fields.",
+      });
+    }
+    if (!confirmPassword.value) {
+      setConfirmPassword({
+        ...confirmPassword,
+        errorMessage: "Please fill out all fields.",
+      });
+    }
+
+    if (
+      !(
+        firstName.value &&
+        lastName.value &&
+        email.value &&
+        password.value &&
+        confirmPassword.value
+      )
+    ) {
+      return;
+    }
+
+    if (password.value != confirmPassword.value) {
+      setPassword({
+        ...password,
+        errorMessage: "Password and confirm password do not match.",
+      });
+      setConfirmPassword({
+        ...confirmPassword,
+        errorMessage: "Password and confirm password do not match.",
+      });
+      return;
+    }
+
+    try {
+      const userData = {
+        firstName: firstName.value,
+        lastName: lastName.value,
+        email: email.value,
+        password: password.value,
+        confirmPassword: confirmPassword.value,
+      };
+      const user = await register(userData);
+      navigation.navigate("Login");
+    } catch (error) {
+      console.error(
+        `Error while registering user: Status: ${error.response?.status} Message: ${error.response?.data?.message}
+        `
+      );
+    }
+  };
   return (
     <ScrollView
       style={{ width: "100%" }}
@@ -22,17 +113,52 @@ const Register = ({ navigation }) => {
       <View
         style={{ width: "100%", alignItems: "center", paddingVertical: 40 }}
       >
-        <Input label={"First Name"} labelStyle={styles.inputLabel} />
-        <Input label={"Last Name"} labelStyle={styles.inputLabel} />
-        <Input label={"Email"} labelStyle={styles.inputLabel} />
-        <Input label={"Password"} labelStyle={styles.inputLabel} />
-        <Input label={"Confirm Password"} labelStyle={styles.inputLabel} />
+        <Input
+          label={"First Name"}
+          labelStyle={styles.inputLabel}
+          value={firstName.value}
+          errorMessage={firstName.errorMessage}
+          onChangeText={(value) => setFirstName({ ...firstName, value })}
+        />
+        <Input
+          label={"Last Name"}
+          labelStyle={styles.inputLabel}
+          value={lastName.value}
+          errorMessage={lastName.errorMessage}
+          onChangeText={(value) => setLastName({ ...lastName, value })}
+        />
+        <Input
+          label={"Email"}
+          labelStyle={styles.inputLabel}
+          value={email.value}
+          errorMessage={email.errorMessage}
+          onChangeText={(value) => setEmail({ ...email, value })}
+        />
+        <Input
+          label={"Password"}
+          labelStyle={styles.inputLabel}
+          value={password.value}
+          errorMessage={password.errorMessage}
+          onChangeText={(value) => setPassword({ ...password, value })}
+          secureTextEntry
+        />
+        <Input
+          label={"Confirm Password"}
+          labelStyle={styles.inputLabel}
+          value={confirmPassword.value}
+          errorMessage={confirmPassword.errorMessage}
+          onChangeText={(value) =>
+            setConfirmPassword({ ...confirmPassword, value })
+          }
+          secureTextEntry
+        />
 
         <Button
           color="primary"
           title={"Register"}
           size="lg"
-          containerStyle={{ width: 200, borderRadius: 5 }}
+          containerStyle={{ width: 200, borderRadius: 5, marginTop: 20 }}
+          onPress={handleRegisterPress}
         />
       </View>
       <Text style={{ paddingVertical: 10 }}>