import React, { useState, useEffect } from 'react';
interface Facility {
id: number;
name: string;
latitude: number;
longitude: number;
address: string;
current_detainee_count: number;
}
const HeatmapTest: React.FC = () => {
const [facilities, setFacilities] = useState<Facility[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchHeatmapData = async () => {
try {
// Use the real API endpoint
const response = await fetch('http://localhost:8082/api/heatmap-data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setFacilities(data);
setLoading(false);
} catch (err) {
console.error('Failed to fetch heatmap data:', err);
setError('Failed to load heatmap data: ' + (err as Error).message);
setLoading(false);
}
};
fetchHeatmapData();
}, []);
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
<p className="mt-4 text-lg">Loading heatmap data...</p>
</div>
</div>
);
}
if (error) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
<strong className="font-bold">Error! </strong>
<span className="block sm:inline">{error}</span>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50 p-8">
<h1 className="text-3xl font-bold text-gray-900 mb-6">Heatmap API Test</h1>
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
{facilities.map(facility => (
<li key={facility.id}>
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<div className="text-sm font-medium text-indigo-600 truncate">
{facility.name}
</div>
<div className="ml-2 flex-shrink-0 flex">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
{facility.current_detainee_count} detainees
</span>
</div>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
{facility.address}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
<span>
{facility.latitude.toFixed(4)}, {facility.longitude.toFixed(4)}
</span>
</div>
</div>
</div>
</li>
))}
</ul>
</div>
<div className="mt-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">Raw Data</h2>
<pre className="bg-gray-100 p-4 rounded-md overflow-auto">
{JSON.stringify(facilities, null, 2)}
</pre>
</div>
</div>
);
};
export default HeatmapTest;
