Function PostsSearch

packages/shared/src/components/PostsSearch.tsx:55–229

({
  initialQuery: initialQueryProp,
  autoFocus = true,
  placeholder,
  onSubmitQuery,
  className,
  suggestionType = 'searchPostSuggestions',
  onFocus,
  onClearQuery,
  enableSuggestions = true,
}: PostsSearchProps)

} & Pick<HTMLAttributes<HTMLInputElement>, 'onFocus'>;

export default function PostsSearch({
  initialQuery: initialQueryProp,
  autoFocus = true,
  placeholder,
  onSubmitQuery,
  className,
  suggestionType = 'searchPostSuggestions',
  onFocus,
  onClearQuery,
  enableSuggestions = true,
}: PostsSearchProps): ReactElement {
  const { time, contentCurationFilter } = useSearchContextProvider();
  const { user } = useAuthContext();
  const searchBoxRef = useRef<HTMLDivElement>(null);
  const [query, setQuery] = useState<string>();
  const [items, setItems] = useState<string[]>([]);
  const { value: searchVersion } = useConditionalFeature({
    feature: feature.searchVersion,
    shouldEvaluate:
      !!query &&
      suggestionType === 'searchPostSuggestions' &&
      enableSuggestions,
  });
  const SEARCH_URL = SEARCH_TYPES[suggestionType];
  const purify = useDomPurify();
  const [isFocused, setIsFocused] = useState(false);
  const initialQuery = useRef<string>(initialQueryProp || '');
  // `query` only catches up after the suggestion debounce, so submitting has to
  // read the raw input value or an early Enter would search for nothing.
  const typedQuery = useRef<string>(initialQueryProp || '');

  const { data: searchResults, isPending } = useQuery<{
    [suggestionType: string]: { hits: { title: string }[] };
  }>({
    // Bookmark and reading-history suggestions are private per user.
    queryKey: generateQueryKey(RequestKey.Search, user, suggestionType, query),
    queryFn: () =>
      gqlClient.request(SEARCH_URL, { query, version: searchVersion }),
    enabled: !!query && enableSuggestions,
    staleTime: StaleTime.Default,
  });

  useEffect(() => {
    if (!isPending) {
      setItems(
        searchResults?.[suggestionType]?.hits.map((hit) =>
          purify?.sanitize?.(hit.title),
        ) ?? [],
      );
    }
  }, [searchResults, isPending, suggestionType, purify]);

  const submitQuery = async (item?: string) => {
    const itemQuery = item?.replace?.(sanitizeSearchTitleMatch, '');
    await onSubmitQuery(itemQuery || typedQuery.current || '', {
      filters: {
        time: time.toString(),
        contentCuration: contentCurationFilter,