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;
Top comments (0)