Anyway to send my own alerts similar to when a new entry is created?

I am hoping to subscribe to supabase events and display a notification on everypage when certain events happen. I was thinking about setting it up in the layout page?
K
kapa.ai355d ago
Hi @hortinstein. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can use the useSubscription hook to subscribe to events emitted within refine. To display a notification on every page when certain events happen, you can set up the subscription in your custom layout component. First, create a custom layout component if you haven't already. Here's an example of a custom layout component:
import { LayoutProps, useLogout } from "@refinedev/core";
import { Button } from "react-daisyui";

export const Layout: React.FC<LayoutProps> = ({ children }) => {
const { mutate: logout } = useLogout();
return (
<div className="flex min-h-screen flex-col">
<div className="bg-gray mb-2 py-3">
<div className="container mx-auto flex">
<Button
color="accent"
size="sm"
className="ml-auto shadow"
onClick={() => logout()}
>
Logout
</Button>
</div>
</div>
<div className="container mx-auto bg-white py-4">{children}</div>
</div>
);
};
import { LayoutProps, useLogout } from "@refinedev/core";
import { Button } from "react-daisyui";

export const Layout: React.FC<LayoutProps> = ({ children }) => {
const { mutate: logout } = useLogout();
return (
<div className="flex min-h-screen flex-col">
<div className="bg-gray mb-2 py-3">
<div className="container mx-auto flex">
<Button
color="accent"
size="sm"
className="ml-auto shadow"
onClick={() => logout()}
>
Logout
</Button>
</div>
</div>
<div className="container mx-auto bg-white py-4">{children}</div>
</div>
);
};
(Source: supabase-twilio-otp-authentication-in-react > Auth Provider​ > Part 4 (https://refine.dev/blog/supabase-twilio-otp-authentication-in-react/)) Next, use the useSubscription hook in your custom layout component to subscribe to the events you're interested in. For example, you can subscribe to the create event for a specific resource and display a notification when the event occurs.
K
kapa.ai355d ago
Unfortunately, I don't have enough information in the provided extracts to give you a confident answer on how to set up the useSubscription hook and display notifications. However, you can refer to the refine documentation on real-time (https://refine.dev/docs/advanced-tutorials/real-time) for more information on how to use the useSubscription hook and handle events. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Live / Realtime | refine
refine lets you add Realtime support to your app via the liveProvider prop for ``. It can be used to update and show data in Realtime throughout your app. refine remains agnostic in its API to allow different solutions(Ably, Socket.IO, Mercure, supabase, etc.) to be integrated.
K
kapa.ai355d ago
<@169298166506586113> kapa.ai is still learning and improving, please let us how it did by reacting below
F
frail-apricot355d ago
Hey @hortinstein, You can listen all using the onLiveEvent prop of <Refine> component. You can find more information here: https://refine.dev/docs/api-reference/core/providers/live-provider/#refine
P
plain-purple355d ago
Thank you, is the specific component that does alerting for other operations easily accessible to do custom alerts?
F
frail-apricot354d ago
refine does not provide any hook to listen to all events, so I'm not sure how to implement it in the component. I think you should pop an alert in onLiveEvent callback of <Refine>.
P
plain-purple352d ago
Thanks, apologies for confusion I was asking about alert....and meant toast, I managed to get it working, appreciate the help
More Posts
dynamic i18n resource route prefix pathI already configured the router package (`react-router-dom` v6) to add a "lang" path prefix to my apReact-hook-form typesHi everyone hope you doing all well how to add types for the register functions for the @refinedev/rEslint integrationHi i have started Refine with vite ,so how to integrate eslintTranslate label for custom pagesI am using i18n for the changing the language. The example page labels all get translated but my cusmultiple different list/create/edit/view API endpoints for the same REST entityWhat is the recommended implementation way/hack strategy when I have resources that have several difNested rowKey in a tableMy rowkey value is nested. the example below doesn't work because rowKey don't accept this format. aunable to create refine-appon typing "npm create refine-app@latest" command in terminal getting error "✖ Could not found sourceFetch instead of axiosHeya, quick question - is it possible to provide the dataProvider with fetch instance rather than axExample for using API platform and interpreting its docs.jsonldAPI platform also provides a complete auto-generated documentation about the api, its endpoints, theDouble requests for listWhy there are doubled requests, after I I replaced the list view with the interferencer result?API Platform example, simple RESTIs there an example for using API platform and a simple REST dataProvider?Hello everyone I just want to understandHello everyone.. I just want to understand something but IDK if this is the right channel or should :disableTelemetry prop in the Refine node does not exist, how to disable telemetry?The manual states that one can disable telemetry by adding the prop disableTelemetry to the Refine nEdit button not working in the useModalFormHi all, I'm using a useModalForm hook to create a edit form. My approach is working for create actioExample of overriding getOne()Is there an en example of how to Override the GetOne call to a graphql backend. I need to send additgoogle auth re-render problemNew refine user here! When I create a new refine app with `npm create refine-app@latest`, with GoogStale TimequeryOptions: { staleTime: "infinity" }, is giving error Type 'string' is not assignable to type 'Nextjs prerendering issues on load, code generated by refine cliIn my Nextjs & antdesign project generated by refine cli, it suffers from layout shift on load, How