Product Page¶

The ProductPage is the detailed view for a specific marketplace listing. It provides buyers with a comprehensive breakdown of the item, an interactive media gallery, and direct actions to either add the item to their cart or immediately initiate a purchase negotiation.

The interface is structured using a responsive CSS Grid with a maximum width of 1500px, splitting the layout into a sticky media gallery on the left and scrollable product details on the right for desktop users.

Component Architecture¶

The page aggregates several sub-components to organize the dense product data into digestible sections.

Main Viewer: Displays the currently selected image or video. Videos feature an absolute-positioned play button overlay and fall back to thumbnails when available.
Thumbnails: A horizontally scrollable list of all attached media. Clicking a thumbnail updates the mainMediaIndex state to swap the main viewer's content.
CarouselModal: Clicking the main image triggers a high-z-index, full-screen lightbox for immersive viewing.

2. Action Buttons¶

Buy Now: Triggers the useFetchChatId hook. This acts as the direct checkout flow by generating (or retrieving) a dedicated chat room with the seller for this specific product, instantly redirecting the user to /inbox/:chatId.
Add to Cart: Triggers the useCreateCart mutation. If the product is already in the cart (isInCart), the button dynamically changes its label and routes the user to the /cart page instead.

3. Tabbed Content Interface¶

To prevent vertical UI clutter, secondary information is organized into three toggleable tabs:

Details Tab: Displays the product specifications (category, location, quantity), listing rules (delivery/payment terms), and specific product conditions.
Comments Tab: Reuses the social comment thread component (CommentsTab).
Reviews Tab: Uses useFetchReview to display an infinitely scrolling list of verified buyer reviews, including their star ratings and feedback.

State Management & Cache Seeding¶

This page uses @tanstack/react-query to ensure instant load times by intelligently reusing existing data.

Initial Data Seeding: The useFetchPost hook is configured with an initialData function. Before making a network request, it scans the deeply nested ["posts"] infinite query cache (from the Main Feed or Marketplace). If it finds a matching product ID, it instantly paints the UI with that cached data while fetching fresh data in the background.
Infinite Reviews: The ReviewsTab uses react-intersection-observer to fetch the next cursor-based page of product reviews automatically when the user reaches the bottom of the tab.

API Endpoints & Data Structures¶

The product page interacts with the backend via several endpoints through the authApi Axios instance.

1. Fetch Product Details¶

Retrieves the complete data object for a specific product post.

Endpoint: GET /posts/post_retrieve/:postId
Authorization: Required (Bearer Token)
Response Structure (ExtendPostType): Returns the standard PostType combined with an is_cart boolean to indicate if the user already has this item staged.

2. Fetch Product Reviews (Infinite)¶

Retrieves the paginated list of reviews associated with this specific product.

Endpoint: GET /posts/review/
Query Parameters:
productId: The ID of the current product.
c: Cursor string for pagination.
Authorization: Required (Bearer Token)

Response Structure (PaginatedReviews):

{
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "review_id": "string",
      "product": "string",
      "text": "string",
      "created_at": "ISO 8601 string",
      "rating": 5,
      "author": {
        "id": "string",
        "username": "string",
        "email": "string",
        "profile": { /* ReviewUserProfile */ }
      }
    }
  ]
}

3. Action Endpoints¶

Buy Now (Chat): POST /chat/confirm_chat/
Add to Cart: POST /posts/cart/