Skip to main content
Glama
lallen30
by lallen30
ContactScreen.tsx6.65 kB
import React, { useState, useEffect } from 'react'; import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert, KeyboardAvoidingView, Platform, SafeAreaView, Keyboard, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { API } from '../../../config/apiConfig'; import axiosRequest from '../../../utils/axiosUtils'; import { styles } from './Styles'; import { colors } from '../../../theme/colors'; const ContactScreen = () => { const navigation = useNavigation(); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [subject, setSubject] = useState(''); const [message, setMessage] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); useEffect(() => { loadUserData(); }, []); const loadUserData = async () => { try { const userDataString = await AsyncStorage.getItem('userData'); if (userDataString) { const userData = JSON.parse(userDataString); if (userData.userData) { setName(userData.userData.display_name || ''); setEmail(userData.userData.user_email || ''); setPhone(userData.userData.phone || ''); } } } catch (error) { console.error('Error loading user data:', error); } }; const handleSubmit = async () => { if (isSubmitting) return; if (!name || !email || !subject || !message) { Alert.alert('Error', 'Please fill in all required fields'); return; } setIsSubmitting(true); Keyboard.dismiss(); try { const userData = await AsyncStorage.getItem('userData'); const token = userData ? JSON.parse(userData).token : null; // Create URL-encoded form data const params = new URLSearchParams(); params.append('name', name.trim()); params.append('email', email.trim()); if (phone) params.append('phone', phone.trim()); params.append('subject', subject.trim()); params.append('message', message.trim()); const response = await axiosRequest.post(`${API.ENDPOINTS.MOBILEAPI}/contact_us`, params.toString(), { headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', ...(token ? { 'Authorization': `Bearer ${token}` } : {}) } } ); if (response?.data?.success) { // Clear form setName(''); setEmail(''); setPhone(''); setSubject(''); setMessage(''); // Show success and navigate Alert.alert( 'Success', response.data.message || 'Your message has been sent successfully.', [{ text: 'OK', onPress: () => navigation.navigate('Home'), style: 'default' }] ); } else { Alert.alert('Error', response?.data?.message || 'Failed to send message. Please try again.'); } } catch (error: any) { console.error('Contact submission error:', error.message); Alert.alert('Error', error.response?.data?.message || error.message || 'Failed to send message. Please try again.'); } finally { setIsSubmitting(false); } }; return ( <SafeAreaView style={styles.safeArea}> <KeyboardAvoidingView style={styles.keyboardAvoidingView} behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0} > <View style={styles.contentContainer}> <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContent} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} > <View style={styles.formContainer}> <Text style={styles.label}>Name *</Text> <TextInput style={styles.input} value={name} onChangeText={setName} placeholder="Enter your full name" placeholderTextColor={colors.dark} returnKeyType="next" /> <Text style={styles.label}>Email *</Text> <TextInput style={styles.input} value={email} onChangeText={setEmail} placeholder="Enter your email" placeholderTextColor={colors.dark} keyboardType="email-address" autoCapitalize="none" returnKeyType="next" /> <Text style={styles.label}>Phone</Text> <TextInput style={styles.input} value={phone} onChangeText={setPhone} placeholder="Enter your phone number" placeholderTextColor={colors.dark} keyboardType="phone-pad" returnKeyType="next" /> <Text style={styles.label}>Subject *</Text> <TextInput style={styles.input} value={subject} onChangeText={setSubject} placeholder="Enter subject" placeholderTextColor={colors.dark} returnKeyType="next" /> <Text style={styles.label}>Message *</Text> <TextInput style={[styles.input, styles.messageInput]} value={message} onChangeText={setMessage} placeholder="Enter a brief message" placeholderTextColor={colors.dark} multiline numberOfLines={4} returnKeyType="done" onSubmitEditing={Keyboard.dismiss} /> </View> </ScrollView> <View style={styles.buttonWrapper}> <TouchableOpacity style={[styles.submitButton, isSubmitting && styles.submitButtonDisabled]} onPress={() => { Keyboard.dismiss(); handleSubmit(); }} disabled={isSubmitting} > <Text style={styles.submitButtonText}> {isSubmitting ? 'Sending...' : 'Send Message'} </Text> </TouchableOpacity> </View> </View> </KeyboardAvoidingView> </SafeAreaView> ); }; export default ContactScreen;

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lallen30/mcp-remote-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server