just another day of my life

This commit is contained in:
2024-10-11 13:46:46 -05:00
parent 38f073c5ac
commit 56206c1665
6 changed files with 376 additions and 88 deletions

View File

@ -0,0 +1,172 @@
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Alert } from 'react-native';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import { getUserData } from '@/components/services/securestorage/UserData';
import Button from '@/components/buttons/Button';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
type Partner = {
id: number;
appleId: string;
appleEmail: string;
fullName: string;
pfpURL: string;
pushToken: string;
createdAt: Date;
};
type Relationship = {
id: number;
title: string;
status: 'pending' | 'accepted' | 'rejected';
relationshipStartDate: Date;
createdAt: Date;
};
type RelationshipStatus = {
relationship: Relationship | null;
partner: Partner | null;
};
type UserData = {
fullName: string;
appleEmail: string;
appleId: string;
pfpURL: string;
};
type RelationshipProps = {
profilePictureUrl: string | null;
};
const Relationships: React.FC<RelationshipProps> = ({ profilePictureUrl }) => {
const scheme = useColorScheme() ?? 'light';
const [status, setStatus] = useState<RelationshipStatus | null>(null);
const [userData, setUserData] = useState<UserData | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchRelationshipStatus();
}, []);
useEffect(() => {
if (profilePictureUrl && userData) {
setUserData(prevData => prevData ? {...prevData, pfpURL: profilePictureUrl} : null);
}
}, [profilePictureUrl]);
const fetchRelationshipStatus = async () => {
try {
const userDataFromStorage: UserData = await getUserData();
if (!userDataFromStorage || !userDataFromStorage.appleId) {
throw new Error('User data not found');
}
setUserData(userDataFromStorage);
const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/relationships/checkStatusByAppleId?appleId=${userDataFromStorage.appleId}`, {
headers: {
'x-api-key': process.env.EXPO_PUBLIC_API_KEY ?? '',
},
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.message || 'Failed to fetch relationship status');
}
const data = await response.json();
setStatus(data);
} catch (error) {
console.error('Error fetching relationship status:', error);
} finally {
setLoading(false);
}
};
if (loading) {
return <ThemedText>Loading...</ThemedText>;
}
if (!status || !status.relationship?.id) {
return (
<ThemedView style={styles.container}>
<Button width={220} height={60} onPress={() => {/* Implement request functionality */}}>
<ThemedText
style={[
styles.buttonText,
{color: Colors[scheme].background}
]}
>
Request Relationship
</ThemedText>
</Button>
</ThemedView>
);
}
return (
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>{status?.relationship?.title}</ThemedText>
<ThemedView style={styles.profileContainer}>
{userData && (
<ThemedView style={styles.profileWrapper}>
<Image
source={{ uri: `${process.env.EXPO_PUBLIC_URL}${userData.pfpURL}` }}
style={styles.profilePicture}
/>
<ThemedText style={styles.name}>{userData.fullName.split(' ')[0]}</ThemedText>
</ThemedView>
)}
{status?.partner && (
<ThemedView style={styles.profileWrapper}>
<Image
source={{ uri: `${process.env.EXPO_PUBLIC_URL}${status.partner.pfpURL}` }}
style={styles.profilePicture}
/>
<ThemedText style={styles.name}>{status.partner.fullName.split(' ')[0]}</ThemedText>
</ThemedView>
)}
</ThemedView>
</ThemedView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
profileContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 20,
},
profileWrapper: {
alignItems: 'center',
marginHorizontal: 10,
},
profilePicture: {
width: 100,
height: 100,
borderRadius: 50,
marginBottom: 10,
},
name: {
fontSize: 12,
fontWeight: 'bold',
},
buttonText: {
fontSize: 16,
},
});
export default Relationships;

View File

@ -0,0 +1,154 @@
import React, { useEffect, useState } from "react";
import { StyleSheet, Alert, Image, TouchableOpacity } from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { getUserData, updateUserData } from "@/components/services/securestorage/UserData";
import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';
type UserData = {
fullName: string;
appleEmail: string;
appleId: string;
pfpURL: string;
};
type UserInfoProps = {
onProfilePictureUpdate: (url: string) => void;
};
const UserInfo: React.FC<UserInfoProps> = ({ onProfilePictureUpdate }) => {
const [userData, setUserData] = useState<UserData | null>(null);
useEffect(() => {
const fetchUserData = async () => {
try {
const data = await getUserData();
setUserData(data);
if (data.pfpURL) {
onProfilePictureUpdate(data.pfpURL);
}
} catch (error) {
console.error("Error fetching user data:", error);
Alert.alert("Error", "Failed to load user data");
}
};
fetchUserData();
}, [onProfilePictureUpdate]);
const handleUpdateProfilePicture = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
Alert.alert("Permission Required", "You need to grant permission to access your photos");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.canceled && result.assets[0].uri) {
try {
// Manipulate the image
const manipResult = await manipulateAsync(
result.assets[0].uri,
[
{ resize: { width: 300, height: 300 } },
// You can add more manipulations here if needed
],
{ compress: 0.7, format: SaveFormat.JPEG }
);
const apiUrl = `${process.env.EXPO_PUBLIC_API_URL}/users/updatePfp`;
console.log("Sending request to:", apiUrl);
const response = await FileSystem.uploadAsync(apiUrl, manipResult.uri, {
fieldName: 'file',
httpMethod: 'POST',
uploadType: FileSystem.FileSystemUploadType.MULTIPART,
parameters: { appleId: userData?.appleId || '' },
headers: {
'x-api-key': process.env.EXPO_PUBLIC_API_KEY ?? '',
},
});
console.log('Response status:', response.status);
console.log('Response headers:', JSON.stringify(response.headers, null, 2));
console.log('Response body:', response.body);
if (response.status !== 200) {
throw new Error(`Server responded with status ${response.status}: ${response.body}`);
}
const responseData = JSON.parse(response.body);
const newPfpURL = responseData.pfpURL;
// Update local state
setUserData(prevData => prevData ? {...prevData, pfpURL: newPfpURL} : null);
// Update SecureStorage
await updateUserData({ pfpURL: newPfpURL });
onProfilePictureUpdate(newPfpURL);
} catch (error) {
console.error("Error updating profile picture:", error);
console.error("Error details:", error.message);
Alert.alert("Error", `Failed to update profile picture: ${error.message}`);
}
}
};
return (
<ThemedView style={styles.container}>
{userData ? (
<ThemedView style={styles.profileContainer}>
<TouchableOpacity onPress={handleUpdateProfilePicture}>
<Image
source={userData.pfpURL ? { uri: `${process.env.EXPO_PUBLIC_URL}${userData.pfpURL}` } : require('@/assets/images/default-profile.png')}
style={styles.profilePicture}
/>
</TouchableOpacity>
<ThemedText style={styles.name}>{userData.fullName}</ThemedText>
<ThemedText style={styles.email}>{userData.appleEmail}</ThemedText>
</ThemedView>
) : (
<ThemedText>Loading user data...</ThemedText>
)}
</ThemedView>
);
}
export default UserInfo;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
profileContainer: {
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
},
profilePicture: {
width: 100,
height: 100,
borderRadius: 50,
marginBottom: 10,
},
name: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 5,
},
email: {
fontSize: 16,
marginBottom: 20,
},
});

View File

@ -17,3 +17,18 @@ export const getUserData = async () => {
return null;
}
};
export const updateUserData = async (updatedFields: Partial<any>) => {
try {
const currentUserData = await getUserData();
if (currentUserData) {
const updatedUserData = { ...currentUserData, ...updatedFields };
await saveUserData(updatedUserData);
return updatedUserData;
}
return null;
} catch (error) {
console.error('Error updating user data:', error);
return null;
}
};