Notifications Hook

import { useAppNotifications } from "@sublay/react-js";

function NotificationFeed() {
  const {
    appNotifications,
    unreadAppNotificationsCount,
    loading,
    hasMore,
    loadMore,
    markNotificationAsRead,
    markAllNotificationsAsRead,
  } = useAppNotifications({ limit: 20 });

  return (
    <div>
      <p>{unreadAppNotificationsCount} unread</p>
      <button onClick={markAllNotificationsAsRead}>Mark all as read</button>
      {appNotifications.map((n) => (
        <div
          key={n.id}
          style={{ fontWeight: n.isRead ? "normal" : "bold" }}
          onClick={() => markNotificationAsRead({ notificationId: n.id })}
        >
          {n.title ?? n.type}
        </div>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </div>
  );
}