summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/Permissions.js
diff options
context:
space:
mode:
Diffstat (limited to 'finished-application/frontend/components/Permissions.js')
-rw-r--r--finished-application/frontend/components/Permissions.js133
1 files changed, 0 insertions, 133 deletions
diff --git a/finished-application/frontend/components/Permissions.js b/finished-application/frontend/components/Permissions.js
deleted file mode 100644
index 52a6acf..0000000
--- a/finished-application/frontend/components/Permissions.js
+++ /dev/null
@@ -1,133 +0,0 @@
-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 Table from './styles/Table';
-
-const ALL_USERS_QUERY = gql`
- query {
- users {
- id
- name
- email
- permissions
- }
- }
-`;
-
-const UPDATE_PERMISSIONS_MUTATION = gql`
- mutation updatePermissions($permissions: [Permission], $userId: ID!) {
- updatePermissions(permissions: $permissions, userId: $userId) {
- id
- permissions
- name
- email
- }
- }
-`;
-
-const possiblePermissions = [
- 'ADMIN',
- 'USER',
- 'ITEMCREATE',
- 'ITEMUPDATE',
- 'ITEMDELETE',
- 'PERMISSIONUPDATE',
-];
-
-class User extends React.Component {
- static propTypes = {
- user: PropTypes.shape({
- permissions: PropTypes.array.isRequired,
- id: PropTypes.string.isRequired,
- }).isRequired,
- };
- state = {
- permissions: this.props.user.permissions,
- };
- handlePermissionsChange = e => {
- const checkbox = e.target;
- let updatedPermissions = [...this.state.permissions];
- if (checkbox.checked) {
- // add it in
- updatedPermissions.push(checkbox.value);
- } else {
- updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value);
- }
- this.setState({ permissions: updatedPermissions });
- };
- render() {
- const { user } = this.props;
- return (
- <Mutation mutation={UPDATE_PERMISSIONS_MUTATION}>
- {(updatePermissions, { loading, error }) => (
- <tr key={user.id} className="user">
- <Error error={error} />
- <td>{user.name}</td>
- <td>{user.email}</td>
- {possiblePermissions.map(permission => (
- <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>
- </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>
- )}
- </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 };