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
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:
(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:
(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:
----------------------<@594767835386085376> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigoOP•9mo 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
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:
----------------------<@594767835386085376> kapa.ai is still learning and improving, please let us know how it did by reacting below
fascinating-indigoOP•9mo 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