diff --git a/apps/mobile/src/components/ApiTestComponent.tsx b/apps/mobile/src/components/ApiTestComponent.tsx new file mode 100644 index 0000000..22e4ed4 --- /dev/null +++ b/apps/mobile/src/components/ApiTestComponent.tsx @@ -0,0 +1,143 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet, Alert } from 'react-native'; +import { Button } from './ui/Button'; +import { Card } from './ui/Card'; +import { apiService } from '../services/api'; +import { colors } from '../constants/Colors'; +import { typography } from '../constants/Typography'; +import { spacing } from '../constants/Layout'; + +export function ApiTestComponent() { + const [isLoading, setIsLoading] = useState(false); + const [lastResult, setLastResult] = useState(''); + + const testBasicHealth = async () => { + setIsLoading(true); + try { + const result = await apiService.checkHealth(); + if (result.success) { + setLastResult(`✅ Basic Health: ${result.data?.message}`); + } else { + setLastResult(`❌ Basic Health Failed: ${result.error}`); + } + } catch (error) { + setLastResult(`❌ Health Check Error: ${error}`); + } + setIsLoading(false); + }; + + const testDetailedHealth = async () => { + setIsLoading(true); + try { + const result = await apiService.checkDetailedHealth(); + if (result.success) { + setLastResult( + `✅ Detailed Health: ${result.data?.service} v${result.data?.version} - ${result.data?.status}` + ); + } else { + setLastResult(`❌ Detailed Health Failed: ${result.error}`); + } + } catch (error) { + setLastResult(`❌ Detailed Health Error: ${error}`); + } + setIsLoading(false); + }; + + const showInstructions = () => { + Alert.alert( + 'Backend Integration Test', + 'This component helps test your backend API connection:\n\n' + + '1. Basic Health - Tests /ping endpoint\n' + + '2. Detailed Health - Tests /api/health endpoint\n\n' + + 'Make sure your backend server is running on localhost:4000', + [{ text: 'OK' }] + ); + }; + + return ( + + 🔧 API Integration Test + Test your backend connectivity + + +