Function Search

data-browser/src/routes/SearchRoute.tsx:11–90

()

/** Full text search route */
export function Search(): JSX.Element {
  const [query] = useSearchQuery();
  const [selectedIndex, setSelected] = useState(0);
  const { results, loading, error } = useServerSearch(query, {
    debounce: 0,
  });
  const history = useHistory();
  const htmlElRef = useRef(null);

  /** Moves the viewport to the card at the selected index */
  function moveTo(index: number) {
    setSelected(index);
    const currentElm = htmlElRef?.current?.children[index];
    currentElm?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  useHotkeys(
    'enter',
    e => {
      e.preventDefault();
      const subject =
        htmlElRef?.current?.children[selectedIndex]?.getAttribute('about');
      if (subject) {
        //@ts-ignore blur does exist though
        document?.activeElement?.blur();
        history.push(openURL(subject));
      }
    },
    { enableOnTags: ['INPUT'] },
  );
  useHotkeys(
    'up',
    e => {
      e.preventDefault();
      const newSelected = selectedIndex > 0 ? selectedIndex - 1 : 0;
      moveTo(newSelected);
    },
    { enableOnTags: ['INPUT'] },
  );
  useHotkeys(
    'down',
    e => {
      e.preventDefault();
      const newSelected =
        selectedIndex == results.length - 1
          ? results.length - 1
          : selectedIndex + 1;
      moveTo(newSelected);
    },
    { enableOnTags: ['INPUT'] },
  );

  let message = 'No hits';
  if (query.length == 0) {
    message = 'Enter a search query';
  }
  if (loading) {
    message = 'Loading results...';