Function URLManager

frontend/src/components/Pipeline/URLManager.tsx:7–115

()

import { api } from '../../services/api';

const URLManager: React.FC = () => {
  const [newUrl, setNewUrl] = useState('');
  const [isValidating, setIsValidating] = useState(false);
  const { currentPipeline, updatePipeline } = usePipelineStore();

  const handleAddUrl = async () => {
    if (!newUrl.trim() || !currentPipeline) return;

    // Validate URL
    setIsValidating(true);
    try {
      const response = await api.post('/scraping/validate-url', { url: newUrl });
      
      if (response.data.valid) {
        const updatedUrls = [...currentPipeline.urls, newUrl];
        updatePipeline(currentPipeline.id, { urls: updatedUrls });
        setNewUrl('');
      } else {
        alert(`Invalid URL: ${response.data.error || 'URL is not accessible'}`);
      }
    } catch (error) {
      alert('Failed to validate URL');
    } finally {
      setIsValidating(false);
    }
  };

  const handleRemoveUrl = (urlToRemove: string) => {
    if (!currentPipeline) return;
    
    const updatedUrls = currentPipeline.urls.filter(url => url !== urlToRemove);
    updatePipeline(currentPipeline.id, { urls: updatedUrls });
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleAddUrl();
    }
  };

  return (
    <div className="h-full flex flex-col p-4">
      <h3 className="text-lg font-semibold mb-4">URL Management</h3>
      
      {/* Add URL Form */}
      <div className="flex space-x-2 mb-4">
        <Input
          type="url"
          value={newUrl}
          onChange={(e) => setNewUrl(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="https://example.com"
          disabled={!currentPipeline || isValidating}
        />
        <Button
          onClick={handleAddUrl}
          disabled={!newUrl.trim() || !currentPipeline || isValidating}
          variant="primary"