x comments

index.html

@@ -1824,6 +1824,18 @@ async function submitVote(proposalId, voteType, isPetition = false, petitionDeta
     </div>
     <div class="proposal-time">${formatDate(proposal.timestamp)}</div>
   </div>
+    <div class="comments-section">
+    <button class="comments-toggle" id="comments-toggle-${proposal.id}">
+      <span class="comments-toggle-icon">▶</span> 0 comments
+    </button>
+    <div class="comments-container" id="comments-container-${proposal.id}" style="display: none;">
+      <div class="comments-list" id="comments-list-${proposal.id}"></div>
+      <div class="comment-form">
+        <textarea class="comment-input" id="comment-input-${proposal.id}" placeholder="Add your comment..."></textarea>
+        <button class="comment-submit" data-proposal-id="${proposal.id}">Submit</button>
+      </div>
+    </div>
+  </div>
 `;
     
     proposalsContainer.appendChild(proposalCard);
@@ -1856,9 +1868,47 @@ async function submitVote(proposalId, voteType, isPetition = false, petitionDeta
         copyToClipboard(getShareableLink(proposal.id));
       });
     }
+ 
+
+// Add comments toggle functionality
+const commentsToggle = document.getElementById(`comments-toggle-${proposal.id}`);
+const commentsContainer = document.getElementById(`comments-container-${proposal.id}`);
+
+if (commentsToggle && commentsContainer) {
+  commentsToggle.addEventListener('click', function() {
+    const isVisible = commentsContainer.style.display !== 'none';
+    
+    if (isVisible) {
+      commentsContainer.style.display = 'none';
+      this.querySelector('.comments-toggle-icon').textContent = '▶';
+    } else {
+      commentsContainer.style.display = 'block';
+      this.querySelector('.comments-toggle-icon').textContent = '▼';
+      loadComments(proposal.id);
+    }
   });
 }
 
+// Add event listener for comment submission
+const commentSubmit = document.querySelector(`.comment-submit[data-proposal-id="${proposal.id}"]`);
+if (commentSubmit) {
+  commentSubmit.addEventListener('click', function() {
+    const commentInput = document.getElementById(`comment-input-${proposal.id}`);
+    const commentText = commentInput.value.trim();
+    
+    if (commentText) {
+      submitComment(proposal.id, commentText);
+      commentInput.value = '';
+    }
+  });
+}
+
+// Update comment count
+updateCommentCount(proposal.id);
+
+});
+}
+
         // Create meme upload elements
         function createMemeUpload() {
             const uploadContainer = document.createElement('div');
@@ -2793,7 +2843,6 @@ function addCommentsToProposal(proposalCard, proposalId) {
   const commentsToggle = document.createElement('button');
   commentsToggle.className = 'comments-toggle';
   commentsToggle.setAttribute('aria-expanded', 'false');
-  commentsToggle.innerHTML = '<span class="comments-toggle-icon">▶</span> x comments';
   
   const commentsContainer = document.createElement('div');
   commentsContainer.className = 'comments-container';
@@ -2914,6 +2963,80 @@ function addCommentsToProposal(proposalCard, proposalId) {
     }
     
     });
+
+    // Add these functions outside your renderProposals function
+
+function updateCommentCount(proposalId) {
+  const commentsToggle = document.getElementById(`comments-toggle-${proposalId}`);
+  if (!commentsToggle) return;
+  
+  fetch(`${API_BASE_URL}/comments?proposalId=${proposalId}`)
+    .then(response => response.json())
+    .then(comments => {
+      const commentCount = comments.length;
+      const commentText = commentCount === 1 ? 'comment' : 'comments';
+      commentsToggle.innerHTML = `<span class="comments-toggle-icon">▶</span> ${commentCount} ${commentText}`;
+    })
+    .catch(error => {
+      commentsToggle.innerHTML = `<span class="comments-toggle-icon">▶</span> 0 comments`;
+    });
+}
+
+function loadComments(proposalId) {
+  const commentsList = document.getElementById(`comments-list-${proposalId}`);
+  if (!commentsList) return;
+  
+  commentsList.innerHTML = '<div class="comments-loading">Loading comments...</div>';
+  
+  fetch(`${API_BASE_URL}/comments?proposalId=${proposalId}`)
+    .then(response => response.json())
+    .then(comments => {
+      if (comments.length === 0) {
+        commentsList.innerHTML = '<div class="no-comments">No comments yet. Be the first to comment!</div>';
+        return;
+      }
+      
+      commentsList.innerHTML = '';
+      comments.forEach(comment => {
+        const commentElement = document.createElement('div');
+        commentElement.className = 'comment';
+        commentElement.innerHTML = `
+          <div class="comment-header">
+            <span class="comment-author">${comment.user_name}</span>
+            <span class="comment-time">${formatDate(comment.timestamp)}</span>
+          </div>
+          <div class="comment-body">${comment.comment_text}</div>
+        `;
+        commentsList.appendChild(commentElement);
+      });
+    })
+    .catch(error => {
+      commentsList.innerHTML = '<div class="comments-error">Failed to load comments.</div>';
+    });
+}
+
+function submitComment(proposalId, commentText) {
+  fetch(`${API_BASE_URL}/comments`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      proposalId: proposalId,
+      userId: currentUser.id,
+      commentText: commentText
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      loadComments(proposalId);
+      updateCommentCount(proposalId);
+      showToastMessage('Comment posted!', '#11cc77');
+    })
+    .catch(error => {
+      showToastMessage('Failed to post comment', '#ff0099');
+    });
+}
         </script>
 
         <div class="music-prompt" id="music-prompt">hit me</div>