You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NotificationButton.js 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. // @flow
  2. import React, { useCallback } from 'react';
  3. import { useDispatch } from 'react-redux';
  4. type Props = {
  5. /**
  6. * Action to be dispatched on click.
  7. */
  8. action: Function,
  9. /**
  10. * The text of the button.
  11. */
  12. children: React$Node,
  13. /**
  14. * CSS class of the button.
  15. */
  16. className: string,
  17. /**
  18. * CSS id of the button.
  19. */
  20. id?: string,
  21. /**
  22. * The participant.
  23. */
  24. participant: Object,
  25. /**
  26. * The `data-testid` used for the button.
  27. */
  28. testId: string
  29. }
  30. /**
  31. * Component used to display an approve/reject button.
  32. *
  33. * @returns {React$Element<'button'>}
  34. */
  35. export default function({ action, children, className, participant, id, testId }: Props) {
  36. const dispatch = useDispatch();
  37. const onClick = useCallback(() => dispatch(action(participant.id)), [ dispatch, participant ]);
  38. return (
  39. <button
  40. className = { className }
  41. data-testid = { testId }
  42. id = { id }
  43. onClick = { onClick }
  44. type = 'button'>
  45. { children }
  46. </button>
  47. );
  48. }