Update home screen.
This commit is contained in:
parent
fb0d89eba8
commit
38f073c5ac
@ -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,
|
||||||
},
|
},
|
||||||
|
@ -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,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
@ -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
|
||||||
|
BIN
assets/images/default-profile.png
Normal file
BIN
assets/images/default-profile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 30 KiB |
@ -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';
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
89
components/home/TestPush.tsx
Normal file
89
components/home/TestPush.tsx
Normal 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,
|
||||||
|
},
|
||||||
|
});
|
@ -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));
|
||||||
|
Loading…
Reference in New Issue
Block a user