fuse_expo/app/(tabs)/sendmessage.tsx

142 lines
3.6 KiB
TypeScript
Raw Normal View History

2024-09-10 11:03:30 -05:00
import React, { useState, useEffect } from 'react';
2024-09-10 13:30:33 -05:00
import {
StyleSheet,
TextInput,
TouchableOpacity,
Alert,
Keyboard,
TouchableWithoutFeedback,
KeyboardAvoidingView,
2024-09-10 16:57:14 -05:00
Platform,
View
2024-09-10 13:30:33 -05:00
} from 'react-native';
2024-09-09 22:57:42 -05:00
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
2024-09-10 11:03:30 -05:00
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
2024-09-10 13:30:33 -05:00
const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
2024-09-10 11:03:30 -05:00
export default function SendMessageScreen() {
const [message, setMessage] = useState('');
const [userId, setUserId] = useState(null);
2024-09-10 16:57:14 -05:00
const [inputHeight, setInputHeight] = useState(100);
const updateInputHeight = (height: number) => {
setInputHeight(Math.max(100, height));
};
2024-09-10 11:03:30 -05:00
useEffect(() => {
getUserId();
}, []);
const getUserId = async () => {
try {
const storedUser = await AsyncStorage.getItem('@user');
if (storedUser) {
const user = JSON.parse(storedUser);
setUserId(user.id);
}
} catch (error) {
console.error('Failed to get user ID:', error);
}
};
const sendMessage = async () => {
if (!message.trim()) {
Alert.alert('Error', 'Please enter a message');
return;
}
if (!userId) {
Alert.alert('Error', 'User not found. Please select a user first.');
return;
}
try {
await axios.post(`${BASE_URL}/setMessage`, null, {
params: { apiKey: API_KEY, userId, message }
});
Alert.alert('Success', 'Message sent successfully');
setMessage('');
Keyboard.dismiss();
} catch (error) {
console.error('Failed to send message:', error);
Alert.alert('Error', 'Failed to send message. Please try again.');
}
};
2024-09-09 22:57:42 -05:00
return (
2024-09-10 13:30:33 -05:00
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={{flex: 1}}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<LinearGradient
colors={['#F67C0A', '#F60AD3']}
style={styles.container}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
2024-09-10 16:57:14 -05:00
<View style={styles.container}>
<TextInput
style={[styles.input, { height: inputHeight }]}
value={message}
onChangeText={setMessage}
placeholder="Send a message"
placeholderTextColor="#FFFFFF"
multiline
numberOfLines={4}
textAlignVertical="top"
onContentSizeChange={(event) =>
updateInputHeight(event.nativeEvent.contentSize.height)
}
/>
<TouchableOpacity style={styles.button} onPress={sendMessage}>
<ThemedText style={styles.buttonText}>Send Message</ThemedText>
</TouchableOpacity>
2024-09-10 16:57:14 -05:00
</View>
</LinearGradient>
2024-09-10 13:30:33 -05:00
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
2024-09-10 11:03:30 -05:00
);
2024-09-09 22:57:42 -05:00
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
2024-09-10 11:03:30 -05:00
padding: 20,
backgroundColor: 'transparent',
2024-09-10 16:57:14 -05:00
width: '100%',
2024-09-09 22:57:42 -05:00
},
2024-09-10 11:03:30 -05:00
input: {
width: '100%',
2024-09-10 16:57:14 -05:00
minHeight: 100,
borderColor: 'transparent',
2024-09-10 11:03:30 -05:00
borderWidth: 1,
borderRadius: 10,
2024-09-10 11:03:30 -05:00
padding: 10,
marginBottom: 20,
2024-09-10 16:57:14 -05:00
fontSize: 42,
textAlign: 'center',
color: '#FFFFFF',
fontWeight: 'bold',
backgroundColor: 'transparent',
2024-09-10 11:03:30 -05:00
},
button: {
backgroundColor: '#730FF8',
2024-09-10 11:03:30 -05:00
padding: 15,
borderColor: '#730FF8',
borderRadius: 10,
2024-09-10 11:03:30 -05:00
},
buttonText: {
color: 'white',
fontSize: 22,
2024-09-10 11:03:30 -05:00
fontWeight: 'bold',
},
});