Notification Templates

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

const templates = {
  entityComment: {
    title: "New comment",
    content: "$initiatorName commented on your post",
  },
  commentReply: {
    title: "New reply",
    content: "$initiatorName replied to your comment",
  },
  newFollow: {
    title: "New follower",
    content: "$initiatorName started following you",
  },
  connectionRequest: {
    title: "Connection request",
    content: "$initiatorName wants to connect",
  },
};

function NotificationFeed() {
  const { appNotifications } = useAppNotifications({ notificationTemplates: templates });

  return (
    <ul>
      {appNotifications.map((n) => (
        <li key={n.id}>
          <strong>{n.title}</strong>
          <p>{n.content}</p>
        </li>
      ))}
    </ul>
  );
}

const templates = {
  entityReaction: {
    title: ({ initiatorName, reactionType }) => {
      const reactionLabel =
        reactionType === "upvote" ? "me gusta" :
        reactionType === "heart"  ? "corazón"  : reactionType;
      return `${initiatorName} reaccionó con ${reactionLabel} a tu publicación`;
    },
  },
  commentReaction: {
    // Mix string and function in the same template
    title: ({ initiatorName, reactionType }) => {
      const reactionLabel =
        reactionType === "upvote" ? "me gusta" :
        reactionType === "heart"  ? "corazón"  : reactionType;
      return `${initiatorName} reaccionó con ${reactionLabel} a tu comentario`;
    },
    content: "$commentContent",
  },
};