Notifications Page

The NotificationsPage is the centralized activity feed for users on Socon-MKT. It tracks and displays all inbound interactions, including social engagements (likes, comments, follows) and marketplace activities (deal updates, reminders).

The layout is constrained to a narrow 620px maximum width, providing a highly readable, focused timeline experience similar to standard social networking platforms.

Component Architecture

The notification feed relies on client-side data transformation to categorize and prioritize new alerts for the user.

1. NotificationsPage (Main Wrapper)

This core component handles the fetching, sorting, and display logic of the activity feed.

  • Data Grouping (groupedNotifications): Uses a useMemo hook to iterate over the flattened infinite list of notifications and dynamically split them into two distinct arrays: unread and read.
  • Visual Hierarchy: The UI maps through these groups sequentially, rendering the "Unread" block at the top of the feed and the historical "Read" block directly beneath it, separated by distinct section headers.
  • Empty & Error States: Renders a stylized fallback UI ("You're all caught up!") if the user has no historical notifications.

2. NotificationItem

Renders the individual notification row based on the specific event type.

  • Event Types: Handles diverse notification triggers dictated by the NotificationType enum (DEAL, COMMENT, LIKE, FOLLOW, REMINDER).
  • Contextual Routing: Links the user to the relevant destination (e.g., routing to a specific post ID for a COMMENT, or a user profile for a FOLLOW).

State Management & Automated Actions

The page utilizes @tanstack/react-query for data ingestion and incorporates a silent background mutation to manage the read state without requiring explicit user interaction.

  • Silent Auto-Read Logic: The component utilizes a useEffect hook that monitors the allNotifications array. When new unread notifications are loaded into the DOM, the hook automatically extracts their IDs and fires the useReadNotifications mutation in the background. This ensures the global notification badge clears automatically just by viewing the page.
  • Infinite Scrolling: Uses the standard react-intersection-observer sentinel to extract the c (cursor) parameter and continually fetch older notifications as the user scrolls down.

API Endpoints & Data Structures

The notifications system interacts with the backend via two primary endpoints through the authApi Axios instance.

1. Fetch Notifications (Infinite)

Retrieves the paginated list of all notifications targeted at the current user.

  • Endpoint: GET /notification/
  • Query Parameters: c (Cursor string for pagination)
  • Authorization: Required (Bearer Token)
  • Response Structure (NotificationListResponse): 
    {
  "next": "url_string | null",
  "previous": "url_string | null",
  "results": [
    {
      "id": "string",
      "content": "string",
      "notified_at": "ISO 8601 string",
      "to_user": "string",
      "type": "DEAL | COMMENT | LIKE | FOLLOW | REMINDER",
      "post": "string | null",
      "is_read": false,
      "from_user": {
        "id": "string",
        "username": "string",
        "email": "string",
        "profile": {
          "profile_id": "string",
          "profile_pic": "string | null",
          "created_at": "ISO 8601 string",
          "full_name": "string",
          "seller_profile": {
            "id": "string",
            "business_title": "string",
            "category": ["string"],
            "is_verified": true,
            "business_logo": "string | null"
          }
        }
      }
    }
  ]
}

2. Mark Notifications as Read

Sends a batch array of notification IDs to the server to update their is_read boolean status to true.

  • Endpoint: POST /notification/mark_all_read/
  • Payload (ReadType): 
    {
  "readId": ["notification_id_1", "notification_id_2"]
}
  • Authorization: Required (Bearer Token)