Merge pull request #76 from bounswe/74-connect-mobile-apps-functions-…

…to-backend 74 connect mobile apps functions to backend
bounswe · Apr 30, 2024 · 12a08fe · 12a08fe
2 parents 0535bd7 + af0ccc1
commit 12a08fe
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 34 deletions.
diff --git a/artifact_MobileApp/Api.js b/artifact_MobileApp/Api.js
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+// const baseURL = import.meta.env.VITE_API_URL     
+// todo: would be the best case scenario but we are in a hurry
+
+const baseURL = "http://localhost:8080"
+
+function apiInstance() {
+  return axios.create({
+    baseURL
+  });
+}
+
+export default apiInstance;
diff --git a/artifact_MobileApp/App.js b/artifact_MobileApp/App.js
@@ -1,21 +1,43 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Text } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { AuthProvider, useAuth } from './AuthContext';
 import Home from './Home';
 import Login from './Login'; // Import LoginScreen component from log.js
 import Signup from './Signup'; 
 import SearchBar from './SearchBar'; 
+
 const Stack = createStackNavigator();
 
 const App = () => {
   return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Home" component={Home} />
-        <Stack.Screen name="Login" component={Login} /> 
-        <Stack.Screen name="Signup" component={Signup} /> 
-        <Stack.Screen name="SearchBar" component={SearchBar} /> 
-      </Stack.Navigator>
-    </NavigationContainer>
+    <>
+      <AuthProvider>
+        <NavigationContainer>
+          <Stack.Navigator>
+            <Stack.Screen 
+              name="Home" 
+              component={Home}
+              options={{
+                headerRight: () => {
+                  const { user } = useAuth();
+                  if (user) {
+                    return (
+                      <Text style={{ marginRight: 10 }}>{user}</Text>
+                    )
+                  }
+                }
+              }}
+            />
+            <Stack.Screen name="Login" component={Login} /> 
+            <Stack.Screen name="Signup" component={Signup} /> 
+            <Stack.Screen name="SearchBar" component={SearchBar} /> 
+          </Stack.Navigator>
+        </NavigationContainer>
+      </AuthProvider>
+      <Toast ref={(ref) => Toast.setRef(ref)} />
+    </>
   );
 };
 

diff --git a/artifact_MobileApp/AuthContext.js b/artifact_MobileApp/AuthContext.js
@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+  const [authState, setAuthState] = useState({
+    isLoggedIn: false,
+    user: null
+  });
+
+  // Function to log in the user and store user data
+  const login = (userData) => {
+    setAuthState({ isLoggedIn: true, user: userData });
+  };
+
+  // Function to log out the user
+  const logout = () => {
+    setAuthState({ isLoggedIn: false, user: null });
+  };
+
+  return (
+    <AuthContext.Provider value={{ ...authState, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/artifact_MobileApp/Home.js b/artifact_MobileApp/Home.js
@@ -3,29 +3,49 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState } from 'react';
 import { StyleSheet, Text, View, TextInput, TouchableOpacity  } from 'react-native';
+import { useAuth } from './AuthContext';
 // import SearchBar from './SearchBar'; 
 
 const Home = ({ navigation }) => {
+  const { isLoggedIn, logout } = useAuth();
+
+
   return (
 
     <View style={styles.container}>
     <Text style={styles.title}> Welcome to Artifact !!</Text>
 
-       <TouchableOpacity
-        style={styles.button}
-        onPress={() => navigation.navigate('Login')}>
+    {!isLoggedIn && (
+      <>
+      <TouchableOpacity
+      style={styles.button}
+      onPress={() => navigation.navigate('Login')}>
         <Text style={styles.buttonText}>Go to Login</Text>
       </TouchableOpacity>
       <TouchableOpacity
         style={styles.button}
         onPress={() => navigation.navigate('Signup')}>
         <Text style={styles.buttonText}>Go to SignUp</Text>
       </TouchableOpacity>
+      </>
+    )}
       <TouchableOpacity
         style={styles.button}
         onPress={() => navigation.navigate('SearchBar')}>
         <Text style={styles.buttonText}>Search</Text>
       </TouchableOpacity>
+      {isLoggedIn && (
+      <>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => {
+          logout();
+          navigation.navigate('Login')
+        }}>
+        <Text style={styles.buttonText}>Log Out</Text>
+      </TouchableOpacity>
+      </>
+    )}
 
     </View>
   );

diff --git a/artifact_MobileApp/Login.js b/artifact_MobileApp/Login.js
@@ -1,15 +1,50 @@
 import { StatusBar } from 'expo-status-bar';
+import apiInstance from './Api'; 
 import React, { useState } from 'react';
+import Toast from 'react-native-toast-message';
 import { StyleSheet, Text, View, TextInput, TouchableOpacity  } from 'react-native';
+import { useAuth } from './AuthContext';
 
 
-const Login = ()=>{
+const Login = ({ navigation })=>{
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const { login } = useAuth();
 
-  const checkDatabase = (username, password) => {
-    console.log({username, password});
-    // call Database here
+  const goHome = () => navigation.navigate('Home');
+
+  const goSignup = () => navigation.navigate('Signup');
+
+  const checkDatabase = async (username, password) => {
+    try {
+        const response = await apiInstance().post(
+            "login",
+            {
+                username,
+                password
+            }
+        )
+
+        // successful login
+        if (response.status === 200) {
+            // console.log(response.data)
+            // we should send the userdata from backend
+            login(username);
+            goHome();
+        }
+    } catch (e) {
+        console.log(e)
+        Toast.show({
+          type: 'error',
+          position: 'bottom',
+          text1: 'Login Error',
+          text2: 'There was an error while logging in. Please try again.',
+          visibilityTime: 2000,
+          autoHide: true,
+          topOffset: 30,
+          bottomOffset: 40
+        });
+    }
   };
 
   return (
@@ -34,6 +69,12 @@ const Login = ()=>{
       >
         <Text style={styles.buttonText}>Login</Text>
       </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => goSignup()} 
+      >
+        <Text style={styles.buttonText}>Don't have an account?</Text>
+      </TouchableOpacity>
     </View>
   );
 }

diff --git a/artifact_MobileApp/SearchBar.js b/artifact_MobileApp/SearchBar.js
@@ -1,15 +1,40 @@
 // SearchBar.js
 import React, { useState } from 'react';
+import apiInstance from './Api'; 
+import Toast from 'react-native-toast-message';
 import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 const SearchBar = () => {
   const [searchText, setSearchText] = useState('');
 
-  const handleSearch = (val) => {
-    console.log({val}); 
-    //link to wikiData API here ...
-    setSearchText('');
+  const handleSearch = async (val) => {
+    try {
+        const response = await apiInstance().post("search", {
+            query: val
+        })
+
+        if (response.status === 200) {
+
+            const data = await response.data
+
+            console.log(data)
+
+            setSearchText("")
+        }
+    } catch (e) {
+        console.log(e)
+        Toast.show({
+          type: 'error',
+          position: 'bottom',
+          text1: 'Search Error',
+          text2: 'There was an error while searching. Please try again.',
+          visibilityTime: 2000,
+          autoHide: true,
+          topOffset: 30,
+          bottomOffset: 40
+        });
+    }
 
   };
 

diff --git a/artifact_MobileApp/Signup.js b/artifact_MobileApp/Signup.js
@@ -1,15 +1,54 @@
 import { StatusBar } from 'expo-status-bar';
+import apiInstance from './Api'; 
 import React, { useState } from 'react';
-import { StyleSheet, Text, View, TextInput, TouchableOpacity  } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
+import { useAuth } from './AuthContext';
 
 
-const Signup = ()=>{
+const Signup = ({ navigation })=>{
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  const checkDatabase = (username, password) => {
-    console.log({username, password});
-    // call Database here
+  const [email, setEmail] = useState('');
+  const { login } = useAuth();
+
+  const goHome = () => navigation.navigate('Home');
+
+  const goLogin = () => navigation.navigate('Login');
+
+  const checkDatabase = async (username, email, password) => {
+    console.log({username, email, password});
+    try {
+        const response = await apiInstance().post(
+            "signup",
+            {
+                username,
+                email,
+                password
+            }
+        )
+
+        // successful login
+        if (response.status === 201) {
+            // login(response.data)
+            login(username)
+            goHome()
+        }
+    } catch (e) {
+        console.log(e)
+        Toast.show({
+          type: 'error',
+          position: 'bottom',
+          text1: 'Login Error',
+          text2: 'There was an error while logging in. Please try again.',
+          visibilityTime: 2000,
+          autoHide: true,
+          topOffset: 30,
+          bottomOffset: 40
+        });
+    }
   };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}> SignUp to Artifact</Text>
@@ -19,6 +58,12 @@ const Signup = ()=>{
         onChangeText={(val) => setUsername(val)}
         value={username}
       />
+      <TextInput
+        style={styles.input}
+        placeholder='Enter Your Email'
+        onChangeText={(val) => setEmail(val)}
+        value={email}
+      />
       <TextInput
         style={styles.input}
         placeholder='Create Password'
@@ -28,10 +73,16 @@ const Signup = ()=>{
       />
       <TouchableOpacity
         style={styles.button}
-        onPress={() => checkDatabase(username, password )}
+        onPress={() => checkDatabase(username, email, password)}
       >
         <Text style={styles.buttonText}>SignUp</Text>
       </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => goLogin()} 
+      >
+        <Text style={styles.buttonText}>Already have an account?</Text>
+      </TouchableOpacity>
     </View>
   );
 }