Add a feature complete messenger to your Refine app

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

"use client";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

/**
 * Gets the hash from the current location.
 * @returns The current hash without a leading #hash sign
 */
const getHash = () =>
  typeof window !== "undefined" ? window.location.hash.replace("#", "") : "";

/**
 * Returns the hash from the current location. 
 * Updates when the hash is changed by the browser or by next navigation.
 * 
 * @returns Any current hash without leading #hash sign
 */
const useHash = () => {
  const [isClient, setIsClient] = useState(false);
  const [hash, setHash] = useState(getHash());
  const params = useParams();

  useEffect(() => {
    const handleHashChange = () => {
      setHash(getHash());
    };
    window.addEventListener('hashchange', handleHashChange);
    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  useEffect(() => {
    setIsClient(true);
    setHash(getHash());
  }, [params]);

  return isClient ? hash : "";
};

export default useHash;

import React, { useEffect, useState } from "react"
import { Button, Drawer } from "antd"
import { WyMessenger } from "@weavy/uikit-react"
import { MessageOutlined } from "@ant-design/icons"
import { useGo } from "@refinedev/core"
import useHash from "@hooks/hash/useHash"

export const WeavyMessenger: React.FC = () => {
  const [open, setOpen] = useState(false)
  const go = useGo()
  const hash = useHash()

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

  const closeDrawer = () => {
    setOpen(false)
    if (hash === "messenger") {
      // Clear the hash when closing the drawer
      go({ hash: "" })
    }
  }

  useEffect(() => {
    // Show the drawer when the #messenger hash is set
    if (hash === "messenger") {
      showDrawer()
    }
  }, [hash])

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