rival-black•2y ago

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?

7 Replies

kapa.ai•2y 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.

kapa.ai•2y 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.

kapa.ai•2y ago

<@169298166506586113> kapa.ai is still learning and improving, please let us how it did by reacting below

rising-crimson•2y 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

Live Provider | refine

Overview

rival-black•2y ago

Thank you, is the specific component that does alerting for other operations easily accessible to do custom alerts?

rising-crimson•2y 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>.

rival-black•2y ago

Thanks, apologies for confusion I was asking about alert....and meant toast, I managed to get it working, appreciate the help