← back to Watches

src/components/AlertsPage.jsx

57 lines

import React, { useState, useEffect } from 'react';

const AlertsPage = () => {
  const [alerts, setAlerts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/alerts', { credentials: 'include' })
      .then(r => r.json())
      .then(data => { setAlerts(data.alerts || []); setLoading(false); });
  }, []);

  const toggleAlert = async (id, isActive) => {
    await fetch(`/api/alerts/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ isActive: !isActive }) });
    setAlerts(alerts.map(a => a.id === id ? { ...a, is_active: !isActive } : a));
  };

  const deleteAlert = async (id) => {
    if (!confirm('Delete this alert?')) return;
    await fetch(`/api/alerts/${id}`, { method: 'DELETE', credentials: 'include' });
    setAlerts(alerts.filter(a => a.id !== id));
  };

  if (loading) return <div className="p-6">Loading...</div>;

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Price Alerts</h1>
      {alerts.length === 0 ? (
        <p className="text-gray-500">No alerts set. Visit a watch to create one.</p>
      ) : (
        <div className="space-y-4">
          {alerts.map(alert => (
            <div key={alert.id} className={`p-4 rounded-lg border ${alert.is_active ? 'bg-white' : 'bg-gray-50'}`}>
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-medium">{alert.watch_name}</h3>
                  <p className="text-sm text-gray-500">Alert when {alert.direction} ${alert.target_price.toLocaleString()}</p>
                  {alert.triggered_at && <p className="text-xs text-green-600">Triggered at ${alert.trigger_price}</p>}
                </div>
                <div className="flex items-center space-x-3">
                  <button onClick={() => toggleAlert(alert.id, alert.is_active)} className={`px-3 py-1 rounded text-sm ${alert.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-600'}`}>
                    {alert.is_active ? 'Active' : 'Paused'}
                  </button>
                  <button onClick={() => deleteAlert(alert.id)} className="text-red-600 hover:text-red-700 text-sm">Delete</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default AlertsPage;