comment.js

document.addEventListener('DOMContentLoaded', () => {

  const commentForm = document.querySelector('#comment-form');
  const commentsContainer = document.querySelector('#comments-container');


  commentForm.addEventListener('submit', (event) => {
    event.preventDefault();
    submitComment(event);
  });

  // Add click event listeners to all reply buttons
  const replyButtons = document.querySelectorAll('.reply-btn');
  replyButtons.forEach((button) => {
    button.addEventListener('click', (event) => {
      event.preventDefault();
      showReplyForm(button.dataset.parentId, button.dataset.commentId);
    });
  });

  function showReplyForm(parentId, commentId) {
    
    const parentComment = document.querySelector(`[data-comment-id="${parentId}"]`);
    let replyFormContainer = parentComment.querySelector(`[data-comment-id="${commentId}-reply"]`);

    if (!replyFormContainer) {
      replyFormContainer = document.createElement('div');
      replyFormContainer.className = 'reply-form-container';
      replyFormContainer.setAttribute('data-comment-id', `${commentId}-reply`);

      const replyForm = document.createElement('form');
      replyForm.setAttribute('method', 'post');
      replyForm.setAttribute('action', window.url);
      replyForm.setAttribute('id', `reply-form-${parentId}`);
      replyForm.innerHTML = `
        <div class="form-group">
          <textarea name="body" placeholder="Enter your reply"></textarea>
          <input type="hidden" name="parent_comment" value="${parentId}">
          <input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">
        </div>
        <button type="submit">Submit</button>
      `;

      replyForm.addEventListener('submit', (event) => {
        event.preventDefault();
        submitComment(event, true, parentId);
      });

      replyFormContainer.appendChild(replyForm);
      parentComment.appendChild(replyFormContainer);
    } else {
      console.log('There was already a reply form container');
    }
  }


  function submitComment(event, isReply = false, parentCommentId = null) {

    const commentForm = document.querySelector('#comment-form');
    const formData = new FormData(commentForm);

    // Add the CSRF token to the form data
    const csrfTokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
    formData.append('csrfmiddlewaretoken', csrfTokenInput.value);

    if (isReply) {
      formData.append('parent_comment', parentCommentId);
    }

    fetch(commentForm.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRFToken': csrfTokenInput.value
      }
    })
      .then(response => response.json())
      .then(data => {
        if (isReply) {
          // append the new reply to the parent comment
          const parentComment = document.querySelector(`[data-comment-id="${parentCommentId}"]`);
          const replyFormContainer = parentComment.querySelector(`[data-comment-id="${parentCommentId}-reply"]`);
          const newReply = `
            <div class="comment reply">
              <p class="info">
                Reply by ${data.comment.author}
                On date ${data.comment.created}
              </p>
              ${data.comment.body}
            </div>
          `;


          replyFormContainer.insertAdjacentHTML('beforebegin', newReply);
          replyFormContainer.remove();
        } else {
          // append the new comment to the comments container
          const newComment = `
            <div class="comment" data-comment-id="${data.comment.id}">
              <p class="info">
                Comment by ${data.comment.author}
                On date ${data.comment.created}
              </p>
              ${data.comment.body}
              <button type="button" class="reply-btn" data-parent-id="${data.comment.id}" data-comment-id="${data.comment.id}-reply">Reply</button>
            </div>
          `;
          commentsContainer.insertAdjacentHTML('beforeend', newComment);
        }
        // reset the comment/reply form
        if (isReply) {
          const replyForm = document.querySelector(`#reply-form-${parentCommentId}`);
          replyForm.reset();
        } else {
          commentForm.reset();
        }
      })
      .catch(error => {
        console.error(error);
        // handle any errors that occurred during the request
      });
  }

})