@redocly/theme/src/core/hooks/search/use-search-dialog.ts

Shared UI components lib

import { useEffect, useCallback, useState } from 'react';
import { useLocation } from 'react-router-dom';
import hotkeys from 'hotkeys-js';

import { useThemeHooks } from '../use-theme-hooks';
import { useThemeConfig } from '../use-theme-config';
import { useSearchSession } from '../../contexts';

export function useSearchDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const themeSettings = useThemeConfig();
  const location = useLocation();
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();
  const { refreshSearchSessionId } = useSearchSession();
  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
  const hotKeys = keyShortcuts?.join(',');

  useEffect(() => {
    if (hotKeys) {
      hotkeys(hotKeys, (ev) => {
        setIsOpen(true);
        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
        ev.preventDefault();
      });

      return () => hotkeys.unbind(hotKeys);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hotKeys]);

  const onOpen = useCallback(function () {
    telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
    setIsOpen(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onClose = useCallback(() => {
    refreshSearchSessionId();
    setIsOpen(false);
  }, [refreshSearchSessionId]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(onClose, [location]);

  return { isOpen, onOpen, onClose };
}