Appearance

useNotificationApi Composable ​

File Information ​

  • Path: app/composables/api/useNotificationApi.ts
  • Purpose: Notification and announcement API operations
  • Category: API Composable

Overview ​

The useNotificationApi composable provides API operations for managing notifications and announcements in the Brand Portal. This includes fetching announcements, marking them as read, and managing notification states.

Functions ​

markAllAnnouncementsAsRead ​

Marks all announcements as read for the current user.

Signature:

typescript
markAllAnnouncementsAsRead(): Promise<any>

Returns:

  • Promise<any> - Response data

Usage:

typescript
const { markAllAnnouncementsAsRead } = useNotificationApi()

await markAllAnnouncementsAsRead()

API Endpoint: POST /digital/announcement/mark-all-read

readUnreadAnnouncement ​

Marks a specific unread announcement as read.

Signature:

typescript
readUnreadAnnouncement(notificationId: number): Promise<ReadAnnouncementResponse>

Parameters:

  • notificationId: number - Announcement/notification ID to mark as read

Returns:

  • Promise<ReadAnnouncementResponse> - Response with updated announcement data

Response Type:

typescript
interface ReadAnnouncementResponse {
  // Updated announcement data
}

Usage:

typescript
const { readUnreadAnnouncement } = useNotificationApi()

const response = await readUnreadAnnouncement(123)

API Endpoint: POST /digital/announcement/read-unread

Request Body:

typescript
{
  notification_id: number
}

getAnnouncements ​

Fetches announcements list with pagination.

Signature:

typescript
getAnnouncements(page?: number): Promise<AnnouncementListResponse>

Parameters:

  • page?: number - Page number (default: 1)

Returns:

  • Promise<AnnouncementListResponse> - Announcements list with pagination

Response Type:

typescript
interface AnnouncementListResponse {
  data: Announcement[]
  current_page: number
  total: number
  per_page: number
  // ... pagination metadata
}

interface Announcement {
  id: number
  title: string
  message: string
  type: string
  is_read: boolean
  created_at: string
  // ... other fields
}

Usage:

typescript
const { getAnnouncements } = useNotificationApi()

// Get first page
const announcements = await getAnnouncements()

// Get specific page
const page2 = await getAnnouncements(2)

API Endpoint: GET /digital/announcement/notification-list?page={page}

Complete Usage Example ​

typescript
const { 
  getAnnouncements,
  readUnreadAnnouncement,
  markAllAnnouncementsAsRead 
} = useNotificationApi()

// Fetch announcements
const announcements = await getAnnouncements(1)

// Mark specific announcement as read
if (announcements.data.length > 0) {
  await readUnreadAnnouncement(announcements.data[0].id)
}

// Mark all as read
await markAllAnnouncementsAsRead()

Error Handling ​

All functions include error handling with logging:

typescript
catch (error: any) {
  console.error('[NotificationAPI] getAnnouncements - Error:', error)
  throw error
}

Integration with Notification Component ​

typescript
const { getAnnouncements, readUnreadAnnouncement } = useNotificationApi()

// In notification component
const loadAnnouncements = async () => {
  const response = await getAnnouncements()
  notifications.value = response.data
  unreadCount.value = response.data.filter(n => !n.is_read).length
}

const markAsRead = async (id: number) => {
  await readUnreadAnnouncement(id)
  // Update local state
  const notification = notifications.value.find(n => n.id === id)
  if (notification) {
    notification.is_read = true
  }
}

Use Cases ​

Notification Badge ​

typescript
const { getAnnouncements } = useNotificationApi()

const unreadCount = computed(() => {
  return announcements.value.filter(a => !a.is_read).length
})

// Fetch and update
const refreshAnnouncements = async () => {
  const response = await getAnnouncements()
  announcements.value = response.data
}

Mark All Read Action ​

typescript
const { markAllAnnouncementsAsRead } = useNotificationApi()

const handleMarkAllRead = async () => {
  await markAllAnnouncementsAsRead()
  // Update all announcements to read
  announcements.value.forEach(a => a.is_read = true)
  snackbar.showSuccess('All announcements marked as read')
}

Announcement List Page ​

typescript
const { getAnnouncements, readUnreadAnnouncement } = useNotificationApi()

const page = ref(1)
const announcements = ref([])

const loadPage = async () => {
  const response = await getAnnouncements(page.value)
  announcements.value = response.data
}

const handleRead = async (id: number) => {
  await readUnreadAnnouncement(id)
  await loadPage() // Reload to get updated state
}