Code Review

[QuantumDev-oss]

/**

• @author QuantumDev-oss
• @timestamp 2024-08-13T17:05:33Z
• @issue #342 Comment tap behavior inconsistency */

After further consideration, I believe we can make some additional improvements to our comment handling implementation. While the current solution is solid, here are some suggestions to enhance functionality, performance, and user experience:

1. Implement event delegation: Instead of attaching event listeners to each comment, we could use event delegation on the parent container. This would improve performance, especially for threads with many comments.

   
   document.querySelector('.comments-container').addEventListener('click', (event) => {
    if (event.target.matches('.comment-body')) {
      handleCommentTap(event.target.dataset.commentId);
    } else if (event.target.matches('.comment-author')) {
      handleAuthorTap(event.target.dataset.userId);
    }
   });
   2.  Add touch events for mobile:
   To improve mobile responsiveness, we should consider adding touch events alongside click events.

function addTapListener(element, callback) { element.addEventListener('click', callback); element.addEventListener('touchend', (e) => { e.preventDefault(); callback(e); }); }

3. Implement lazy loading: For long comment threads, we could implement lazy loading to improve initial load times and performance.

function loadComments(startIndex, count) { // Fetch and render comments from startIndex to startIndex + count }

// Use Intersection Observer API for infinite scrolling const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { loadComments(currentIndex, 20); } });

4. Add state management: To keep track of expanded comments across re-renders or page refreshes, we could implement a simple state management solution.

const expandedComments = new Set();

function handleCommentTap(commentId) { if (expandedComments.has(commentId)) { expandedComments.delete(commentId); } else { expandedComments.add(commentId); } updateCommentView(commentId); }

5. Enhance accessibility: We should add ARIA attributes and keyboard navigation to make our comment system more accessible.

<div role="button" tabindex="0" aria-expanded={isExpanded} onKeyPress={(e) => e.key === 'Enter' && handleCommentTap(commentId)} onClick={() => handleCommentTap(commentId)}

{/ Comment content /}

[kaokien]

Hey sorry to necrobump can either of you confirm if this issue, was occurring on iPadOS running safari? I experienced an issue identical to this and looking for confirmation.

[Sandeepkun]

Hey @kaokien I replied to your separate thread, thanks @QuantumDev-oss I'll look into including this.