documenso/apps/remix/app/components/general/document/document-search.tsx

import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
import { Input } from '@documenso/ui/primitives/input';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
import { useCallback, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router';

export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string }) => {
  const { _ } = useLingui();

  const [searchParams, setSearchParams] = useSearchParams();

  const [searchTerm, setSearchTerm] = useState(initialValue);
  const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);

  const handleSearch = useCallback(
    (term: string) => {
      const params = new URLSearchParams(searchParams?.toString() ?? '');
      if (term) {
        params.set('query', term);
      } else {
        params.delete('query');
      }

      setSearchParams(params);
    },
    [searchParams],
  );

  useEffect(() => {
    const currentQueryParam = searchParams.get('query') || '';

    if (debouncedSearchTerm !== currentQueryParam) {
      handleSearch(debouncedSearchTerm);
    }
  }, [debouncedSearchTerm, searchParams]);

  return (
    <Input
      type="search"
      placeholder={_(msg`Search documents...`)}
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};