Skip to content

Mark All Notifications as Read (Admin)

Mark all notifications for the authenticated admin as read.

Endpoint

POST /v1/chat/admin/notifications/read-all/

Authentication

Required: Admin authentication token

Authorization: Token <admin_token>

Request

Headers

Authorization: Token <admin_token>

No request body required.

Response

Success (200 OK)

{
  "success": true,
  "message": "All notifications marked as read"
}

Error (401 Unauthorized)

{
  "success": false,
  "message": "Unauthorized"
}

Error (403 Forbidden)

{
  "success": false,
  "message": "Access denied. Admin role required."
}

Example Usage

JavaScript/Fetch

async function markAllNotificationsRead() {
  const response = await fetch('/v1/chat/admin/notifications/read-all/', {
    method: 'POST',
    headers: {
      'Authorization': `Token ${adminToken}`
    }
  });

  const data = await response.json();

  if (data.success) {
    console.log('All notifications marked as read');
    // Update UI - set badge to 0
    updateNotificationBadge(0);
  }
}

Axios

import axios from 'axios';

const markAllNotificationsRead = async () => {
  try {
    await axios.post('/v1/chat/admin/notifications/read-all/', 
      {},
      {
        headers: {
          'Authorization': `Token ${adminToken}`
        }
      }
    );

    console.log('All notifications marked as read');
  } catch (error) {
    console.error('Failed to mark all notifications as read:', error);
  }
};

cURL

curl -X POST "http://localhost:8000/v1/chat/admin/notifications/read-all/" \
  -H "Authorization: Token your_admin_token_here"

Usage in UI

React Component

import { useState } from 'react';
import axios from 'axios';

function NotificationsPage() {
  const [notifications, setNotifications] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);

  const handleMarkAllRead = async () => {
    try {
      await axios.post('/v1/chat/admin/notifications/read-all/', 
        {},
        { headers: { 'Authorization': `Token ${adminToken}` } }
      );

      // Update all notifications to read
      setNotifications(prev => 
        prev.map(n => ({ ...n, is_read: true }))
      );

      // Reset unread count
      setUnreadCount(0);

      console.log('All notifications marked as read');
    } catch (error) {
      console.error('Failed to mark all as read:', error);
    }
  };

  return (
    <div className="notifications-page">
      <div className="header">
        <h2>Notifications</h2>
        {unreadCount > 0 && (
          <button onClick={handleMarkAllRead} className="mark-all-read-btn">
            Mark All as Read
          </button>
        )}
      </div>

      <div className="notifications-list">
        {notifications.map(notification => (
          <NotificationItem key={notification.id} notification={notification} />
        ))}
      </div>
    </div>
  );
}

With Confirmation Dialog

async function markAllNotificationsReadWithConfirm() {
  const confirmed = confirm('Mark all notifications as read?');

  if (confirmed) {
    try {
      await axios.post('/v1/chat/admin/notifications/read-all/', 
        {},
        { headers: { 'Authorization': `Token ${adminToken}` } }
      );

      // Update UI
      setUnreadCount(0);
      setNotifications(prev => 
        prev.map(n => ({ ...n, is_read: true }))
      );

      showToast('All notifications marked as read');
    } catch (error) {
      console.error('Failed:', error);
      showToast('Failed to mark notifications as read', 'error');
    }
  }
}

Notes

  • This endpoint marks all notifications for the authenticated admin as read
  • All notifications with admin_id matching the authenticated admin and is_read=false will be updated
  • The notifications remain in the database but won't count towards unread count
  • This is more efficient than calling Mark Notification Read for each notification
  • After calling this endpoint, the notification count will be 0

Use Cases

1. "Mark All as Read" Button

Place a button on the notifications page that clears all unread notifications at once.

<button onClick={markAllNotificationsRead}>
  Mark All as Read
</button>

2. Context Menu Action

Provide a context menu option in the notifications dropdown:

<ContextMenu>
  <MenuItem onClick={markAllNotificationsRead}>
    Mark All as Read
  </MenuItem>
</ContextMenu>

3. Keyboard Shortcut

Implement a keyboard shortcut (e.g., Shift+R):

useEffect(() => {
  const handleKeyPress = (e) => {
    if (e.shiftKey && e.key === 'R') {
      markAllNotificationsRead();
    }
  };

  window.addEventListener('keydown', handleKeyPress);
  return () => window.removeEventListener('keydown', handleKeyPress);
}, []);

Performance Benefits

  • Single database query instead of multiple queries
  • Faster response for bulk operations
  • Reduced network traffic compared to marking individually
  • Atomic operation - all notifications marked at once

When to Use

Use this endpoint when: - User clicks "Mark All as Read" button - User wants to clear all notifications at once - You have many notifications to mark as read

Use Mark Notification Read instead when: - User clicks on a specific notification - You want to mark individual notifications as read - You need fine-grained control

UI Feedback

Optimistic Update

async function markAllNotificationsReadOptimistic() {
  // Update UI immediately
  setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
  setUnreadCount(0);

  // Call API
  try {
    await axios.post('/v1/chat/admin/notifications/read-all/', 
      {},
      { headers: { 'Authorization': `Token ${adminToken}` } }
    );
  } catch (error) {
    // Rollback on error
    console.error('Failed, rolling back:', error);
    fetchNotifications(); // Reload from server
  }
}

With Loading State

const [isMarkingAllRead, setIsMarkingAllRead] = useState(false);

async function markAllNotificationsReadWithLoading() {
  setIsMarkingAllRead(true);

  try {
    await axios.post('/v1/chat/admin/notifications/read-all/', 
      {},
      { headers: { 'Authorization': `Token ${adminToken}` } }
    );

    setNotifications(prev => prev.map(n => ({ ...n, is_read: true })));
    setUnreadCount(0);
  } catch (error) {
    console.error('Failed:', error);
  } finally {
    setIsMarkingAllRead(false);
  }
}

// In JSX
<button onClick={markAllNotificationsReadWithLoading} disabled={isMarkingAllRead}>
  {isMarkingAllRead ? 'Marking...' : 'Mark All as Read'}
</button>