AutoMate/frontend/components/ProjectList.js

import styled from 'styled-components'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'

const StyledProjectList = styled.div`
  font-size: 90%;
`

const QUERY_PROJECTS = gql`
  query QUERY_PROJECTS {
    projects {
      id
      name
      abbreviation
      description
      files {
        id
        path
        name
        description
        filename
        mimetype
        size
      }
      versions {
        id
        name
        changes
        date
      }
    }
  }
`

class ProjectList extends React.Component {
  selectItem = event => {
    console.log(event.target)
  }

  render() {
    return (
      <Query query={QUERY_PROJECTS}>
        {({ data, error, loading }) => {
          const { projects } = data
          return (
            <StyledProjectList>
              <h2>Project list</h2>
              {data.length ? (
                <ul>
                  {projects.map(project => (
                    <li key={project.id} onClick={this.selectItem}>{project.name}</li>
                  ))}
                </ul>
              ) : (
                  <p>No projects found.</p>
                )}
              <button>+</button>
            </StyledProjectList>
          )
        }}
      </Query>
    )
  }
}

export default ProjectList
export { QUERY_PROJECTS }