Use app notifications

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

function NotificationBell() {
  const { unreadAppNotificationsCount } = useAppNotifications();

  return <span>{unreadAppNotificationsCount} unread</span>;
}

function NotificationList() {
  const {
    appNotifications,
    loading,
    hasMore,
    loadMore,
    markNotificationAsRead,
  } = useAppNotifications({
    limit: 20,
    notificationTemplates: {
      entityComment: { content: "$initiatorName commented on your post" },
      newFollow: { content: "$initiatorName followed you" },
    },
  });

  return (
    <ul>
      {appNotifications.map((n) => (
        <li key={n.id} onClick={() => markNotificationAsRead({ notificationId: n.id })}>
          {n.content ?? n.type}
        </li>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </ul>
  );
}