Merge branch 'master' into randyridge/our

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 };