fair-rose
fair-rose3mo ago

Notification provider customization with toast syntax error.

copied straight from the documentation. i get an error in this file. 11 │ progress: undoableTimeout && (undoableTimeout / 10) * 2, 12 │ render: ( 13 │ <UndoableNotification 14 │ message={message} · ─────── 15 │ cancelMutation={cancelMutation} 16 │ /> 17 │ ), ╰──── Caused by: Syntax Error this is notificationProvider.ts file. https://refine.dev/docs/notification/notification-provider/#close const notificationProvider: NotificationProvider = { open: ({ message, key, type }) => { if (toast.isActive(key)) { toast.update(key, { render: message, type, }); } else { toast(message, { toastId: key, type, }); } }, }; when i set my notificationProvider.ts like this it works. but with undoable notification it didnt work. i built the component as described in documentation. code was too long therefore i was not able copy paste it.
Notification Provider | Refine
Refine let's you set a notification API by providing the notificationProvider property to the `` component.
6 Replies
kapa.ai
kapa.ai3mo ago
Hi @atakan0298. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering seems to be a syntax error in your notificationProvider.ts file. Based on the code you've provided, it seems like you're trying to implement an undoable notification. The undoable notification requires a custom component to display the countdown and button for canceling the mutation. This component is called UndoableNotification and it should be defined as follows:
type UndoableNotification = {
message: string;
cancelMutation?: () => void;
closeToast?: () => void;
};

export const UndoableNotification: React.FC<UndoableNotification> = ({
closeToast,
cancelMutation,
message,
}) => {
return (
<div>
<p>{message}</p>
<button
onClick={() => {
cancelMutation?.();
closeToast?.();
}}
>
Undo
</button>
</div>
);
};
type UndoableNotification = {
message: string;
cancelMutation?: () => void;
closeToast?: () => void;
};

export const UndoableNotification: React.FC<UndoableNotification> = ({
closeToast,
cancelMutation,
message,
}) => {
return (
<div>
<p>{message}</p>
<button
onClick={() => {
cancelMutation?.();
closeToast?.();
}}
>
Undo
</button>
</div>
);
};
(Source: Refine Blog (https://refine.dev/blog/react-toastify#step-3--create-custom-undoable-notification-component)) Once you have this component defined, you can use it in your notificationProvider.ts file like this:
const notificationProvider: NotificationProvider = {
open: ({ message, key, type, undoableTimeout, cancelMutation }) => {
if (type === "progress") {
if (toast.isActive(key)) {
toast.update(key, {
progress: undoableTimeout && (undoableTimeout / 10) * 2,
render: (
<UndoableNotification
message={message}
cancelMutation={cancelMutation}
/>
),
type: "default",
});
} else {
toast(
<UndoableNotification
message={message}
cancelMutation={cancelMutation}
/>,
{
toastId: key,
updateId: key,
closeOnClick: false,
closeButton: false,
autoClose: false,
progress: undoableTimeout && (undoableTimeout / 10) * 2,
},
);
}
} else {
if (toast.isActive(key)) {
toast.update(key, {
render: message,
closeButton: true,
autoClose: 5000,
type,
});
} else {
toast(message, {
toastId: key,
type,
});
}
}
},
};
const notificationProvider: NotificationProvider = {
open: ({ message, key, type, undoableTimeout, cancelMutation }) => {
if (type === "progress") {
if (toast.isActive(key)) {
toast.update(key, {
progress: undoableTimeout && (undoableTimeout / 10) * 2,
render: (
<UndoableNotification
message={message}
cancelMutation={cancelMutation}
/>
),
type: "default",
});
} else {
toast(
<UndoableNotification
message={message}
cancelMutation={cancelMutation}
/>,
{
toastId: key,
updateId: key,
closeOnClick: false,
closeButton: false,
autoClose: false,
progress: undoableTimeout && (undoableTimeout / 10) * 2,
},
);
}
} else {
if (toast.isActive(key)) {
toast.update(key, {
render: message,
closeButton: true,
autoClose: 5000,
type,
});
} else {
toast(message, {
toastId: key,
type,
});
}
}
},
};
(Source: Refine Documentation (https://refine.dev/docs/notification/notification-provider#open)) Please ensure that you have correctly defined and imported the UndoableNotification component in your notificationProvider.ts file. If the error persists, please provide the complete error message or any additional code that might be relevant. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3mo ago
<@594767835386085376> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose3mo ago
import React from "react"; import {NotificationProvider} from "@refinedev/core"; import {toast} from "react-toastify"; import {UndoableNotification} from "src/components/atoms/undoableNotification"; export const notificationProvider: NotificationProvider = { open: ({key, message, type, undoableTimeout, cancelMutation}) => { if (type === "progress") { if (toast.isActive(key)) { toast.update(key, { progress: undoableTimeout && (undoableTimeout / 10) * 2, render: ( <UndoableNotification message={message} cancelMutation={cancelMutation} /> ), type: "default", }); } else { toast( <UndoableNotification message={message} cancelMutation={cancelMutation} />, { toastId: key, updateId: key, closeOnClick: false, closeButton: false, autoClose: false, progress: undoableTimeout && (undoableTimeout / 10) * 2, }, ); } } else { if (toast.isActive(key as React.ReactText)) { toast.update(key as React.ReactText, { render: message, closeButton: true, autoClose: 5000, type, }); } else { toast(message, { toastId: key, type, }); } } }, close: (key) => toast.dismiss(key), }; this is the notificationProvider.ts file import React from 'react'; import {UndoableNotificationType} from 'src/types/components/atoms'; export const UndoableNotification: React.FC<UndoableNotificationType> = ({ closeToast, cancelMutation, message, }) => { return ( <div> <p>{message}</p> <button onClick={() => { cancelMutation?.(); closeToast?.(); }} > Undo </button> </div> ); }; thats the other component i still get the error @kapa.ai
kapa.ai
kapa.ai3mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The error you're encountering seems to be a syntax error, but without the complete error message or the full code of your notificationProvider.ts file, it's hard to pinpoint the exact issue. However, I can suggest a few general debugging steps: 1. Double-check your syntax: Make sure all your brackets, parentheses, and commas are correctly placed. Also, ensure that you're not missing any required props in your UndoableNotification component. 2. Check your imports: Make sure you're correctly importing all the required dependencies and components. This includes NotificationProvider from @pankod/refine, toast from react-toastify, and your UndoableNotification component. 3. Update your packages: Sometimes, these issues can be caused by outdated packages. Try updating your @pankod/refine and react-toastify packages to the latest versions. If none of these steps solve your issue, I recommend reaching out to the Refine community on Discord (https://discord.com/channels/837692625737613362) or opening an issue on the Refine GitHub repository (https://github.com/pankod/refine/issues). They might be able to provide more specific help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3mo ago
<@594767835386085376> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose3mo ago
@Batu any ideas? @Alican Erdurmaz if (toast.isActive(key as React.ReactText)) { toast.update(key as React.ReactText, { progress: undoableTimeout && (undoableTimeout / 10) * 2, render: () => (<div>dkdkkdkd</div>), type: "default", }); } else { problem is with the render component when in remove render it will work