[Update] Set up login

Author: mibrahim2001

package-lock.json

@@ -9,11 +9,12 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@rneui/base": "^4.0.0-rc.7",
     "@rneui/themed": "^4.0.0-rc.8",
-    "axios": "^1.5.0",
+    "axios": "^1.6.2",
     "eas": "^0.1.0",
     "expo": "~49.0.11",
     "expo-av": "~13.4.1",

package.json

@@ -15,3 +15,7 @@ export const COLORS = {
   gray: "#808080",
   lightGray: "#D3D3D3",
 };
+
+//TODO: Move following to env
+export const SERVER_URL = "http://13.51.86.179:5500";
+export const API_BASE_URL = SERVER_URL + "/api";

src/constants/index.js

@@ -0,0 +1,39 @@
+import { View, Text } from "react-native";
+import { useState } from "react";
+import axios from "axios";
+import { API_BASE_URL } from "../constants";
+
+const useAuth = () => {
+  const [loading, setLoading] = useState(false);
+
+  async function register(userData) {
+    setLoading(true);
+    try {
+      const signUpUrl = API_BASE_URL + "/signup";
+      const user = await axios.post(signUpUrl, userData);
+      console.log("User registered: ", user.data);
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function login(email, password) {
+    setLoading(true);
+    try {
+      const loginUrl = API_BASE_URL + "/login";
+      const loginData = { email: email, password: password };
+      const user = await axios.post(loginUrl, loginData);
+      console.log("Successfully logged in: ", user);
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return { register, login };
+};
+
+export default useAuth;

src/hooks/useAuth.js

@@ -20,7 +20,6 @@ const AuthStackScreen = () => {
         options={{ headerShown: false }}
       />
       <AuthStack.Screen name="Register" component={RegisterScreen} />
-     
     </AuthStack.Navigator>
   );
 };

src/routes/AuthStack.jsx

@@ -0,0 +1,24 @@
+import { View, Text } from "react-native";
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import HomeScreen from "../screens/home/HomeScreen";
+
+const HomeStack = createNativeStackNavigator();
+
+const HomeStackScreen = () => {
+  return (
+    <HomeStack.Navigator
+      screenOptions={{
+        animation: "slide_from_right",
+      }}
+    >
+      <HomeStack.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ headerShown: false }}
+      />
+    </HomeStack.Navigator>
+  );
+};
+
+export default HomeStackScreen;

src/routes/HomeStack.jsx

@@ -1,11 +1,17 @@
 import { View, Text } from "react-native";
 import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import HomeStackScreen from "./HomeStack";
 
+const Tab = createBottomTabNavigator();
 const TabNavigation = () => {
   return (
-    <View>
-      <Text>TabNavigation</Text>
-    </View>
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeStackScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
   );
 };
 

src/routes/TabNavigation.jsx

@@ -1,12 +1,40 @@
 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 Login = ({ navigation }) => {
+  // Variables
+  const { login } = useAuth();
+  const [email, setEmail] = useState({ value: null, errorMessage: null });
+  const [password, setPassword] = useState({ value: null, errorMessage: null });
+
+  // Event handlers
   const handleRegisterNowPress = () => {
     navigation.navigate("Register");
   };
+
+  const handleLoginPress = () => {
+    setEmail({ ...email, errorMessage: null });
+    setPassword({ ...password, errorMessage: null });
+    if (!email.value) {
+      setEmail({ ...email, errorMessage: "Please fill out all fields." });
+    }
+    if (!password.value) {
+      setPassword({ ...password, errorMessage: "Please fill out all fields." });
+    }
+    if (!(email.value && password.value)) {
+      return;
+    }
+
+    try {
+      login(email.value, password.value);
+    } catch (error) {
+      console.error("Error while loggin in: ", error);
+    }
+  };
+
   return (
     <ScrollView
       style={{ width: "100%" }}
@@ -18,25 +46,41 @@ const Login = ({ navigation }) => {
         paddingHorizontal: 30,
       }}
     >
-      <Text h2>Register</Text>
+      <Text h2>Login</Text>
       <View
         style={{ width: "100%", alignItems: "center", paddingVertical: 40 }}
       >
-        <Input label={"Full 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={"Email"}
+          labelStyle={styles.inputLabel}
+          value={email.value}
+          onChangeText={(value) => setEmail({ ...email, value: value })}
+          errorMessage={email.errorMessage}
+        />
+        <Input
+          label={"Password"}
+          labelStyle={styles.inputLabel}
+          value={password.value}
+          onChangeText={(value) => setPassword({ ...password, value: value })}
+          errorMessage={password.errorMessage}
+          secureTextEntry
+        />
+
         <Button
           color="primary"
-          title={"Register"}
+          title={"Login"}
           size="lg"
           containerStyle={{ width: 200, borderRadius: 5 }}
+          onPress={handleLoginPress}
         />
       </View>
       <Text style={{ paddingVertical: 10 }}>
-        Already have an account?{" "}
-        <Text style={{ color: "blue", fontWeight: "bold" }} onPress={() => {}}>
-          Login Now
+        Don't have an account?{" "}
+        <Text
+          style={{ color: "blue", fontWeight: "bold" }}
+          onPress={handleRegisterNowPress}
+        >
+          Register Now
         </Text>
       </Text>
     </ScrollView>

src/screens/auth/LoginScreen.jsx

@@ -3,7 +3,10 @@ import React from "react";
 import { Button, Input, Text } from "@rneui/themed";
 import { COLORS } from "../../constants";
 
-const Register = () => {
+const Register = ({ navigation }) => {
+  const handleLoginPress = () => {
+    navigation.navigate("Login");
+  };
   return (
     <ScrollView
       style={{ width: "100%" }}
@@ -15,26 +18,30 @@ const Register = () => {
         paddingHorizontal: 30,
       }}
     >
-      <Text h2>Login</Text>
+      <Text h2>Register</Text>
       <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} />
+
         <Button
           color="primary"
-          title={"Login"}
+          title={"Register"}
           size="lg"
           containerStyle={{ width: 200, borderRadius: 5 }}
         />
       </View>
       <Text style={{ paddingVertical: 10 }}>
-        Dont have an account?{" "}
+        Already have an account?{" "}
         <Text
           style={{ color: "blue", fontWeight: "bold" }}
-          onPress={handleRegisterNowPress}
+          onPress={handleLoginPress}
         >
-          Register Now
+          Login
         </Text>
       </Text>
     </ScrollView>

src/screens/auth/RegisterScreen.jsx

@@ -0,0 +1,8 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+const HomeScreen = () => {
+  return <View></View>;
+};
+
+export default HomeScreen;