120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { View, TextInput, Button, Image, ActivityIndicator } from 'react-native';
|
|
import { useTailwind } from 'tailwind-rn';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
|
|
function EditProfileScreen({ route, navigation }) {
|
|
const { user, currentUsername, currentBio, currentPronouns, currentName } = route.params;
|
|
const tailwind = useTailwind();
|
|
|
|
const [username, setUsername] = useState(user.username);
|
|
const [profilePicture, setProfilePicture] = useState(user.profilePicture);
|
|
const [bio, setBio] = useState(user.bio);
|
|
const [pronouns, setPronouns] = useState(user.pronouns);
|
|
const [name, setName] = useState(user.name);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState('');
|
|
|
|
const pickImage = async () => {
|
|
let result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 1,
|
|
});
|
|
|
|
console.log(result);
|
|
|
|
if (!result.cancelled) {
|
|
setProfilePicture(result.uri);
|
|
|
|
// Get the user's token
|
|
const token = await AsyncStorage.getItem('token');
|
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
|
|
|
|
|
// Create a new FormData object
|
|
let formData = new FormData();
|
|
// Add the image to the form data
|
|
let uriParts = result.uri.split('.');
|
|
let fileType = uriParts[uriParts.length - 1];
|
|
formData.append('profilePicture', {
|
|
uri: result.uri,
|
|
name: `photo.${fileType}`,
|
|
type: `image/${fileType}`,
|
|
});
|
|
|
|
// Upload the image
|
|
try {
|
|
let response = await fetch(`${apiUrl}/api/v1/app/user/profilePicture`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
'Authorization': token,
|
|
},
|
|
});
|
|
let responseJson = await response.json();
|
|
console.log(responseJson);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
};
|
|
|
|
async function saveChanges() {
|
|
setIsLoading(true);
|
|
try {
|
|
const token = await AsyncStorage.getItem('token');
|
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
|
const response = await fetch(`${apiUrl}/api/v1/app/user/data/${user._id}/edit`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': token,
|
|
},
|
|
body: JSON.stringify({
|
|
username,
|
|
profilePicture,
|
|
bio,
|
|
pronouns,
|
|
name,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to save changes: ${response.status}`);
|
|
}
|
|
|
|
|
|
|
|
navigation.goBack(); // Go back to the profile screen
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
setErrorMessage(error.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={tailwind('p-4')}>
|
|
{isLoading && <ActivityIndicator size="large" color="#0000ff" />}
|
|
{errorMessage !== '' && <Text style={tailwind('text-red-500')}>{errorMessage}</Text>}
|
|
{profilePicture && <Image source={{ uri: profilePicture }} style={{ width: 200, height: 200 }} />}
|
|
|
|
<Button title="Upload Profile Picture" onPress={pickImage} />
|
|
<TextInput value={username} onChangeText={setUsername} placeholder={currentUsername} />
|
|
<TextInput value={bio} onChangeText={setBio} placeholder={currentBio} />
|
|
<TextInput value={pronouns} onChangeText={setPronouns} placeholder={currentPronouns} />
|
|
<TextInput value={name} onChangeText={setName} placeholder={currentName} />
|
|
|
|
<Button title="Save Changes" onPress={saveChanges} />
|
|
<Button title="Cancel" onPress={() => navigation.goBack()} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default EditProfileScreen;
|