fuse_expo/app/(tabs)/sendmessage.tsx

import React, { useState, useEffect } from 'react';
import { StyleSheet, TextInput, TouchableOpacity, Alert, Keyboard } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';

const API_KEY = 'I_Love_Madeline';
const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';

export default function SendMessageScreen() {
  const [message, setMessage] = useState('');
  const [userId, setUserId] = useState(null);

  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 (
    <ThemedView style={styles.container}>
      <ThemedText style={styles.title}>Send a Message</ThemedText>
      <TextInput
        style={styles.input}
        value={message}
        onChangeText={setMessage}
        placeholder="Enter your message"
        placeholderTextColor="#999"
        multiline
      />
      <TouchableOpacity style={styles.button} onPress={sendMessage}>
        <ThemedText style={styles.buttonText}>Send Message</ThemedText>
      </TouchableOpacity>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    width: '100%',
    height: 100,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    padding: 10,
    marginBottom: 20,
    textAlignVertical: 'top',
    color: '#FFF',
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});