N
Novu•11mo ago
ninadk

Hide action buttons after click

Is there a way to hide the action buttons below a notification after one of them is clicked? For example, when making a request, I want to hide the buttons after the receiver of the notification clicks "Accept" to accept it. Here's the related code so far: 
    const hanlderOnActionClick = async (temp: string, btnType: string, notification: IMessage) => {
      if (temp === 'join-neighborhood' && btnType === 'primary') {
        const { userId, neighborhoodId } = notification.payload;
        try {
          const res = await neighborhoodServices.connectUserToNeighborhood(
            Number(userId),
            Number(neighborhoodId),
          );
          if ('success' in res) notification.content = res.success;
        } catch (error) {
          console.log(error);
        }
      }
    };

    return (
      <NovuProvider
        initialFetchingStrategy={{ fetchNotifications: true }}
        subscriberHash={user?.hashedSubscriberId}
        subscriberId={String(user?.id)}
        applicationIdentifier={'my app identifier'}>
        <PopoverNotificationCenter
          colorScheme={'light'}
          onNotificationClick={handlerOnNotificationClick}
          onActionClick={hanlderOnActionClick}>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider>
    );
    const hanlderOnActionClick = async (temp: string, btnType: string, notification: IMessage) => {
      if (temp === 'join-neighborhood' && btnType === 'primary') {
        const { userId, neighborhoodId } = notification.payload;
        try {
          const res = await neighborhoodServices.connectUserToNeighborhood(
            Number(userId),
            Number(neighborhoodId),
          );
          if ('success' in res) notification.content = res.success;
        } catch (error) {
          console.log(error);
        }
      }
    };

    return (
      <NovuProvider
        initialFetchingStrategy={{ fetchNotifications: true }}
        subscriberHash={user?.hashedSubscriberId}
        subscriberId={String(user?.id)}
        applicationIdentifier={'my app identifier'}>
        <PopoverNotificationCenter
          colorScheme={'light'}
          onNotificationClick={handlerOnNotificationClick}
          onActionClick={hanlderOnActionClick}>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider>
    );
I tried using useNotifications to update the status of the notification to see if that'd do it, but the hook returns null for some reason, even though I've set fetchNotifications to true. Thanks in advance!
6 Replies
empe
empe•11mo ago
Pawan Jain
Pawan Jain•11mo ago
Thanks Emil @ninadk let us know if it is not working for you
ninadk
ninadkOP•11mo ago
Thank you for your response! I added the code as suggested to mark the action as done after a click, but it still seemed to only remove the buttons when I marked the notifications as read. I opted to mark the notification as read programmatically after the action button is clicked, and bumped into this error: No QueryClient set, use QueryClientProvider to set one. After wrapping the application with QueryClientProvider it doesn't seem to go away. Any ideas? 
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
const queryClient = new QueryClient();
root.render(
  <UserContextProvider>
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </React.StrictMode>
  </UserContextProvider>,
);
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
const queryClient = new QueryClient();
root.render(
  <UserContextProvider>
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </React.StrictMode>
  </UserContextProvider>,
);
  const Notification = () => {
    const handleOnActionClick = async (temp: string, btnType: string, notification: IMessage) => {
      if (temp === 'join-neighborhood' && btnType === 'primary') {
        const {userId, neighborhoodId} = notification.payload;
        try {
          await neighborhoodServices.connectUserToNeighborhood(+userId,+neighborhoodId);
        } catch (e) {
          console.log(e);
        } finally {
          markNotificationsAs({ messageId: notification._id, read: true, seen: true });
          await notificationServices.updateAction(notification._id, btnType, MessageActionStatusEnum.DONE);
        }
      }
    };
    return (
      <NovuProvider
        initialFetchingStrategy={{ fetchNotifications: true }}
        subscriberHash={user?.hashedSubscriberId} subscriberId={String(user?.id)} applicationIdentifier={'my app id'}>
        <PopoverNotificationCenter
          colorScheme={'light'}
          onNotificationClick={handleOnNotificationClick}
          onActionClick={handleOnActionClick}>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider>
    );
  };
  const Notification = () => {
    const handleOnActionClick = async (temp: string, btnType: string, notification: IMessage) => {
      if (temp === 'join-neighborhood' && btnType === 'primary') {
        const {userId, neighborhoodId} = notification.payload;
        try {
          await neighborhoodServices.connectUserToNeighborhood(+userId,+neighborhoodId);
        } catch (e) {
          console.log(e);
        } finally {
          markNotificationsAs({ messageId: notification._id, read: true, seen: true });
          await notificationServices.updateAction(notification._id, btnType, MessageActionStatusEnum.DONE);
        }
      }
    };
    return (
      <NovuProvider
        initialFetchingStrategy={{ fetchNotifications: true }}
        subscriberHash={user?.hashedSubscriberId} subscriberId={String(user?.id)} applicationIdentifier={'my app id'}>
        <PopoverNotificationCenter
          colorScheme={'light'}
          onNotificationClick={handleOnNotificationClick}
          onActionClick={handleOnActionClick}>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider>
    );
  };
Pawan Jain
Pawan Jain•11mo ago
@ninadk Apologies for inconvenience We need to update the docs with latest code example correct sample code is this 
import {
  NovuProvider,
  PopoverNotificationCenter,
  IMessage,
  MessageActionStatusEnum,
  useUpdateAction,
  ButtonTypeEnum,
  NotificationBell,
} from "@novu/notification-center";

export default function Novu() {
  const CustomNotificationCenter = () => {
    const { updateAction } = useUpdateAction();

    const handleOnActionClick = async (
      temp: string,
      btnType: ButtonTypeEnum,
      notification: IMessage
    ) => {
      updateAction({
        messageId: notification._id,
        actionButtonType: btnType,
        status: MessageActionStatusEnum.DONE,
      });
    };
    return (
      <PopoverNotificationCenter
        colorScheme={'light'}
        onNotificationClick={handleOnNotificationClick}
        onActionClick={handleOnActionClick}>
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    );
  };
  return (
    <NovuProvider
      subscriberId={SUBSCRIBER_ID}
      applicationIdentifier={APPLICATION_IDENTIFIER}
    >
      <CustomNotificationCenter />
    </NovuProvider>
  );
}
import {
  NovuProvider,
  PopoverNotificationCenter,
  IMessage,
  MessageActionStatusEnum,
  useUpdateAction,
  ButtonTypeEnum,
  NotificationBell,
} from "@novu/notification-center";

export default function Novu() {
  const CustomNotificationCenter = () => {
    const { updateAction } = useUpdateAction();

    const handleOnActionClick = async (
      temp: string,
      btnType: ButtonTypeEnum,
      notification: IMessage
    ) => {
      updateAction({
        messageId: notification._id,
        actionButtonType: btnType,
        status: MessageActionStatusEnum.DONE,
      });
    };
    return (
      <PopoverNotificationCenter
        colorScheme={'light'}
        onNotificationClick={handleOnNotificationClick}
        onActionClick={handleOnActionClick}>
        {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
      </PopoverNotificationCenter>
    );
  };
  return (
    <NovuProvider
      subscriberId={SUBSCRIBER_ID}
      applicationIdentifier={APPLICATION_IDENTIFIER}
    >
      <CustomNotificationCenter />
    </NovuProvider>
  );
}
ninadk
ninadkOP•11mo ago
thank you, that worked! I also removed QueryClientProvider altogether, afterwords, it seems it's not necessary anymore.
Pawan Jain
Pawan Jain•11mo ago
Thanks for the update. I just updated this in docs. It will be live in few days
Want results from more Discord servers?
Add your server