text: /* eslint-disable import/no-extraneous-dependencies */
  /* eslint-disable import/no-unresolved */
  /* eslint-disable no-shadow */
  
  import fetch from 'isomorphic-fetch';
  import React, { useCallback, useState } from 'react';
  import { AsyncTypeahead } from 'react-bootstrap-typeahead';
  
  // Polyfill Promises for IE and older browsers.
  require('es6-promise').polyfill();
  
  /* example-start */
  const SEARCH_URI = 'https://api.github.com/search/users';
  
  const AsyncExample = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [options, setOptions] = useState([]);
  
    const handleSearch = useCallback((query) => {
      setIsLoading(true);
  
      fetch(`${SEARCH_URI}?q=${query}+in:login&page=1&per_page=50`)
        .then((resp) => resp.json())
        .then(({ items }) => {
          const options = items.map((i) => ({
            avatar_url: i.avatar_url,
            id: i.id,
            login: i.login,
          }));
  
          setOptions(options);
          setIsLoading(false);
        });
    });
  
    return (
      <AsyncTypeahead
        id="async-example"
        isLoading={isLoading}
        labelKey="login"
        minLength={3}
        onSearch={handleSearch}
        options={options}
        placeholder="Search for a Github user..."
        renderMenuItemChildren={(option, props) => (
          <div>
            <img
              alt={option.login}
              src={option.avatar_url}
              style={{
                height: '24px',
                marginRight: '10px',
                width: '24px',
              }}
            />
            <span>{option.login}</span>
          </div>
        )}
      />
    );
  };
  /* example-end */
  
  export default AsyncExample;
  