Main Feed (Posts & Products)¶

The FeedPage serves as the primary dashboard and landing interface for authenticated users on Socon-MKT. It features a continuous, infinitely scrolling feed that intelligently merges standard social media posts with e-commerce product listings.

The page is built using a responsive CSS Grid layout, splitting into a central content feed and a sticky right-rail for desktop users.

Component Architecture¶

The feed is highly modular, breaking down complex data rendering into specialized React components.

1. ComposerComponent¶

Located at the very top of the feed, this component acts as the entry point for content creation. It reads the authenticated user's profile data (ProfileResponseType) to display their avatar and offers two distinct routing actions:

Sell a product: Routes the user to the /upload marketplace flow.
Write a post: Routes the user to the standard /create-post social flow.

2. PostComponentItems¶

The core rendering engine for individual feed items. It dynamically adjusts its UI based on the is_product boolean flag within the data payload.

Media Grid Engine: Handles complex rendering for media arrays. It conditionally renders single images, video players, or multi-item grids (up to 4+ items with an overlay counter).
Product Badges: If is_product is true, it automatically injects a floating price tag, condition pills (e.g., "New", "Used"), and a "Seller" verification badge.
Interactions: Handles internal mutations for liking (usePostLike), saving (usePostSave), and sharing (usePostShare) via the Web Share API or clipboard fallback.

3. Seller Discovery Injections¶

To drive marketplace engagement, seller recommendations are seamlessly injected into the user's feed.

SellerCarousel: A horizontal, scrollable list of suggested sellers. Rather than sitting at the top of the feed, it calculates random index positions (carouselPositions) to organically inject itself between feed posts as the user scrolls.
SellersToFollowLg: A sticky right-rail component visible only on large screens. It utilizes the same cached seller query as the carousel, alongside a localized "Trending Nearby" subset of posts filtered strictly for media-rich content.

A full-screen, high-z-index overlay triggered when a user clicks on any post media. It supports infinite looping through media arrays and natively handles both <img /> and <video controls /> rendering based on the media_type.

State Management & Infinite Scrolling¶

The feed relies heavily on @tanstack/react-query to manage server state and caching, completely eliminating the need for global Redux stores for post data.

Intersection Observer: The react-intersection-observer package monitors a hidden sentinel <div> at the bottom of the feed list.
Cursor Pagination: When the sentinel enters the viewport, the useInfiniteFetchPosts hook triggers the fetchNextPage() function. The application extracts the c= (cursor) parameter from the backend's next URL string and passes it into the subsequent API call, seamlessly appending new PostType items to the flattened data array.

API Endpoints & Data Structures¶

The FeedPage interacts with three primary API endpoints via the globally configured Axios authApi instance. This instance automatically intercepts requests to attach the Bearer token and proactively refreshes expired sessions.

1. User Statistics¶

Fetches the current user's profile details and notification badges for the Composer UI.

Endpoint: GET /users/stat/
Authorization: Required (Bearer Token)

Response Structure (ProfileResponseType):

{
  "profile": {
    "user": {
      "id": "string",
      "username": "string",
      "email": "string"
    },
    "profile_id": "string",
    "profile_pic": "string | null",
    "created_at": "ISO 8601 string",
    "full_name": "string"
  },
  "total_notification": 0,
  "total_message": 0
}

2. Main Feed (Infinite Posts)¶

Retrieves the paginated list of social posts and product listings.

Endpoint: GET /posts/
Query Parameters: c (Cursor string for pagination)
Authorization: Required (Bearer Token)

Response Structure (PostResponseType):

{
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "id": "string",
      "author": { /* AuthorType */ },
      "caption": "string | null",
      "is_product": true,
      "title": "string | null",
      "price": "string | null",
      "category": ["string"],
      "quatity": 1,
      "location": "string | null",
      "listing_conditions_display": ["string"],
      "media": [
        {
          "id": "string",
          "file": "string_url",
          "media_type": "image | video",
          "thumbnail": "string_url | null"
        }
      ],
      "is_liked": false,
      "is_saved": false,
      "total_likes": 0,
      "total_comments": 0
    }
  ]
}

3. Suggested Sellers (Infinite List)¶

Retrieves a paginated list of verified marketplace sellers to populate the discovery carousels.

Endpoint: GET /users/sellers/
Query Parameters: c (Cursor string for pagination)
Authorization: Required (Bearer Token)

Response Structure (SellerListResponse):

{
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "id": "string",
      "profile": { /* BaseProfile */ },
      "business_title": "string",
      "is_verified": true,
      "business_logo": "string_url | null",
      "is_following": false
    }
  ]
}