← back to Watches

src/components/AlertPreferences.jsx

29 lines

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

const AlertPreferences = () => {
  const [prefs, setPrefs] = useState({ email_notifications: true, push_notifications: false, max_alerts_per_day: 10 });

  useEffect(() => {
    fetch('/api/user/preferences', { credentials: 'include' }).then(r => r.json()).then(d => d.preferences && setPrefs(d.preferences));
  }, []);

  const save = async () => {
    await fetch('/api/user/preferences', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(prefs) });
    alert('Preferences saved');
  };

  return (
    <div className="bg-white rounded-lg shadow p-6 max-w-md">
      <h2 className="text-lg font-semibold mb-4">Alert Preferences</h2>
      <div className="space-y-4">
        <label className="flex items-center"><input type="checkbox" checked={prefs.email_notifications} onChange={e => setPrefs({...prefs, email_notifications: e.target.checked})} className="mr-2" /> Email notifications</label>
        <label className="flex items-center"><input type="checkbox" checked={prefs.push_notifications} onChange={e => setPrefs({...prefs, push_notifications: e.target.checked})} className="mr-2" /> Push notifications</label>
        <div><label className="block text-sm">Max alerts per day</label><input type="number" value={prefs.max_alerts_per_day} onChange={e => setPrefs({...prefs, max_alerts_per_day: parseInt(e.target.value)})} className="w-20 px-2 py-1 border rounded" /></div>
        <button onClick={save} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
      </div>
    </div>
  );
};

export default AlertPreferences;