Update home screen.

This commit is contained in:
Gabriel Brown 2024-10-10 13:02:09 -05:00
parent fb0d89eba8
commit 38f073c5ac
8 changed files with 167 additions and 91 deletions

View File

@ -10,7 +10,7 @@ const TabLayout = () => {
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[scheme].tint,
headerShown: false,
//headerShown: false,
headerStyle: {
backgroundColor: Colors[scheme].background,
},

View File

@ -1,108 +1,113 @@
import React, { useEffect, useState } from "react";
import { StyleSheet, Alert } from "react-native";
import { StyleSheet, Alert, Image, TouchableOpacity } from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { getUserData } from "@/components/services/securestorage/UserData";
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome";
import Button from "@/components/buttons/Button";
import { getUserData } from "@/components/services/securestorage/UserData";
import * as ImagePicker from 'expo-image-picker';
type UserData = {
fullName: string;
appleEmail: string;
pfpURL: string;
// Add other fields as needed
};
const Index = () => {
const scheme = useColorScheme() ?? 'light';
const [pushToken, setPushToken] = useState<string | null>(null);
const [userData, setUserData] = useState<UserData | null>(null);
useEffect(() => {
const fetchUserData = async () => {
const userData = await getUserData();
if (userData) {
setPushToken(userData.pushToken);
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 sendPushNotification = async () => {
if (!pushToken) {
Alert.alert('Error', 'Push token not available');
return;
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 message = {
to: pushToken,
sound: 'default',
title: 'Hey Baby!',
body: 'Are you ready for push notifications?!?',
data: {
someData: 'goes here'
},
};
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
try {
const response = await fetch(`https://exp.host/--/api/v2/push/send`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Accept-encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
});
const result = await response.json();
console.log('Result:', result);
Alert.alert('Success', 'Push notification sent successfully');
} catch (error) {
console.error('Error sending push notification:', error);
Alert.alert('Error', 'Failed to send push notification');
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);
}
};
return (
<ThemedView style={styles.container}>
<ThemedText style={styles.text}>
Home Screen
</ThemedText>
{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>
)}
<ThemedView style={styles.footerContainer}>
<Button width={220} height={60}
onPress={sendPushNotification}
>
<FontAwesome name="bell" size={18}
color={Colors[scheme].background} style={styles.buttonIcon}
/>
<ThemedText
style={[
styles.buttonLabel,
{color: Colors[scheme].background}
]}
>
Send Push Notification
</ThemedText>
</Button>
{/* Add your relationship request button or other components here */}
</ThemedView>
</ThemedView>
);
}
export default Index;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
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',
},
buttonLabel: {
fontSize: 16,
},
buttonIcon: {
paddingRight: 8,
},
});

View File

@ -11,25 +11,19 @@ import {
SystemMessage,
} from 'react-native-gifted-chat'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
import NavBar from '@/components/chat/NavBar'
import AccessoryBar from '@/components/chat/AccessoryBar'
import CustomActions from '@/components/chat/CustomActions'
import CustomView from '@/components/chat/CustomView'
import earlierMessages from '@/components/chat/data/earlierMessages'
import messagesData from '@/components/chat/data/messages'
import * as Clipboard from 'expo-clipboard'
//import NavBar from '@/components/chat/NavBar'
const user = {
_id: 1,
name: 'Developer',
}
// const otherUser = {
// _id: 2,
// name: 'React Native',
// avatar: 'https://facebook.github.io/react/img/logo_og.png',
// }
interface IState {
messages: any[]
step: number
@ -125,7 +119,7 @@ const App = () => {
{
pattern: /#(\w+)/,
style: { textDecorationLine: 'underline', color: 'darkorange' },
onPress: () => Linking.openURL('http://gifted.chat'),
onPress: () => Linking.openURL('https://gbrown.org'),
},
]
}, [])
@ -264,7 +258,6 @@ const App = () => {
return (
<SafeAreaView style={styles.fill}>
<NavBar />
<ThemedView style={styles.fill}>
<GiftedChat
messages={state.messages}
@ -284,7 +277,7 @@ const App = () => {
fontWeight: '200',
}}
renderQuickReplySend={renderQuickReplySend}
renderAccessory={renderAccessory}
//renderAccessory={renderAccessory}
renderActions={renderCustomActions}
renderSystemMessage={renderSystemMessage}
renderCustomView={renderCustomView}
@ -315,6 +308,8 @@ const styles = StyleSheet.create({
fill: {
flex: 1,
},
sendLine: {
}
})
export default AppWrapper

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -7,13 +7,6 @@ import * as Notifications from 'expo-notifications';
import Constants from 'expo-constants';
import { saveUserData } from '@/components/services/securestorage/UserData';
type UserData = {
appleId: string;
appleEmail: string;
fullName: string;
pushToken: string;
};
export default function SignInScreen({ onSignIn }: { onSignIn: () => void }) {
const scheme = useColorScheme() ?? 'light';

View File

@ -82,7 +82,8 @@ const CustomView = ({
export default CustomView
const styles = StyleSheet.create({
container: {},
container: {
},
mapView: {
width: 150,
height: 100,

View File

@ -0,0 +1,89 @@
import React, { useEffect, useState } from "react";
import { StyleSheet, Alert } from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome";
import Button from "@/components/buttons/Button";
import { getUserData } from "@/components/services/securestorage/UserData";
const TestPush = () => {
const scheme = useColorScheme() ?? 'light';
const [pushToken, setPushToken] = useState<string | null>(null);
useEffect(() => {
const fetchUserData = async () => {
const userData = await getUserData();
if (userData) {
setPushToken(userData.pushToken);
}
};
fetchUserData();
}, []);
const sendPushNotification = async () => {
if (!pushToken) {
Alert.alert('Error', 'Push token not available');
return;
}
const message = {
to: pushToken,
sound: 'default',
title: 'Hey Baby!',
body: 'Are you ready for push notifications?!?',
data: {
someData: 'goes here'
},
};
try {
const response = await fetch(`https://exp.host/--/api/v2/push/send`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Accept-encoding': 'gzip, deflate',
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
});
const result = await response.json();
console.log('Result:', result);
Alert.alert('Success', 'Push notification sent successfully');
} catch (error) {
console.error('Error sending push notification:', error);
Alert.alert('Error', 'Failed to send push notification');
}
};
return (
<Button width={220} height={60}
onPress={sendPushNotification}
>
<FontAwesome name="bell" size={18}
color={Colors[scheme].background} style={styles.buttonIcon}
/>
<ThemedText
style={[
styles.buttonLabel,
{color: Colors[scheme].background}
]}
>
Send Push Notification
</ThemedText>
</Button>
);
};
export default TestPush;
const styles = StyleSheet.create({
buttonLabel: {
fontSize: 16,
},
buttonIcon: {
paddingRight: 8,
},
});

View File

@ -1,12 +1,5 @@
import * as SecureStore from 'expo-secure-store';
type UserData = {
appleId: string;
appleEmail: string;
fullName: string;
pushToken: string;
};
export const saveUserData = async (userData: any) => {
try {
await SecureStore.setItemAsync('userData', JSON.stringify(userData));