text: import React from 'react';
  import { Query, Mutation } from 'react-apollo';
  import gql from 'graphql-tag';
  
  import ErrorMessage from './ErrorMessage';
  import Table from './styles/Table';
  import SickButton from './styles/SickButton';
  
  const possiblePermissions = [
    'ADMIN',
    'USER',
    'ITEMCREATE',
    'ITEMUPDATE',
    'ITEMDELETE',
    'PERMISSIONUPDATE'
  ];
  
  const UPDATE_PERMISSIONS_MUTATION = gql`
    mutation UPDATE_PERMISSIONS_MUTATION(
      $permissions: [Permission]
      $userId: ID!
    ) {
      updatePermissions(permissions: $permissions, userId: $userId) {
        id
        permissions
        name
        email
      }
    }
  `;
  
  const ALL_USERS_QUERY = gql`
    query {
      users {
        id
        name
        email
        permissions
      }
    }
  `;
  
  const Permissions = () => (
    <Query query={ALL_USERS_QUERY}>
      {({ data, error }) => (
        <div>
          <ErrorMessage error={error} />
          <div>
            <h2>Manage Permissions</h2>
            <Table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  {possiblePermissions.map(permission => (
                    <th key={permission}>{permission}</th>
                  ))}
                  <th>
                    <span aria-label="finger" role="img">
                      👇
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody>
                {data.users.map(user => (
                  <UserPermissions key={user.id} user={user} />
                ))}
              </tbody>
            </Table>
          </div>
        </div>
      )}
    </Query>
  );
  
  class UserPermissions extends React.Component {
    state = {
      permissions: this.props.user.permissions // eslint-disable-line react/destructuring-assignment
    };
  
    handlePermissionChange = e => {
      const checkbox = e.target;
      const { permissions } = this.state;
  
      let updatedPermissions = [...permissions];
      if (checkbox.checked) {
        updatedPermissions.push(checkbox.value);
      } else {
        updatedPermissions = updatedPermissions.filter(
          permission => permission !== checkbox.value
        );
      }
  
      this.setState({ permissions: updatedPermissions });
    };
  
    render() {
      const { user } = this.props;
      const { permissions } = this.state;
  
      return (
        <Mutation
          mutation={UPDATE_PERMISSIONS_MUTATION}
          variables={{
            permissions,
            userId: user.id
          }}
        >
          {(updatePermissions, { loading, error }) => (
            <>
              {error && (
                <tr>
                  <td colSpan="8">
                    <ErrorMessage error={error} />
                  </td>
                </tr>
              )}
              <tr>
                <td>{user.name}</td>
                <td>{user.email}</td>
                {possiblePermissions.map(permission => (
                  <td key={permission}>
                    <label htmlFor={`${user.id}-permission-${permission}`}>
                      <input
                        id={`${user.id}-permission-${permission}`}
                        type="checkbox"
                        value={permission}
                        onChange={this.handlePermissionChange}
                        checked={permissions.includes(permission)}
                      />
                    </label>
                  </td>
                ))}
                <td>
                  <SickButton
                    type="button"
                    disabled={loading}
                    onClick={updatePermissions}
                  >
                    Updat{loading ? 'ing' : 'e'}
                  </SickButton>
                </td>
              </tr>
            </>
          )}
        </Mutation>
      );
    }
  }
  
  export default Permissions;
  