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 <Tabs
screenOptions={{ screenOptions={{
tabBarActiveTintColor: Colors[scheme].tint, tabBarActiveTintColor: Colors[scheme].tint,
headerShown: false, //headerShown: false,
headerStyle: { headerStyle: {
backgroundColor: Colors[scheme].background, backgroundColor: Colors[scheme].background,
}, },

View File

@ -1,108 +1,113 @@
import React, { useEffect, useState } from "react"; 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 { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView"; import { ThemedView } from "@/components/ThemedView";
import { getUserData } from "@/components/services/securestorage/UserData";
import { Colors } from '@/constants/Colors'; import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from "@expo/vector-icons/FontAwesome"; import * as ImagePicker from 'expo-image-picker';
import Button from "@/components/buttons/Button";
import { getUserData } from "@/components/services/securestorage/UserData"; type UserData = {
fullName: string;
appleEmail: string;
pfpURL: string;
// Add other fields as needed
};
const Index = () => { const Index = () => {
const scheme = useColorScheme() ?? 'light'; const scheme = useColorScheme() ?? 'light';
const [pushToken, setPushToken] = useState<string | null>(null); const [userData, setUserData] = useState<UserData | null>(null);
useEffect(() => { useEffect(() => {
const fetchUserData = async () => { const fetchUserData = async () => {
const userData = await getUserData(); try {
if (userData) { const data = await getUserData();
setPushToken(userData.pushToken); setUserData(data);
} catch (error) {
console.error("Error fetching user data:", error);
Alert.alert("Error", "Failed to load user data");
} }
}; };
fetchUserData(); fetchUserData();
}, []); }, []);
const sendPushNotification = async () => { const handleUpdateProfilePicture = async () => {
if (!pushToken) { const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
Alert.alert('Error', 'Push token not available');
return; if (permissionResult.granted === false) {
Alert.alert("Permission Required", "You need to grant permission to access your photos");
return;
} }
const message = { const result = await ImagePicker.launchImageLibraryAsync({
to: pushToken, mediaTypes: ImagePicker.MediaTypeOptions.Images,
sound: 'default', allowsEditing: true,
title: 'Hey Baby!', aspect: [1, 1],
body: 'Are you ready for push notifications?!?', quality: 1,
data: { });
someData: 'goes here'
},
};
try { if (!result.canceled) {
const response = await fetch(`https://exp.host/--/api/v2/push/send`, { // Here you would typically upload the image to your server
method: 'POST', // and update the user's profile picture URL
headers: { console.log("Selected image:", result.assets[0].uri);
Accept: 'application/json', // For now, let's just update the local state
'Accept-encoding': 'gzip, deflate', setUserData(prevData => prevData ? {...prevData, pfpURL: result.assets[0].uri} : null);
'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 ( return (
<ThemedView style={styles.container}> <ThemedView style={styles.container}>
<ThemedText style={styles.text}> {userData ? (
Home Screen <ThemedView style={styles.profileContainer}>
</ThemedText> <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}> <ThemedView style={styles.footerContainer}>
<Button width={220} height={60} {/* Add your relationship request button or other components here */}
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>
</ThemedView> </ThemedView>
</ThemedView> </ThemedView>
); );
} }
export default Index; export default Index;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
}, },
text: { profileContainer: {
alignItems: 'center',
marginTop: 20,
marginBottom: 20,
},
profilePicture: {
width: 100,
height: 100,
borderRadius: 50,
marginBottom: 10,
},
name: {
fontSize: 24, fontSize: 24,
fontWeight: 'bold',
marginBottom: 5,
},
email: {
fontSize: 16,
marginBottom: 20,
}, },
footerContainer: { footerContainer: {
flex: 1 / 3, flex: 1 / 3,
alignItems: 'center', alignItems: 'center',
}, },
buttonLabel: {
fontSize: 16,
},
buttonIcon: {
paddingRight: 8,
},
}); });

View File

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

View File

@ -82,7 +82,8 @@ const CustomView = ({
export default CustomView export default CustomView
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: {}, container: {
},
mapView: { mapView: {
width: 150, width: 150,
height: 100, 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'; import * as SecureStore from 'expo-secure-store';
type UserData = {
appleId: string;
appleEmail: string;
fullName: string;
pushToken: string;
};
export const saveUserData = async (userData: any) => { export const saveUserData = async (userData: any) => {
try { try {
await SecureStore.setItemAsync('userData', JSON.stringify(userData)); await SecureStore.setItemAsync('userData', JSON.stringify(userData));