Fix comments loading: reset timeout, querySelectorAll for modals, remove dupes
- 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>
This commit is contained in:
King Omar
parent
3b715e34bd
commit
a07d3f6887
1 changed files with 42 additions and 94 deletions
136
index.html
136
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue