← back to Watches

src/components/SetAlertModal.jsx

57 lines

import React, { useState } from 'react';

const SetAlertModal = ({ watch, currentPrice, onClose, onSave }) => {
  const [targetPrice, setTargetPrice] = useState('');
  const [direction, setDirection] = useState('below');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await fetch('/api/alerts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ watchId: watch.id, targetPrice: parseFloat(targetPrice), direction })
      });
      const data = await response.json();
      if (data.success) {
        onSave?.(data.alert);
        onClose();
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 w-full max-w-md">
        <h2 className="text-xl font-bold mb-4">Set Price Alert</h2>
        <p className="text-gray-600 mb-4">{watch.model}</p>
        {currentPrice && <p className="text-sm text-gray-500 mb-4">Current: ${currentPrice.toLocaleString()}</p>}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Alert when price goes</label>
            <select value={direction} onChange={(e) => setDirection(e.target.value)} className="w-full px-3 py-2 border rounded-lg">
              <option value="below">Below</option>
              <option value="above">Above</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Target Price ($)</label>
            <input type="number" value={targetPrice} onChange={(e) => setTargetPrice(e.target.value)} className="w-full px-3 py-2 border rounded-lg" placeholder="5000" required />
          </div>
          <div className="flex space-x-3">
            <button type="submit" disabled={loading} className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">{loading ? 'Saving...' : 'Create Alert'}</button>
            <button type="button" onClick={onClose} className="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SetAlertModal;