first commit of refactor

frontend/src/pages/AlertHistory.jsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+import { getAlertEvents } from "../api/alertEvents";
+
+export default function AlertHistory() {
+  const [alertEvents, setAlertEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch alert events on mount
+  useEffect(() => {
+    async function fetchAlertEvents() {
+      try {
+        setLoading(true);
+        const data = await getAlertEvents();
+        setAlertEvents(data);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alert events:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAlertEvents();
+  }, []);
+
+  if (loading) {
+    return <div style={{ padding: "2rem" }}>Loading...</div>;
+  }
+
+  if (error) {
+    return <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>;
+  }
+
+  return (
+    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
+      <h1>Recent Alerts</h1>
+
+      {alertEvents.length === 0 ? (
+        <p style={{ color: "#666" }}>No alerts yet</p>
+      ) : (
+        <ul style={{ listStyle: "none", padding: 0 }}>
+          {alertEvents.map((event) => (
+            <li
+              key={event.id}
+              style={{
+                padding: "1rem",
+                marginBottom: "0.75rem",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+              }}
+            >
+              <div style={{ marginBottom: "0.5rem" }}>{event.message}</div>
+              {event.address_label && (
+                <div style={{ fontSize: "0.9rem", color: "#666", marginBottom: "0.25rem" }}>
+                  Address: {event.address_label}
+                </div>
+              )}
+              <small style={{ color: "#999" }}>
+                {formatTimestamp(event.timestamp)}
+              </small>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+// Helper to format timestamp for display
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}