Novu•6mo ago

Query: Deleting an Item from Notification List Using Provided Controls

I have another query! How can we delete an item from the notification list using the controls provided with each item? A code snippet from the team would be highly appreciated.

20 Replies

Ask Inkeep•6mo ago

Hi @Bismay Purkayastha, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * How to use Headless Notification Center * API Reference * No-Code tools to manage your notifications * Delete workflow group ----------------------------- Answer Thank you for your question about deleting an item from the notification list using the provided controls in Novu. I'll do my best to answer based on the information available in the documentation. Novu provides a way to delete notifications using the useRemoveNotification hook in the React notification center package (1) . This hook allows you to remove a specific notification from the list. Here's how you can use it:

const onSuccess = (data: IMessage) => {};
const onError = (error: Error) => {};
const { removeNotification, isLoading, isError, error } = useRemoveNotification(
{
onSuccess,
onError,
}
);

const onSuccess = (data: IMessage) => {};
const onError = (error: Error) => {};
const { removeNotification, isLoading, isError, error } = useRemoveNotification(
{
onSuccess,
onError,
}
);

To actually delete a notification, you would call the removeNotification function with the message ID of the notification you want to delete. Here's an example of how you might use this in a component:

const handleDeleteNotification = (messageId) => {
  removeNotification({ messageId });
};

const handleDeleteNotification = (messageId) => {
  removeNotification({ messageId });
};

You could then attach this function to a delete button or any other control provided with each notification item. It's worth noting that there's also a useRemoveAllNotifications hook available if you need to delete all notifications at once :

const onSuccess = (data: IMessage) => {};
const onError = (error: Error) => {};
const { removeAllNotifications, isLoading, isError, error } =
useRemoveAllNotifications({
onSuccess,
onError,
});

const onSuccess = (data: IMessage) => {};
const onError = (error: Error) => {};
const { removeAllNotifications, isLoading, isError, error } =
useRemoveAllNotifications({
onSuccess,
onError,
});

If you're using the headless API, you can also delete a notification using the following API call (2) :

url: "https://api.novu.co/v1/messages/${id}",
method: 'DELETE',
headers: {
  "Authorization": "ApiKey ${NOVU_API_KEY}",
  "Content-Type" : "application/json"
}

url: "https://api.novu.co/v1/messages/${id}",
method: 'DELETE',
headers: {
  "Authorization": "ApiKey ${NOVU_API_KEY}",
  "Content-Type" : "application/json"
}

Ask Inkeep•6mo ago

Remember to replace ${id} with the actual ID of the notification you want to delete, and ${NOVU_API_KEY} with your Novu API key. It's important to note that after deleting a notification, you might need to refetch the notifications list to update the UI. The exact method for this would depend on how you're managing state in your application. I hope this helps! Let me know if you need any clarification or have any other questions.

Sources [1] API Reference [2] Delete notification after action button click

Ask Inkeep•6mo ago

Feel free to tag @Ask Inkeep with additional questions.

Bismay PurkayasthaOP•6mo ago

return (
    <NovuProvider
      subscriberId={subscriberId}
      applicationIdentifier={applicationIdentifier}
    >
      <PopoverNotificationCenter
        colorScheme={theme}
        onNotificationClick={handleNotificationClick}
      >
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    </NovuProvider>
  );

return (
    <NovuProvider
      subscriberId={subscriberId}
      applicationIdentifier={applicationIdentifier}
    >
      <PopoverNotificationCenter
        colorScheme={theme}
        onNotificationClick={handleNotificationClick}
      >
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    </NovuProvider>
  );

@Ask Inkeep I have this Notification component How do I incorporate

handleDeleteNotification

handleDeleteNotification

within this code ?

Ask Inkeep•6mo ago

Thanks for the follow-up, @Bismay Purkayastha. I'll get back to you soon. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Customizing Notification Center * API Reference * How to use Headless Notification Center * React Get Started ----------------------------- Answer Thank you for providing your current Notification component code. To incorporate the handleDeleteNotification function within this component, we need to make a few modifications. Here's how you can do it: 1. First, we need to use the useRemoveNotification hook from Novu. (1) 2. Then, we'll create the handleDeleteNotification function using this hook. 3. Finally, we'll pass this function to the PopoverNotificationCenter component using the listItem prop. (2) (3) Here's how your modified component could look:

import { NovuProvider, PopoverNotificationCenter, NotificationBell, useRemoveNotification } from "@novu/notification-center";

function NotificationComponent() {
  const { removeNotification } = useRemoveNotification();

  const handleDeleteNotification = (messageId) => {
    removeNotification({ messageId });
  };

  const handleNotificationClick = (notification) => {
    // Your existing click handler logic
  };

  return (
    <NovuProvider
      subscriberId={subscriberId}
      applicationIdentifier={applicationIdentifier}
    >
      <PopoverNotificationCenter
        colorScheme={theme}
        onNotificationClick={handleNotificationClick}
        listItem={(notification, handleActionButtonClick, handleNotificationClick) => {
          return (
            <div>
              {notification.content}
              <button onClick={() => handleDeleteNotification(notification._id)}>Delete</button>
            </div>
          );
        }}
      >
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    </NovuProvider>
  );
}

import { NovuProvider, PopoverNotificationCenter, NotificationBell, useRemoveNotification } from "@novu/notification-center";

function NotificationComponent() {
  const { removeNotification } = useRemoveNotification();

  const handleDeleteNotification = (messageId) => {
    removeNotification({ messageId });
  };

  const handleNotificationClick = (notification) => {
    // Your existing click handler logic
  };

  return (
    <NovuProvider
      subscriberId={subscriberId}
      applicationIdentifier={applicationIdentifier}
    >
      <PopoverNotificationCenter
        colorScheme={theme}
        onNotificationClick={handleNotificationClick}
        listItem={(notification, handleActionButtonClick, handleNotificationClick) => {
          return (
            <div>
              {notification.content}
              <button onClick={() => handleDeleteNotification(notification._id)}>Delete</button>
            </div>
          );
        }}
      >
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    </NovuProvider>
  );
}

Ask Inkeep•6mo ago

(2) (3) (1) In this modified version: 1. We import the useRemoveNotification hook from "@novu/notification-center". (1) 2. We use the useRemoveNotification hook to get the removeNotification function. 3. We define the handleDeleteNotification function that calls removeNotification with the message ID. 4. We add a listItem prop to the PopoverNotificationCenter component. This prop allows us to customize how each notification item is rendered. (2) (3) 5. In the listItem function, we render the notification content and add a delete button that calls handleDeleteNotification with the notification's ID when clicked. Please note that this is a basic implementation. You might want to add confirmation dialogs, loading states, or error handling depending on your specific requirements. Also, make sure to replace subscriberId and applicationIdentifier with your actual values. Remember that after deleting a notification, you might need to refetch the notifications list to update the UI. The exact method for this would depend on how you're managing state in your application.

Sources [1, 3] API Reference [2] Customizing Notification Center

Ask Inkeep•6mo ago

Feel free to tag @Ask Inkeep with additional questions.

Pawan Jain•6mo ago

@Bismay Purkayastha If you are looking to deleting the notification via custom action then you can use useRemoveNotification https://docs.novu.co/inbox/react/api-reference#useremovenotification

Bismay PurkayasthaOP•6mo ago

@Pawan Jain I was wondering how to achieve the same using these dropdown controls

Pawan Jain•6mo ago

@Bismay Purkayastha , you can click on remove message option to remove the message

Bismay PurkayasthaOP•6mo ago

It's not working. I was wondering if I have to implement a custom handler function to make it functional?

Novu_Bot•6mo ago

@Bismay Purkayastha, you just advanced to level 1!

Pawan Jain•6mo ago

No, it should work. Can you share the screen recording? I feel you have many messages with same content. it can be reason you don't see a message got deleted

Bismay PurkayasthaOP•6mo ago

The first notification item is different. Inspite of trying to delete it from the list it appears again when the notification popover is opened the next time. @Pawan Jain tagging this message for reference.

Pawan Jain•6mo ago

@Bismay Purkayastha I see it is working for me 🙂

Pawan Jain•6mo ago

Bismay PurkayasthaOP•6mo ago

Can you please send me this codesandbox link? May be I am missing something!

Pawan Jain•6mo ago

https://codesandbox.io/s/kind-nova-xv6s9g?fontsize=14&hidenavigation=1&theme=dark

Bismay PurkayasthaOP•6mo ago

@Pawan Jain Sorry for the last response. I was occupied with some other works for past few days. I have gone through the code that you had shared. It seems I am doing exactly the same thing. Even on apply all the customization to the codesandbox notification it is working as desired. I am not sure what I am missing here - I would really appreciate it if you could help me figure it out.

Gaming

Programming

Query: Deleting an Item from Notification List Using Provided Controls