diff --git a/frontend/iQMA-Skills-Builder/app/EditProfile.tsx b/frontend/iQMA-Skills-Builder/app/EditProfile.tsx new file mode 100644 index 0000000..baf0d94 --- /dev/null +++ b/frontend/iQMA-Skills-Builder/app/EditProfile.tsx @@ -0,0 +1,140 @@ +import { + Text, + View, + TextInput, + ActivityIndicator, + TouchableOpacity, + StyleSheet, + Alert, +} from 'react-native'; +import {useState, useContext, useEffect} from 'react'; +import axios from 'axios'; +import {AuthContext} from '@/context/AuthContext'; + +export default function EditProfile() { + const {currentUser, isLoading} = useContext(AuthContext); + + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [loading, setLoading] = useState(true); + + const fetchUserData = async () => { + try { + const url = `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/accounts/getaccountbyid/${currentUser.sub}`; + const response = await axios.get(url); + const userData = response.data; + setFirstName(userData.firstName); + setLastName(userData.lastName); + } catch (error) { + console.error('Failed to fetch user data:', error); + } finally { + setLoading(false); // Ensure loading state is reset + } + }; + + const handleSave = async () => { + const url = `${process.env.EXPO_PUBLIC_LOCALHOST_URL}/accounts/updateaccount`; + try { + await axios.patch( + url, + { + "userID": `${currentUser.sub}`, + "firstName": `${firstName}`, + "lastName": `${lastName}` + }, + ); + Alert.alert('Success', 'Profile updated successfully.'); + } catch (error) { + console.error('Failed to update profile:', error); + Alert.alert('Error', 'Failed to update profile. Please try again.'); + } + }; + + useEffect(() => { + if (currentUser) { + fetchUserData(); + } + }, [currentUser]); + + if (isLoading || loading) { + return ( + + + + ); + } + + return ( + + + Edit Profile + + + FIRST NAME + setFirstName(text)} + /> + LAST NAME + setLastName(text)} + /> + + SAVE + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#ffffff', + }, + header: { + backgroundColor: '#c1a5ff', + paddingVertical: 15, + justifyContent: 'center', + alignItems: 'center', + }, + headerTitle: { + color: '#ffffff', + fontSize: 18, + fontWeight: 'bold', + }, + form: { + padding: 20, + }, + label: { + color: '#6a51b2', + fontSize: 12, + fontWeight: 'bold', + marginBottom: 5, + }, + input: { + height: 40, + borderWidth: 1, + borderColor: '#d4d4d4', + borderRadius: 5, + paddingHorizontal: 10, + marginBottom: 20, + }, + button: { + backgroundColor: '#ffffff', + borderRadius: 10, + borderColor: '#6a51b2', + borderWidth: 1, + paddingVertical: 10, + justifyContent: 'center', + alignItems: 'center', + }, + buttonText: { + color: '#6a51b2', + fontSize: 16, + fontWeight: 'bold', + }, +}); diff --git a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx index d9d6f53..2af9d90 100644 --- a/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx +++ b/frontend/iQMA-Skills-Builder/app/screens/Settings.tsx @@ -1,10 +1,11 @@ -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View ,Button,Alert} from 'react-native'; import React, { useContext, useEffect, useState } from 'react'; import CustomSwitch from '@/components/CustomSwitch'; import { CustomButton } from '@/components/CustomButton'; import { AuthContext } from '@/context/AuthContext'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { LoadingIndicator } from '@/components/LoadingIndicator'; +import {router}from 'expo-router'; export default function Settings() { const { logOut } = useContext(AuthContext); @@ -78,6 +79,10 @@ export default function Settings() { All Notifications +