import { useState, useEffect, useRef, useCallback } from "react"; import { View, Text, StyleSheet, StatusBar, ActivityIndicator } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import { WebView } from "react-native-webview"; import { Ionicons } from "@expo/vector-icons"; import { API_BASE_URL } from "../../constants/config"; import { getToken } from "../../hooks/use-auth"; import * as GpsTracker from "../../services/gps-tracker"; export default function RescueMapScreen() { const [evacuees, setEvacuees] = useState([]); const [myCoords, setMyCoords] = useState<{ latitude: number; longitude: number } | null>(GpsTracker.getLastCoords()); const webRef = useRef(null); const fetchEvacuees = useCallback(async () => { try { const token = await getToken(); // Fetch evacuees needing help in rescuer's barangay const res = await fetch(`${API_BASE_URL}/api/users/list-all?status=Need_Assistance,In_Danger`, { headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); setEvacuees(data.data || []); } catch { /* silent */ } }, []); useEffect(() => { fetchEvacuees(); const interval = setInterval(fetchEvacuees, 5000); return () => clearInterval(interval); }, [fetchEvacuees]); useEffect(() => { const unsub = GpsTracker.onLocationUpdate((update) => { if (update.coords) setMyCoords(update.coords); }); return unsub; }, []); // Send data to webview when evacuees or location change useEffect(() => { if (!webRef.current) return; const payload = JSON.stringify({ type: "update", myLocation: myCoords ? { lat: myCoords.latitude, lng: myCoords.longitude } : null, evacuees: evacuees.filter((e) => e.latitude && e.longitude).map((e) => ({ id: e.id, name: e.full_name, lat: parseFloat(e.latitude), lng: parseFloat(e.longitude), status: e.status, })), }); webRef.current.injectJavaScript(`window.updateMapData(${payload}); true;`); }, [evacuees, myCoords]); const mapHtml = `

`; return ( Rescue Map You Need Help Danger ); } const styles = StyleSheet.create({ safeArea: { flex: 1, backgroundColor: "#0d4f4f" }, header: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 16, paddingVertical: 12 }, headerTitle: { color: "#fff", fontSize: 16, fontWeight: "800", flex: 1 }, legend: { flexDirection: "row", alignItems: "center", gap: 4 }, dot: { width: 8, height: 8, borderRadius: 4 }, legendText: { color: "rgba(255,255,255,0.7)", fontSize: 10, marginRight: 6 }, map: { flex: 1 }, });