import {graphql} from 'react-apollo'
import uploadsQuery from '../queries/uploads'

const UploadList = ({data: {uploads}}) => {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Path</th>
          </tr>
        </thead>
        <tbody>
          {uploads.map(({id, name, type, size, path}) => (
            <tr key={id}>
              <td>{name}</td>
              <td>{type}</td>
              <td>{size}</td>
              <td>{path}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <style jsx>{`
        div {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar;
        }
        table {
          border-spacing: 0;
          padding: 1em 0;
          text-align: left;
          font-size: 90%;
        }
        th,
        td {
          padding: 0.3em 0.5em;
        }
        td {
          vertical-align: top;
          white-space: nowrap;
        }
      `}</style>
    </div>
  )
}

export default graphql(uploadsQuery)(UploadList)