Modal Tracking

import { track } from "@databuddy/sdk";
import { useEffect, useRef } from "react";

export function useModalTracking(modalName: string, isOpen: boolean) {
const hasTrackedOpen = useRef(false);

useEffect(() => {
  if (isOpen && !hasTrackedOpen.current) {
    hasTrackedOpen.current = true;
    track("modal_opened", {
      modal_name: modalName,
    });
  } else if (!isOpen && hasTrackedOpen.current) {
    hasTrackedOpen.current = false;
    track("modal_closed", {
      modal_name: modalName,
    });
  }
}, [isOpen, modalName]);
}

function SettingsDialog() {
const [isOpen, setIsOpen] = useState(false);
useModalTracking("settings", isOpen);

return (
  <Dialog open={isOpen} onOpenChange={setIsOpen}>
    {/* Dialog content */}
  </Dialog>
);
}