Function PageInput

website/src/components/PageInput.tsx:106–192

({title, setTitle, placeholderText, setPlaceholderText})

  readonly placeholderText: string;
  readonly setPlaceholderText: (placeholderText: string) => void;
}> = ({title, setTitle, placeholderText, setPlaceholderText}) => {
  const [suggestions, setSuggestions] = useState<readonly PageSuggestion[]>([]);

  // Update placeholder text every 5 seconds when the title is empty.
  useEffect(() => {
    if (title !== '') return;

    const intervalId = setInterval(() => {
      setPlaceholderText(getRandomPageTitle());
    }, 5_000);

    return () => clearInterval(intervalId);
  }, [setPlaceholderText, title]);

  const loadSuggestions = useCallback(async (query: string) => {
    const url = new URL(WIKIPEDIA_API_URL);
    url.search = new URLSearchParams({
      action: 'query',
      format: 'json',
      gpssearch: query,
      generator: 'prefixsearch',
      prop: 'pageprops|pageimages|pageterms',
      redirects: '',
      ppprop: 'displaytitle',
      piprop: 'thumbnail',
      pithumbsize: '160',
      pilimit: '30',
      wbptterms: 'description',
      gpsnamespace: '0',
      gpslimit: '5',
      origin: '*',
    }).toString();

    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: {'Api-User-Agent': SDOW_USER_AGENT},
      });

      const data = await response.json();

      const pageResults = get(data, 'query.pages', {});
      const newSuggestions: PageSuggestion[] = [];
      forEach(pageResults, (all) => {
        const {ns, id, title, terms, thumbnail} = all;
        if (ns === 0) {
          let description = get(terms, 'description.0', '');
          description = description.charAt(0).toUpperCase() + description.slice(1);
          newSuggestions.push({id, title, description, thumbnailUrl: get(thumbnail, 'source')});
        }
      });
      setSuggestions(filter(newSuggestions));
    } catch (error) {
      const defaultErrorMessage = 'Failed to fetch page suggestions from Wikipedia API.';
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (window as any).ga('send', 'exception', {
        exDescription: get(error, 'response.data.error', defaultErrorMessage),
        exFatal: false,