rss-reader/static/js/app.js

// Fetch and display feeds
async function fetchFeeds() {
    try {
        const response = await fetch('/feeds');
        if (response.ok) {
            const feeds = await response.json();
            console.log('Feeds loaded:', feeds);
        } else {
            console.error('Failed to load feeds:', response.status);
        }
    } catch (error) {
        console.error('Error loading feeds:', error);
    }
}

// Load feeds when page loads
document.addEventListener('DOMContentLoaded', fetchFeeds);

// Logout functionality
document.getElementById('logoutButton').addEventListener('click', async () => {
    try {
        const response = await fetch('/logout', {
            method: 'POST',
        });

        if (response.ok) {
            window.location.href = '/login';
        }
    } catch (error) {
        console.error('Logout failed:', error);
    }
});

// Modal functionality
const modal = document.getElementById('addFeedModal');
const addFeedButton = document.getElementById('addFeedButton');
const cancelButton = document.getElementById('cancelAddFeed');
const confirmButton = document.getElementById('confirmAddFeed');
const addFeedForm = document.getElementById('addFeedForm');
const errorMessage = document.getElementById('feedErrorMessage');
const loadingMessage = document.getElementById('loadingMessage');

function showModal() {
    modal.classList.add('show');
    errorMessage.style.display = 'none';
    loadingMessage.style.display = 'none';
    addFeedForm.reset();
    confirmButton.disabled = false;
}

function hideModal() {
    modal.classList.remove('show');
    errorMessage.style.display = 'none';
    loadingMessage.style.display = 'none';
    addFeedForm.reset();
    confirmButton.disabled = false;
}

function showError(message) {
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
    loadingMessage.style.display = 'none';
    confirmButton.disabled = false;
}

function showLoading() {
    loadingMessage.style.display = 'block';
    errorMessage.style.display = 'none';
    confirmButton.disabled = true;
}

addFeedButton.addEventListener('click', showModal);
cancelButton.addEventListener('click', hideModal);

// Close modal when clicking outside
modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        hideModal();
    }
});

confirmButton.addEventListener('click', async () => {
    const url = document.getElementById('feedUrl').value.trim();

    if (!url) {
        showError('Please enter a feed URL');
        return;
    }

    showLoading();

    try {
        const response = await fetch('/feeds', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ url }),
        });

        if (response.ok) {
            hideModal();
            // Refresh the feed list
            fetchFeeds();
        } else {
            switch (response.status) {
                case 409:
                    showError('You already have this feed added');
                    break;
                case 422:
                    showError('Invalid feed URL. Please make sure it\'s a valid RSS or Atom feed.');
                    break;
                default:
                    showError('Failed to add feed. Please try again.');
            }
        }
    } catch (error) {
        console.error('Add feed failed:', error);
        showError('An error occurred. Please try again.');
    }
});