custom cancel button call inside react-toastify

#react #javascript #webdev

At development time code context/pattern is going to different for project to project... so bellow coding pattern is one of them...

Custom button component call inside "react-toastify"

import ApiCancelBtn from '../components/ApiCancelBtn';
import { toast } from 'react-toastify';

export class Service {
    ...     
    async handleApiCall(callerId) {
        ...
        toast.info(`🙂 We are thinking...`, {
          icon: false,
          autoClose: 30000,
          pauseOnHover: false,
          // custom button component call...
          closeButton: <ApiCancelBtn taskId={'taskId'} />,
        });
        ...
    }
    ...
}

import { toast } from 'react-toastify';
import api from '../api';

const ApiCancelBtn = ({ taskId }) => {

  const handleTaskCancel = async (taskId) => {
    if (taskId !== undefined) {
      await api.ai.cancelTask(taskId);
      toast.dismiss();
    }
  };

  return (
    <button 
       className="toast-custom-cancel-button" 
       onClick={()=> handleTaskCancel(taskId)}
    >
      Cancel API Call
    </button>
  );
};

export default ApiCancelBtn;