From 2250088353fbc82b0ed68ae99986305f8c64cfe6 Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Sun, 2 Feb 2025 02:11:13 -0800
Subject: [PATCH] Add feed

---
 static/js/app.js          | 50 +++++++++++++++++++++++++++++++++++----
 templates/index.html.tera |  8 ++++++-
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 7fff34c..ab7654a 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -19,16 +19,25 @@ 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');
 
 function showModal() {
     modal.classList.add('show');
+    errorMessage.style.display = 'none';
+    addFeedForm.reset();
 }
 
 function hideModal() {
     modal.classList.remove('show');
+    errorMessage.style.display = 'none';
     addFeedForm.reset();
 }
 
+function showError(message) {
+    errorMessage.textContent = message;
+    errorMessage.style.display = 'block';
+}
+
 addFeedButton.addEventListener('click', showModal);
 cancelButton.addEventListener('click', hideModal);
 
@@ -40,12 +49,43 @@ modal.addEventListener('click', (e) => {
 });
 
 confirmButton.addEventListener('click', async () => {
-    const feedUrl = document.getElementById('feedUrl').value;
-    if (!feedUrl) {
+    const name = document.getElementById('feedName').value.trim();
+    const url = document.getElementById('feedUrl').value.trim();
+
+    if (!name || !url) {
+        showError('Please fill in all fields');
         return;
     }
 
-    // TODO: Add API endpoint integration here
-    console.log('Feed URL to add:', feedUrl);
-    hideModal();
+    try {
+        const response = await fetch('/feeds', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ name, url }),
+        });
+
+        if (response.ok) {
+            hideModal();
+            // TODO: Update the feed list in the UI
+            // For now, we'll just reload the page
+            window.location.reload();
+        } else {
+            const errorText = await response.text();
+            switch (response.status) {
+                case 409:
+                    showError('You already have this feed added');
+                    break;
+                case 422:
+                    showError('Invalid feed URL. Please make sure it starts with http:// or https://');
+                    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.');
+    }
 }); 
\ No newline at end of file
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 0be3524..892aa55 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -22,11 +22,17 @@
             </div>
             <div class="modal-body">
                 <form id="addFeedForm">
+                    <div class="form-group">
+                        <label for="feedName">Feed Name</label>
+                        <input type="text" id="feedName" name="name" required 
+                               placeholder="My Blog Feed">
+                    </div>
                     <div class="form-group">
                         <label for="feedUrl">Feed URL</label>
-                        <input type="url" id="feedUrl" name="feedUrl" required 
+                        <input type="url" id="feedUrl" name="url" required 
                                placeholder="https://example.com/feed.xml">
                     </div>
+                    <div class="error-message" id="feedErrorMessage" style="display: none; color: red; margin-bottom: 10px;"></div>
                 </form>
             </div>
             <div class="modal-footer">