Homarr/src/modules/search/SearchModule.tsx

import { Kbd, createStyles, Autocomplete } from '@mantine/core';
import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
import { useEffect, useRef, useState } from 'react';
import {
  IconSearch as Search,
  IconBrandYoutube as BrandYoutube,
  IconDownload as Download,
} from '@tabler/icons';
import axios from 'axios';
import { useConfig } from '../../tools/state';
import { IModule } from '../ModuleTypes';

const useStyles = createStyles((theme) => ({
  hide: {
    [theme.fn.smallerThan('sm')]: {
      display: 'none',
    },
    display: 'flex',
    alignItems: 'center',
  },
}));

export const SearchModule: IModule = {
  title: 'Search Bar',
  description: 'Show the current time and date in a card',
  icon: Search,
  component: SearchBar,
};

export default function SearchBar(props: any) {
  const { config, setConfig } = useConfig();
  const [opened, setOpened] = useState(false);
  const [results, setOpenedResults] = useState(false);
  const [icon, setIcon] = useState(<Search />);
  const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
  const textInput = useRef<HTMLInputElement>();
  // Find a service with the type of 'Overseerr'
  const form = useForm({
    initialValues: {
      query: '',
    },
  });

  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
  const [results, setResults] = useState<any[]>([]);
  useEffect(() => {
    if (form.values.query !== debounced || form.values.query === '') return;
    axios
      .get(`/api/modules/search?q=${form.values.query}`)
      .then((res) => setResults(res.data ?? []));
  }, [debounced]);
  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
  const { classes, cx } = useStyles();
  const rightSection = (
    <div className={classes.hide}>
      <Kbd>Ctrl</Kbd>
      <span style={{ margin: '0 5px' }}>+</span>
      <Kbd>K</Kbd>
    </div>
  );

  // If enabled modules doesn't contain the module, return null
  // If module in enabled

  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
  if (!exists) {
    return null;
  }

  const autocompleteData = results.map((result) => ({
    label: result.phrase,
    value: result.phrase,
  }));
  return (
    <form
      onChange={() => {
        // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
        const query = form.values.query.trim();
        const isYoutube = query.startsWith('!yt');
        const isTorrent = query.startsWith('!t');
        if (isYoutube) {
          setIcon(<BrandYoutube size={22} />);
        } else if (isTorrent) {
          setIcon(<Download size={22} />);
        } else {
          setIcon(<Search size={22} />);
        }
      }}
      onSubmit={form.onSubmit((values) => {
        const query = values.query.trim();
        const isYoutube = query.startsWith('!yt');
        const isTorrent = query.startsWith('!t');
        form.setValues({ query: '' });
        setTimeout(() => {
          if (isYoutube) {
            window.open(`https://www.youtube.com/results?search_query=${query.substring(4)}`);
          } else if (isTorrent) {
            window.open(`https://bitsearch.to/search?q=${query.substring(4)}`);
          } else {
            window.open(
              `${
                queryUrl.includes('%s')
                  ? queryUrl.replace('%s', values.query)
                  : queryUrl + values.query
              }`
            );
          }
        }, 20);
      })}
    >
      <Autocomplete
        autoFocus
        variant="filled"
        data={autocompleteData}
        icon={icon}
        ref={textInput}
        rightSectionWidth={90}
        rightSection={rightSection}
        radius="md"
        size="md"
        styles={{ rightSection: { pointerEvents: 'none' } }}
        placeholder="Search the web..."
        {...props}
        {...form.getInputProps('query')}
      />
    </form>
  );
}