Function TypesenseSearch

apps/web/ui/Typesense/index.tsx:18–96

({
  apiKey,
  indexName = 'threads',
  searchClient,
  settings,
  routing,
  middlewares,
  isSubDomainRouting,
}: {
  apiKey: string;
  indexName?: string;
  searchClient: (apiKey: string) => any;
  settings: Settings;
  routing?: any;
  middlewares?: any[];
  isSubDomainRouting: boolean;
})

import { Settings } from '@linen/types';

export function TypesenseSearch({
  apiKey,
  indexName = 'threads',
  searchClient,
  settings,
  routing,
  middlewares,
  isSubDomainRouting,
}: {
  apiKey: string;
  indexName?: string;
  searchClient: (apiKey: string) => any;
  settings: Settings;
  routing?: any;
  middlewares?: any[];
  isSubDomainRouting: boolean;
}) {
  const [open, setOpen] = useState<boolean>(false);

  async function isSearchOngoing() {
    try {
      const url = new URL(window.location.toString());
      if (url.searchParams.has(`${indexName}[query]`)) {
        setOpen(true);
      }
    } catch (error) {}
  }

  useEffect(() => {
    isSearchOngoing();
  }, []);

  return (
    <div className={styles.container} key={indexName + apiKey}>
      <TextInput
        className={styles.input}
        id="search"
        icon={<FiSearch />}
        placeholder={'Search'}
        type="search"
        {...{
          onFocus: () => {
            setOpen(true);
          },
        }}
      />
      <Modal open={open} close={() => setOpen(false)} size="xl">
        <InstantSearch
          indexName={indexName}
          searchClient={searchClient(apiKey)}
          routing={routing}
        >
          {middlewares?.length && <Middleware middlewares={middlewares} />}
          <div className={styles.searchBar}>
            <SearchBox placeholder="Search" autoFocus />
            <div className={styles.x}>
              <Icon onClick={() => setOpen(false)}>
                <FiX />