<div id="root"></div>

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px -8px 0;
  li {
    height: 20vh;
    flex-grow: 1;
    margin: 0 8px 8px 0;
  }
  li:last-child {
    flex-grow: 10;
  }
  img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    border-radius: 4px;
  }
}

body {
  margin: 2rem;
}

const clientID =
  "8e31e45f4a0e8959d456ba2914723451b8262337f75bcea2e04ae535491df16d";

const { useState, useEffect, useRef } = React;

const simpleGet = options => {
  superagent.get(options.url).then(function(res) {
    if (options.onSuccess) options.onSuccess(res);
  });
};

const App = () => {
  let [photos, setPhotos] = useState([]);
  let [query, setQuery] = useState("");
  const queryInput = useRef(null);

  const numberOfPhotos = 10;
  const url =
    "https://api.unsplash.com/photos/random/?count=" +
    numberOfPhotos +
    "&client_id=" +
    clientID;

  useEffect(() => {
    const photosUrl = query ? `${url}&query=${query}` : url;

    simpleGet({
      url: photosUrl,
      onSuccess: res => {
        setPhotos(res.body);
      }
    });
  }, [query, url]);

  const searchPhotos = e => {
    e.preventDefault();
    setQuery(queryInput.current.value);
  };

  return (
    <div className="box">
      <form
        id="unsplash-search"
        className="unsplash-search form"
        onSubmit={searchPhotos}
      >
        <label>
          Search Photos on Unsplash
          <input
            ref={queryInput}
            placeholder="Try 'dogs' or 'coffee'!"
            type="search"
            className="input"
            defaultValue=""
            style={{ marginBottom: 20 }}
          />
        </label>
      </form>

      <ul className="photo-grid">
        {photos.map(photo => {
          return (
            <li key={photo.id}>
              <img
                src={photo.urls.regular}
                onSuccessfulClipboardCopy={() => {
                  // showUserMessage();
                  // pingUnsplash(photo.links.download_location);
                }}
              />
            </li>
          );
        })}
      </ul>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));