import React from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";
import Person from "./Person";
import AddFace from "./AddFace";

import LIST_PEOPLE from "../queries/list_people";

class Gallery extends React.Component {
  render() {
    return (
      <div className="row">
        <Query query={LIST_PEOPLE}>
          {({ loading, error, data }) => {
            if (loading) return null;
            if (error) return `Error!: ${error}`;

            return data.people.map((person, key) => (<Person person={person} key={key} />));
          }}
        </Query>
        <AddFace />
      </div>
    );
  }
}

export default Gallery;