Post Page (Social Detail)

The PostPage is the detailed view for a standard social post. It focuses primarily on community engagement, displaying the original post body alongside a deeply nested, infinitely scrolling comment thread.

The layout is constrained to a 680px maximum width, mirroring the Main Feed's central column to maintain visual consistency.

Component Architecture

The interface handles complex, recursive data structures to render the conversation accurately.

1. PostPage (Main Wrapper)

  • Post Body: Reuses the PostComponentItems component from the Main Feed, passing a hideAction=true prop to disable redundant navigation buttons.
  • Top-Level Comment Input: Provides a sticky or embedded text input for users to reply directly to the main post. It utilizes a toast notification system (showToast) to provide immediate success/error feedback upon submission.

2. CommentItem & SingleComment (Recursive Tree)

Because comments can have replies, and those replies can have replies, the UI uses a recursive component pattern.

  • CommentItem: The master container. It maps over the top-level comments and passes them to SingleComment with an initial depth=0.
  • SingleComment: Renders the individual comment data.
  • Indentation: Dynamically applies left margins based on its depth prop to visually represent the conversation thread.
  • Depth Limiting: To prevent the UI from becoming unreadable on mobile devices, the "Reply" button is hidden if depth >= 2.
  • Inline Replies: Toggling "Reply" opens an inline text input specifically tied to that comment's ID as the parent.
  • Recursion: If a comment contains a children array, it maps over them and calls <SingleComment /> inside itself, incrementing the depth by 1.

State Management & Deep Optimistic Updates

Managing server state for deeply nested trees requires complex cache manipulation using @tanstack/react-query.

  • Optimistic Nested Likes (useToggleCommentLike): When a user likes a comment, the mutation intercepts the cache. Because the target comment could be hidden three levels deep, the code executes a recursive map function over the oldData.pages, drilling down through c1.children -> c2.children -> c3.children to find the exact ID, flip its liked boolean, increment/decrement the likes integer, and update the UI instantly.
  • Cache Injection (useCreateComment):
  • Scenario 1 (Top-Level): If a user replies to the post, the new comment is injected into newPages[0].results at the very top.
  • Scenario 2 (Nested Reply): If a user replies to another comment, a custom recursive function (addCommentToTree) scans every page and every child array to find the parent ID, injecting the new reply directly into the parent's children array so it appears immediately without a page refresh.

API Endpoints & Data Structures

The social post detail view interacts with the backend via the authApi Axios instance.

1. Fetch Comments (Infinite)

Retrieves the paginated list of top-level comments. Nested replies are included within the children array of each top-level comment.

  • Endpoint: GET /posts/comments/
  • Query Parameters:
  • postId: The ID of the target post.
  • c: Cursor string for pagination.
  • Authorization: Required (Bearer Token)
  • Response Structure (CommentItemReponseType): 
    {
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "comment_id": "string",
      "post": "string",
      "text": "string",
      "created_at": "ISO 8601 string",
      "likes": 12,
      "liked": true,
      "author": { /* AuthorType */ },
      "children": [
        {
           // Recursive CommentItemType
           "comment_id": "string_child",
           "children": []
        }
      ]
    }
  ]
}

2. Create Comment (Top-Level or Reply)

Posts a new comment.

  • Endpoint: POST /posts/comments/
  • Payload (PostCommentRequestType): 
    {
  "post": "post_id_string",
  "text": "string",
  "parent": "comment_id_string | null" // Null for top-level, ID for replies
}
  • Authorization: Required (Bearer Token)

3. Toggle Comment Like

Optimistically toggles the like status of a specific comment.

  • Endpoint: POST /posts/comments/:commentId/toggle_comment_like/
  • Authorization: Required (Bearer Token)