Add Mark All as Read button as a prop

[bsakethreddy]

Able to access the button Mark All as Read from prop gives a chance to control data.
The Problem : Updating data using useState in React causing the entire component to re-render. If we can get the controll over Mark All as Read Button, we can delete data accordingly using localStorage.

[atapas]

We will be adding an ability to provide a function as a prop for the "Mark as Read" button handler. The default behavior of the button will be as it is today. However, the behavior can be completely overridden based on the use-cases by passing a function as a prop.

@bsakethreddy, You can observe the Linked pull request with this issue. Just FYI..

[bsakethreddy]

Hi, Great, thank you. Thanks for creating this package. React-notification-timeline is what exactly I am looking for. I will be happy to contribute to the package in the future. I felt there is a need for documentation on how to handle the data which we are giving to Notify. My Situation: I am giving real time data to Notify, But whenever state gets updated the entire component gets re-rendered. This is causing the state to re-initialise again and loosing all the data. So, what I planned is to store the data in localstorage and when the user clicks on MarkAsRead Button I will reset the local storage. With this the notification container contains the messages which are unread only. I think internally you are doing the same but can we get access to the same? Please suggest whether this is the best solution ? Or is there any inbuilt functionality which solves the problem? Thank you, Saketh.

…

On Fri, Dec 18, 2020, 2:32 PM Tapas Adhikary ***@***.***> wrote: We will be adding an ability to provide a function as a prop for the "Mark as Read" button handler. The default behavior of the button will be as it is today. However, the behavior can be completely overridden based on the use-cases by passing a function as a prop. @bsakethreddy <https://github.com/bsakethreddy>, You can observe the Liked pull request with this issue. Just FYI.. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADI3HNUQ2FSDHBLNZ4OPJDDSVMLAZANCNFSM4U7SES6A> .

[atapas]

@bsakethreddy, Thanks! Great to know your interest in contributing as well. Will be looking forward to it.

I felt there is a need for documentation on how to handle the data which we
are giving to Notify.

Sure, I'll take it up. Please feel free to create an issue. We can take care of it early next year(after vacation time).

what I planned is to store the data in localstorage and when the user clicks on MarkAsRead Button I will reset the local storage. With this, the notification container contains messages which are unread only. I think internally you are doing the same but can we get access to the same?

So with the approach of allowing you to pass your own implementation for the Mark as Read button, would it be helpful for you to tackle the current situation? Now a new prop will be available to pass the implementation as a function. There is a PR created for it already.

[atapas]

@bsakethreddy, This fix is now available with the 0.0.9 version.

https://www.npmjs.com/package/react-notification-timeline/v/0.0.9

An additional(optional) prop can be passed now for overriding the mark as read default functionality,

<NotifyMe
  data={data}
  storageKey='notific_key'
  notific_key='timestamp'
  notific_value='update'
  heading='Notification Alerts'
  sortedByKey={false}
  showDate={true}
  size={64}
  color="yellow"
  markAsReadFn={() => yourOwnFunctionHandler()}
/>

Hence closed this issue.