just another day of my life
This commit is contained in:
parent
38f073c5ac
commit
56206c1665
@ -1,77 +1,20 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { StyleSheet, Alert, Image, TouchableOpacity } from "react-native";
|
||||
import { ThemedText } from "@/components/ThemedText";
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { ThemedView } from "@/components/ThemedView";
|
||||
import { getUserData } from "@/components/services/securestorage/UserData";
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
|
||||
type UserData = {
|
||||
fullName: string;
|
||||
appleEmail: string;
|
||||
pfpURL: string;
|
||||
// Add other fields as needed
|
||||
};
|
||||
import UserInfo from "@/components/home/UserInfo";
|
||||
import Relationships from "@/components/home/Relationships";
|
||||
|
||||
const Index = () => {
|
||||
const scheme = useColorScheme() ?? 'light';
|
||||
const [userData, setUserData] = useState<UserData | null>(null);
|
||||
const [profilePictureUrl, setProfilePictureUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUserData = async () => {
|
||||
try {
|
||||
const data = await getUserData();
|
||||
setUserData(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching user data:", error);
|
||||
Alert.alert("Error", "Failed to load user data");
|
||||
}
|
||||
};
|
||||
|
||||
fetchUserData();
|
||||
}, []);
|
||||
|
||||
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) {
|
||||
// Here you would typically upload the image to your server
|
||||
// and update the user's profile picture URL
|
||||
console.log("Selected image:", result.assets[0].uri);
|
||||
// For now, let's just update the local state
|
||||
setUserData(prevData => prevData ? {...prevData, pfpURL: result.assets[0].uri} : null);
|
||||
}
|
||||
const handleProfilePictureUpdate = (newUrl: string) => {
|
||||
setProfilePictureUrl(newUrl);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
{userData ? (
|
||||
<ThemedView style={styles.profileContainer}>
|
||||
<TouchableOpacity onPress={handleUpdateProfilePicture}>
|
||||
<Image
|
||||
source={userData.pfpURL ? { uri: 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>
|
||||
)}
|
||||
<UserInfo onProfilePictureUpdate={handleProfilePictureUpdate} />
|
||||
<Relationships profilePictureUrl={profilePictureUrl} />
|
||||
<ThemedView style={styles.footerContainer}>
|
||||
{/* Add your relationship request button or other components here */}
|
||||
</ThemedView>
|
||||
@ -86,26 +29,6 @@ const styles = StyleSheet.create({
|
||||
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,
|
||||
},
|
||||
footerContainer: {
|
||||
flex: 1 / 3,
|
||||
alignItems: 'center',
|
||||
|
172
components/home/Relationships.tsx
Normal file
172
components/home/Relationships.tsx
Normal 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;
|
154
components/home/UserInfo.tsx
Normal file
154
components/home/UserInfo.tsx
Normal 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,
|
||||
},
|
||||
});
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
21
package-lock.json
generated
21
package-lock.json
generated
@ -15,8 +15,11 @@
|
||||
"expo-clipboard": "~6.0.3",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-device": "~6.0.2",
|
||||
"expo-fast-image": "^1.1.3",
|
||||
"expo-file-system": "~17.0.1",
|
||||
"expo-font": "~12.0.9",
|
||||
"expo-image": "~1.13.0",
|
||||
"expo-image-manipulator": "~12.0.5",
|
||||
"expo-image-picker": "~15.0.7",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-location": "~17.0.1",
|
||||
@ -10198,6 +10201,12 @@
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-fast-image": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/expo-fast-image/-/expo-fast-image-1.1.3.tgz",
|
||||
"integrity": "sha512-dpHvUFJxImD+yDVJk3ubCMGSYgbewPfbsPMOpD/EP7PKDA4RurtkJZcUDF8T/0gxuxZMCldPgHup6np/hrK/MQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/expo-file-system": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-17.0.1.tgz",
|
||||
@ -10237,6 +10246,18 @@
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-image-manipulator": {
|
||||
"version": "12.0.5",
|
||||
"resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-12.0.5.tgz",
|
||||
"integrity": "sha512-zJ8yINjckYw/yfoSuICt4yJ9xr112+W9e5QVXwK3nCAHr7sv45RQ5sxte0qppf594TPl+UoV6Tjim7WpoKipRQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"expo-image-loader": "~4.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"expo": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-image-picker": {
|
||||
"version": "15.0.7",
|
||||
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.7.tgz",
|
||||
|
@ -22,8 +22,11 @@
|
||||
"expo-clipboard": "~6.0.3",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-device": "~6.0.2",
|
||||
"expo-fast-image": "^1.1.3",
|
||||
"expo-file-system": "~17.0.1",
|
||||
"expo-font": "~12.0.9",
|
||||
"expo-image": "~1.13.0",
|
||||
"expo-image-manipulator": "~12.0.5",
|
||||
"expo-image-picker": "~15.0.7",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-location": "~17.0.1",
|
||||
@ -41,11 +44,11 @@
|
||||
"react-native-gesture-handler": "~2.16.1",
|
||||
"react-native-get-random-values": "~1.11.0",
|
||||
"react-native-gifted-chat": "^2.6.4",
|
||||
"react-native-maps": "1.14.0",
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-web": "~0.19.10",
|
||||
"react-native-maps": "1.14.0"
|
||||
"react-native-web": "~0.19.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
|
Loading…
Reference in New Issue
Block a user