diff options
Diffstat (limited to 'finished-application/frontend/components/Permissions.js')
| -rw-r--r-- | finished-application/frontend/components/Permissions.js | 172 |
1 files changed, 85 insertions, 87 deletions
diff --git a/finished-application/frontend/components/Permissions.js b/finished-application/frontend/components/Permissions.js index 52a6acf..4b08c39 100644 --- a/finished-application/frontend/components/Permissions.js +++ b/finished-application/frontend/components/Permissions.js @@ -1,57 +1,84 @@ -import React from 'react'; import { Query, Mutation } from 'react-apollo'; -import PropTypes from 'prop-types'; -import gql from 'graphql-tag'; import Error from './ErrorMessage'; -import SickButton from './styles/SickButton'; +import gql from 'graphql-tag'; import Table from './styles/Table'; +import SickButton from './styles/SickButton'; +import PropTypes from 'prop-types'; -const ALL_USERS_QUERY = gql` - query { - users { +const possiblePermissions = [ + 'ADMIN', + 'USER', + 'ITEMCREATE', + 'ITEMUPDATE', + 'ITEMDELETE', + 'PERMISSIONUPDATE', +]; + +const UPDATE_PERMISSIONS_MUTATION = gql` + mutation updatePermissions($permissions: [Permission], $userId: ID!) { + updatePermissions(permissions: $permissions, userId: $userId) { id + permissions name email - permissions } } `; -const UPDATE_PERMISSIONS_MUTATION = gql` - mutation updatePermissions($permissions: [Permission], $userId: ID!) { - updatePermissions(permissions: $permissions, userId: $userId) { +const ALL_USERS_QUERY = gql` + query { + users { id - permissions name email + permissions } } `; -const possiblePermissions = [ - 'ADMIN', - 'USER', - 'ITEMCREATE', - 'ITEMUPDATE', - 'ITEMDELETE', - 'PERMISSIONUPDATE', -]; +const Permissions = props => ( + <Query query={ALL_USERS_QUERY}> + {({ data, loading, error }) => ( + <div> + <Error 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>👇🏻</th> + </tr> + </thead> + <tbody>{data.users.map(user => <UserPermissions user={user} key={user.id} />)}</tbody> + </Table> + </div> + </div> + )} + </Query> +); -class User extends React.Component { +class UserPermissions extends React.Component { static propTypes = { user: PropTypes.shape({ - permissions: PropTypes.array.isRequired, - id: PropTypes.string.isRequired, + name: PropTypes.string, + email: PropTypes.string, + id: PropTypes.string, + permissions: PropTypes.array, }).isRequired, }; state = { permissions: this.props.user.permissions, }; - handlePermissionsChange = e => { + handlePermissionChange = (e) => { const checkbox = e.target; + // take a copy of the current permissions let updatedPermissions = [...this.state.permissions]; + // figure out if we need to remove or add this permission if (checkbox.checked) { - // add it in + // add it in! updatedPermissions.push(checkbox.value); } else { updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value); @@ -59,75 +86,46 @@ class User extends React.Component { this.setState({ permissions: updatedPermissions }); }; render() { - const { user } = this.props; + const user = this.props.user; return ( - <Mutation mutation={UPDATE_PERMISSIONS_MUTATION}> + <Mutation + mutation={UPDATE_PERMISSIONS_MUTATION} + variables={{ + permissions: this.state.permissions, + userId: this.props.user.id, + }} + > {(updatePermissions, { loading, error }) => ( - <tr key={user.id} className="user"> - <Error error={error} /> - <td>{user.name}</td> - <td>{user.email}</td> - {possiblePermissions.map(permission => ( + <> + {error && <tr><td colspan="8"><Error 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" + checked={this.state.permissions.includes(permission)} + value={permission} + onChange={this.handlePermissionChange} + /> + </label> + </td> + ))} <td> - <label key={permission} htmlFor={`${user.id}-permission-${permission}`}> - <input - type="checkbox" - checked={this.state.permissions.includes(permission)} - name={`permission-${permission}`} - id={`${user.id}-permission-${permission}`} - onChange={this.handlePermissionsChange} - value={permission} - /> - </label> + <SickButton type="button" disabled={loading} onClick={updatePermissions}> + Updat{loading ? 'ing' : 'e'} + </SickButton> </td> - ))} - <td> - <SickButton - type="button" - disabled={loading} - onClick={async () => { - await updatePermissions({ - variables: { - permissions: this.state.permissions, - userId: this.props.user.id, - }, - }); - }} - > - Updat{loading ? 'ing' : 'e'} - </SickButton> - </td> - </tr> - )} + </tr> + </> + ) + } </Mutation> ); } } -const Permissions = () => ( - <Query query={ALL_USERS_QUERY}> - {({ data, error, loading }) => { - if (loading) return <div>Loading</div>; - if (error) return <Error error={error} />; - return ( - <div> - <h1>Manage User Permissions</h1> - <Table> - <thead> - <tr> - <th>Name</th> - <th>Email</th> - {possiblePermissions.map(p => <th>{p}</th>)} - <th>👇🏻</th> - </tr> - </thead> - <tbody>{data.users.map(user => <User key={user.id} user={user} />)}</tbody> - </Table> - </div> - ); - }} - </Query> -); - export default Permissions; -export { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION }; |