Discover Sellers (Shop Page)

The SellersPage serves as the centralized directory for users to discover, browse, and connect with merchants on Socon-MKT. The interface provides a streamlined, infinitely scrolling feed of seller profiles, allowing users to quickly read business bios and follow stores to customize their marketplace experience.

Component Architecture

The page is built using a clean, list-based architecture focused on performance and seamless user interaction.

1. SellersPage

The main layout wrapper component constrained to a maximum width of 800px to maintain readability.

  • Initialization: Forces the window to scroll to the top immediately upon mounting (window.scrollTo).
  • Loading States: Implements a full-page LoadingSkeleton for the initial fetch, and a smaller inline spinner for subsequent infinite scroll fetches.
  • Empty & Error States: Provides stylized fallback UI components (ErrorUi) if the network fails or if the platform currently has no registered sellers.

2. SellerItem

The individual row component representing a single merchant.

  • Visuals: Extracts and prioritizes the business_logo and business_title, falling back to the user's standard profile picture and username if specific business details are missing. Includes an absolute-positioned verification badge (✓) for trusted sellers.
  • Routing: Clicking the card routes the user to the specific seller's store view (/sellers/:id).
  • Action Button: Features an interactive Follow/Following toggle button that stops event propagation to prevent accidental navigation when clicked.

State Management & Optimistic UI

This page heavily leverages @tanstack/react-query to handle both the data ingestion and complex user interactions seamlessly.

  • Infinite Scrolling (useFetchSellers): Similar to the feed and marketplace, it uses a sentinel div monitored by react-intersection-observer. When the sentinel is in view, it extracts the c cursor parameter and triggers fetchNextPage().
  • Optimistic Follow Updates (useToggleFollow): To make the app feel instantaneously fast, the Follow button does not wait for the server to respond.
  • When clicked, the mutation cancels any outgoing seller fetches.
  • It immediately alters the React Query cache, flipping the is_following boolean for that specific seller.
  • If the backend API call fails, it rolls the cache back to its previous state to prevent data desynchronization.

API Endpoints & Data Structures

The Discover Sellers page interacts with two primary API endpoints via the globally configured Axios authApi instance.

1. Fetch Sellers List (Infinite)

Retrieves the paginated list of all active marketplace sellers.

  • 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": {
        "user": {
          "id": "string",
          "username": "string",
          "email": "string"
        },
        "profile_id": "string",
        "profile_pic": "string | null",
        "created_at": "ISO 8601 string",
        "full_name": "string"
      },
      "business_title": "string",
      "is_verified": true,
      "is_activated": true,
      "created_at": "ISO 8601 string",
      "is_following": false,
      "business_logo": "string | null",
      "payment": "string | null",
      "delivery": ["string"],
      "about": "string | null",
      "terms": "string | null",
      "location": "string | null"
    }
  ]
}

2. Toggle Follow Status

Sends a mutation to follow or unfollow a specific seller's profile.

  • Endpoint: POST /users/follow/
  • Payload: 
    {
  "following": "profile_id_string"
}
  • Authorization: Required (Bearer Token)