From a07d3f688760eafcebcf7c6e7b1ec9989297b37e Mon Sep 17 00:00:00 2001
From: King Omar <omar@bored.investments>
Date: Sat, 27 Jun 2026 03:12:33 +1000
Subject: [PATCH] Fix comments loading: reset timeout, querySelectorAll for
 modals, remove dupes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- commentRequestTimeout never reset to null — comments only loaded once ever
- querySelector missed modal containers when same proposal was in feed + modal
- Switch to querySelectorAll so feed card and modal both update simultaneously
- Toggle count now updates on load (not just after posting)
- Remove two duplicate loadComments and submitComment definitions
- Simplify loadModalComments to delegate to loadComments

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 136 +++++++++++++++++------------------------------------
 1 file changed, 42 insertions(+), 94 deletions(-)

diff --git a/index.html b/index.html
index d3c5a8d..a5c8980 100644
--- a/index.html
+++ b/index.html
@@ -2308,16 +2308,8 @@ if (twitterImageElement) {
   loadModalComments(proposal.id);
 }
 
-// Update the loadModalComments function to use the queue
-async function loadModalComments(proposalId) {
-  const commentsContent = document.getElementById(`modal-comments-content-${proposalId}`);
-  if (!commentsContent) return;
-  
-  // Show loading state
-  commentsContent.innerHTML = `<div class="comments-loading">Loading comments...</div>`;
-  
-  // Queue the comment load
-  queueCommentLoad(proposalId);
+function loadModalComments(proposalId) {
+  loadComments(proposalId);
 }
 
 function renderModalComments(container, comments) {
@@ -2459,17 +2451,12 @@ function toggleComments(proposalId, button) {
   }
 }
 
-// Function to load comments for a proposal
-async function loadComments(proposalId) {
-  const commentsContainer = document.querySelector(`.comments-container[data-proposal-id="${proposalId}"]`);
-  const commentsContent = commentsContainer?.querySelector('.comments-content');
-  
-  if (!commentsContent) return;
-  
-  // Show loading state
-  commentsContent.innerHTML = `<div class="comments-loading">Loading comments...</div>`;
-  
-  // Queue the comment load
+// Function to load comments for a proposal (feed cards and modals)
+function loadComments(proposalId) {
+  document.querySelectorAll(`.comments-container[data-proposal-id="${proposalId}"]`).forEach(container => {
+    const content = container.querySelector('.comments-content');
+    if (content) content.innerHTML = `<div class="comments-loading">Loading comments...</div>`;
+  });
   queueCommentLoad(proposalId);
 }
 
@@ -2949,45 +2936,6 @@ function updateCommentCount(proposalId) {
     });
 }
 
-// Using the queue-based loadComments function to load comments
-function loadComments(proposalId) {
-  const commentsContainer = document.querySelector(`.comments-container[data-proposal-id="${proposalId}"]`);
-  const commentsContent = commentsContainer?.querySelector('.comments-content');
-  
-  if (!commentsContent) return;
-  
-  // Show loading state
-  commentsContent.innerHTML = `<div class="comments-loading">Loading comments...</div>`;
-  
-  // Queue the comment load
-  queueCommentLoad(proposalId);
-}
-
-// Update submitComment function to handle promises
-function submitComment(proposalId, commentText) {
-  return safeFetch(`${API_BASE_URL}/comments`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      proposalId: proposalId,
-      userId: currentUser.id,
-      commentText: commentText
-    })
-  })
-  .then(data => {
-    loadComments(proposalId);
-    updateCommentCount(proposalId);
-    showToastMessage('Comment posted!', '#11cc77');
-    return data;
-  })
-  .catch(error => {
-    console.error('Error posting comment:', error);
-    showToastMessage('Failed to post comment', '#ff0099');
-    throw error;
-  });
-}
 
 // Add these new functions for comment management
 const commentRequestQueue = new Set();
@@ -2996,44 +2944,44 @@ const MAX_BATCH_SIZE = 10;
 const COMMENT_REQUEST_DELAY = 1000; // 1 second delay between batches
 
 async function batchLoadComments() {
+  commentRequestTimeout = null; // reset so the next queueCommentLoad can schedule again
   if (commentRequestQueue.size === 0) return;
-  
+
   const batch = Array.from(commentRequestQueue).slice(0, MAX_BATCH_SIZE);
   commentRequestQueue.clear();
-  
-  try {
-    const responses = await Promise.all(
-      batch.map(proposalId => 
-        fetch(`${API_BASE_URL}/comments?proposalId=${proposalId}&userId=${currentUser.id}`, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json'
-          },
-          mode: 'cors',
-          credentials: 'same-origin'
-        }).then(response => {
-          if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          }
-          return response.json().then(data => ({ proposalId, data }));
-        })
-      )
-    );
-    
-    responses.forEach(({ proposalId, data }) => {
-      const commentsContainer = document.querySelector(`.comments-container[data-proposal-id="${proposalId}"]`);
-      if (commentsContainer) {
-        renderComments(commentsContainer.querySelector('.comments-content'), data);
+
+  const userId = currentUser?.id || 'anonymous';
+
+  await Promise.all(batch.map(async proposalId => {
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/comments?proposalId=${proposalId}&userId=${userId}`,
+        { method: 'GET', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, mode: 'cors', credentials: 'same-origin' }
+      );
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = await response.json();
+
+      // Update ALL containers for this proposal (covers both feed card and modal)
+      document.querySelectorAll(`.comments-container[data-proposal-id="${proposalId}"]`).forEach(container => {
+        const content = container.querySelector('.comments-content');
+        if (content) renderComments(content, data);
+      });
+
+      // Update toggle count on feed card
+      const toggle = document.getElementById(`comments-toggle-${proposalId}`);
+      if (toggle) {
+        const count = Array.isArray(data) ? data.length : 0;
+        toggle.innerHTML = `<span class="comments-toggle-icon">▼</span> ${count} ${count === 1 ? 'comment' : 'comments'}`;
       }
-    });
-  } catch (error) {
-    console.error('Error loading comments batch:', error);
-    // Retry failed requests
-    batch.forEach(proposalId => commentRequestQueue.add(proposalId));
-  }
-  
-  // Schedule next batch if there are more requests
+    } catch (err) {
+      console.error(`Failed to load comments for ${proposalId}:`, err);
+      document.querySelectorAll(`.comments-container[data-proposal-id="${proposalId}"]`).forEach(container => {
+        const content = container.querySelector('.comments-content');
+        if (content) content.innerHTML = `<div class="no-comments">Could not load comments.</div>`;
+      });
+    }
+  }));
+
   if (commentRequestQueue.size > 0) {
     commentRequestTimeout = setTimeout(batchLoadComments, COMMENT_REQUEST_DELAY);
   }