fuse_expo/app/(tabs)/sendmessage.tsx

144 lines
3.7 KiB
TypeScript

import React, { useState, useEffect } from 'react';
import {
StyleSheet,
TextInput,
TouchableOpacity,
Alert,
Keyboard,
TouchableWithoutFeedback,
KeyboardAvoidingView,
Platform,
View
} from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
export default function SendMessageScreen() {
const [message, setMessage] = useState('');
const [userId, setUserId] = useState(null);
const [inputHeight, setInputHeight] = useState(100);
const updateInputHeight = (height: number) => {
setInputHeight(Math.max(100, height));
};
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.');
}
};
return (
<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 }}
>
<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>
</View>
</LinearGradient>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
padding: 20,
backgroundColor: 'transparent',
width: '100%',
},
input: {
width: '100%',
minHeight: 120,
borderColor: 'transparent',
borderWidth: 1,
borderRadius: 10,
padding: 10,
marginBottom: 20,
marginTop: 160,
fontSize: 42,
lineHeight: 60,
textAlign: 'center',
color: '#FFFFFF',
fontWeight: 'bold',
backgroundColor: 'transparent',
},
button: {
backgroundColor: '#730FF8',
padding: 15,
borderColor: '#730FF8',
borderRadius: 10,
},
buttonText: {
color: 'white',
fontSize: 22,
fontWeight: 'bold',
},
});