Add realtime notifications to your Refine app

npm create refine-app@latest -- --example with-nextjs-next-auth

"use client"
import { WeavyMessenger } from "@components/weavy/messenger"
import { ColorModeContext } from "@contexts/color-mode"
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd"
import { useGetIdentity } from "@refinedev/core"
import { Layout as AntdLayout, Avatar, Flex, Switch, Typography, theme } from "antd"
import React, { useContext } from "react"

const { Text } = Typography
const { useToken } = theme

type IUser = {
  id: number
  name: string
  avatar: string
}

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) => {
  const { token } = useToken()
  const { data: user } = useGetIdentity<IUser>()
  const { mode, setMode } = useContext(ColorModeContext)

  const headerStyles: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "center",
    padding: "0px 24px",
    height: "64px",
  }

  if (sticky) {
    headerStyles.position = "sticky"
    headerStyles.top = 0
    headerStyles.zIndex = 1
  }

  return (
    <AntdLayout.Header style={headerStyles}>
      <Flex align="center" gap="small">
        <Switch checkedChildren="🌛" unCheckedChildren="🔆" onChange={() => setMode(mode === "light" ? "dark" : "light")} defaultChecked={mode === "dark"} />
        {(user?.name || user?.avatar) && (
          <Flex style={{ marginLeft: "8px" }} align="center" gap="middle">
            {user?.name && <Text strong>{user.name}</Text>}
            {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
          </Flex>
        )}
        <WeavyNotifications />
      </Flex>
    </AntdLayout.Header>
  )
}

"use server"
import { WeavyTypes } from "@weavy/uikit-react"

/**
 * Sets page metadata for an app.
 * The metadata is used when clicking notifications to be able to navigate back to the component that generated the content.
 */
export const setPageNavigation = async (uid: string, path: string, origin: string) => {
  let app: WeavyTypes.AppWithSourceMetadataType | undefined

  {
    // Check for any existing metadata
    const response = await fetch(new URL(`/api/apps/${uid}`, process.env.NEXT_PUBLIC_WEAVY_URL), {
      method: "GET",
      headers: {
        "content-type": "application/json",
        Authorization: `Bearer ${process.env.WEAVY_APIKEY}`,
      },
    })

    if (!response.ok) {
      throw new Error(`Could fetch app: ${uid}`)
    }
    app = await response.json()
  }

  // Only set the metadata if it's not set already.
  if (app && (!app.metadata?.source_name || !app.metadata?.source_url || !app.metadata?.source_data)) {
    console.log("Setting page navigation", uid)

    const sourceUrl = new URL(path, origin);

    const body = JSON.stringify({
      metadata: Object.assign({}, app.metadata, {
        source_name: "refine",
        source_data: path,
        source_url: sourceUrl.toString()
      }),
    })

    const response = await fetch(new URL(`/api/apps/${uid}`, process.env.NEXT_PUBLIC_WEAVY_URL), {
      method: "PATCH",
      headers: {
        "content-type": "application/json",
        Authorization: `Bearer ${process.env.WEAVY_APIKEY}`,
      },
      body,
    })

    if (!response.ok) {
      throw new Error(`Could not update app metadata: ${uid}`)
    }
  }
}

"use client"
import { setPageNavigation } from "@providers/weavy/navigation"
import { WeavyTypes } from "@weavy/uikit-react";
import { LegacyRef, useCallback, useEffect, useState } from "react"

export type WyAppRef = (HTMLElement & { uid?: string | null; whenApp: () => Promise<WeavyTypes.AppWithSourceMetadataType> }) | null

/**
 * Calls the page navigation provider to update page metadata for a component.
 * It is only called when the ref is updated or deps change.
 * 
 * @param path - Provides the path to the component. Preferably provide it as a function to make it re-evaluate when deps change.
 * @param deps - Any deps that should be monitored to re-trigger the provider call.
 * @returns Ref callback function to be used with the ref attribute of a component.
 */
export const usePageNavigation = <TRef extends WyAppRef | null = WyAppRef>(path: string | (() => string), deps: React.DependencyList) => {
  const [component, setComponent] = useState<WyAppRef>()

  useEffect(() => {
    if (component && component.uid) {
      // The (current) path to save
      const componentPath: string = typeof path === "function" ? path() : path

      requestAnimationFrame(() => {
        component.whenApp().then((app) => {
          //console.log("Current refine page", component.uid, app.metadata?.page)
          // Check if metadata.page already is set
          if (component.uid && (!app.metadata?.source_data || !app.metadata?.source_url || !app.metadata.source_name)) {
            console.log("Setting refine page", component.uid, componentPath)
            // Update using server function
            setPageNavigation(component.uid, componentPath, document.location.origin)
          }
        })
      })
    }
  }, [component, component?.uid, ...deps])

  // Ref callback function to use with components
  return useCallback((ref: TRef) => {
    const currentComponent = ref?.whenApp ? ref : undefined
    setComponent(currentComponent)
  }, []) as LegacyRef<TRef> | undefined
}

"use client";
import { WyComments } from "@weavy/uikit-react";
import { useParsed } from "@refinedev/core";
import { usePageNavigation } from "@hooks/weavy/usePageNavigation";

export default function SomeComponent({ id }) {
 
  // Construct an uid
  const myUid = id ? `refine:${id}:comments`: undefined
  
  // Save page metadata for navigation
  const { pathname } = useParsed();
  const componentRefCallback = usePageNavigation(() => `${pathname}`, [myUid]);

  return (
    <>
      <WyComments uid={myUid} ref={componentRefCallback} notifications="none" />
    </>
  );
}

"use client"
import React, { useState } from "react"
import { Button, Drawer } from "antd"
import { ConversationTypes, WyLinkEventType, WyNotifications } from "@weavy/uikit-react"
import { BellOutlined } from "@ant-design/icons"
import { useGo, useParsed } from "@refinedev/core"

export const WeavyNotifications: React.FC = () => {
  const [open, setOpen] = useState(false)
  const { pathname } = useParsed()
  const go = useGo()

  const showDrawer = () => {
    setOpen(true)
  }

  const closeDrawer = () => {
    setOpen(false)
  }

    const handleLink = async (e: WyLinkEventType) => {
    const appType = e.detail.link.app?.type;

    console.log("Opening link", e.detail)

    // Check if the appType guid exists in the MessengerTypes map
    if (appType && MessengerTypes.has(appType)) {
      // Show the messenger
      go({ hash: "messenger" });
      closeDrawer();
    } else if (e.detail.source_name === "refine") {
      const route = e.detail.source_data;

      // We can navigate if there is page metadata
      if (route) {
        console.log("Trying to navigate", route);

        // Only navigate if necessary
        if (!pathname?.startsWith(route)) {
          go({ to: route });
        }
        closeDrawer();
      }
    } else if (e.detail.source_url) {
      // Open link to external app
      window.open(e.detail.source_url, "_blank");
    }
  };

  return (
    <>
      <Button
        type="default"
        onClick={showDrawer}
        title="Notifications"
        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
        icon={<BellOutlined />}
      ></Button>
      <Drawer onClose={closeDrawer} open={open} styles={{ body: { padding: 0 } }}>
        <WyNotifications onWyLink={handleLink} />
      </Drawer>
    </>
  )
}

"use client"
import React, { useContext, useEffect, useState } from "react"
import { Badge, Button, Drawer } from "antd"
import { ConversationTypes, WeavyContext, WyLinkEventType, WyNotifications } from "@weavy/uikit-react"
import { BellOutlined } from "@ant-design/icons"
import { useGo, useParsed } from "@refinedev/core"

export const WeavyNotifications: React.FC = () => {
  const [open, setOpen] = useState(false)
  const [notificationCount, setNotificationCount] = useState(0)
  const { pathname } = useParsed()
  const go = useGo()

  const weavy = useContext(WeavyContext)

  const showDrawer = () => {
    setOpen(true)
  }

  const closeDrawer = () => {
    setOpen(false)
  }

  const handleLink = async (e: WyLinkEventType) => {
    const appType = e.detail.app?.type
    let appUid = e.detail.app?.uid

    // Check if the appType guid exists in the ConversationTypes map
    if (ConversationTypes.has(appType as string)) {
      // Show the messenger
      go({ hash: "messenger" })
      closeDrawer()
    } else if (weavy && appUid) {
      // Show a contextual block by navigation to another page

      if (appUid.startsWith("refine:")) {
        // First we much fetch the app metadata from the server
        const response = await weavy.fetch(`/api/apps/${appUid}`)
        if (!response.ok) {
          console.error("Error fetching app")
          return
        }

        const { metadata } = (await response.json()) as AppWithPageType
        const route = metadata?.page

        // We can navigate if there is page metadata
        if (route) {
          console.log("Trying to navigate", route)

          // Only navigate if necessary
          if (!pathname?.startsWith(route)) {
            go({ to: route })
            closeDrawer()
          }
        }
      }
    }
  }

  const updateNotificationCount = async () => {
    if (weavy) {
      // Fetch notification count from the Weavy Web API.
      // See https://www.weavy.com/docs/reference/web-api/notifications#list-notifications

      const queryParams = new URLSearchParams({
        type: "",
        countOnly: "true",
        unread: "true",
      })

      // Use weavy.get() for fetching from the Weavy Web API to fetch on behalf of the currently authenticated user.
      const response = await weavy.get(`/api/notifications?${queryParams.toString()}`)
      if (response.ok) {
        const result = await response.json()

        // Update the count
        setNotificationCount(result.count)
      }
    }
  }

  useEffect(() => {
    if (weavy) {
      // Get initial notification count
      updateNotificationCount()
    }
  }, [weavy])

  return (
    <>
      <Badge count={notificationCount}>
        <Button
          type="default"
          onClick={showDrawer}
          title="Notifications"
          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
          icon={<BellOutlined />}
        ></Button>
      </Badge>
      <Drawer onClose={closeDrawer} open={open} styles={{ body: { padding: 0 } }}>
        <WyNotifications onWyLink={handleLink} />
      </Drawer>
    </>
  )
}

"use client"
import React, { useContext, useEffect, useState } from "react"
import { Badge, Button, Drawer } from "antd"
import { ConversationTypes, WeavyContext, WyLinkEventType, WyNotifications, WyNotificationsEventType } from "@weavy/uikit-react"
import { BellOutlined } from "@ant-design/icons"
import { useGo, useNotification, useParsed } from "@refinedev/core"

export const WeavyNotifications: React.FC = () => {
  const [open, setOpen] = useState(false)
  const [notificationCount, setNotificationCount] = useState(0)
  const { open: openNotification } = useNotification()
  const { pathname } = useParsed()
  const go = useGo()

  const weavy = useContext(WeavyContext)

  const showDrawer = () => {
    setOpen(true)
  }

  const closeDrawer = () => {
    setOpen(false)
  }

  const handleLink = async (e: WyLinkEventType) => {
    const appType = e.detail.app?.type
    let appUid = e.detail.app?.uid

    // Check if the appType guid exists in the ConversationTypes map
    if (ConversationTypes.has(appType as string)) {
      // Show the messenger
      go({ hash: "messenger" })
      closeDrawer()
    } else if (weavy && appUid) {
      // Show a contextual block by navigation to another page

      if (appUid.startsWith("refine:")) {
        // First we much fetch the app metadata from the server
        const response = await weavy.fetch(`/api/apps/${appUid}`)
        if (!response.ok) {
          console.error("Error fetching app")
          return
        }

        const { metadata } = (await response.json()) as AppWithPageType
        const route = metadata?.page

        // We can navigate if there is page metadata
        if (route) {
          console.log("Trying to navigate", route)

          // Only navigate if necessary
          if (!pathname?.startsWith(route)) {
            go({ to: route })
            closeDrawer()
          }
        }
      }
    }
  }

  const updateNotificationCount = async () => {
    if (weavy) {
      // Fetch notification count from the Weavy Web API.
      // See https://www.weavy.com/docs/reference/web-api/notifications#list-notifications

      const queryParams = new URLSearchParams({
        type: "",
        countOnly: "true",
        unread: "true",
      })

      // Use weavy.get() for fetching from the Weavy Web API to fetch on behalf of the currently authenticated user.
      const response = await weavy.get(`/api/notifications?${queryParams.toString()}`)
      if (response.ok) {
        const result = await response.json()

        // Update the count
        setNotificationCount(result.count)
      }
    }
  }

  const handleNotifications = (e: WyNotificationsEventType) => {
    if (e.detail.notification && e.detail.action === "notification_created") {
      // Only show notifications when a new notification is received

      // Show notifications using the Refine API
      openNotification?.({
        message: e.detail.notification.plain,
        // @ts-expect-error empty type for plain notification
        type: "",
      })
    }

    // Always update the notification count when notifications updates are received
    updateNotificationCount()
  }

  useEffect(() => {
    if (weavy) {
      // Get initial notification count
      updateNotificationCount()
      
      // Configure realtime notifications listener
      weavy.notificationEvents = true

      // Add a realtime notification event listener
      weavy.host?.addEventListener("wy:notifications", handleNotifications)

      return () => {
        // Unregister the event listener when the component is unmounted
        weavy.host?.removeEventListener("wy:notifications", handleNotifications)
      }
    }
  }, [weavy])

  return (
    <>
      <Badge count={notificationCount}>
        <Button
          type="default"
          onClick={showDrawer}
          title="Notifications"
          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
          icon={<BellOutlined />}
        ></Button>
      </Badge>
      <Drawer onClose={closeDrawer} open={open} styles={{ body: { padding: 0 } }}>
        <WyNotifications onWyLink={handleLink} />
      </Drawer>
    </>
  )
}