Display Staff list in Admin - part of unmarc/unmarc_project#6

src/admin/StaffAdmin.js

@@ -1,11 +1,16 @@
 import React from 'react'
+
 import { wrapLayout } from '../common/components/Layout'
+import StaffList from './StaffList'
 
 
 export default function StaffAdmin() {
     return wrapLayout(
       <div>
+          <br />
           <h2>Staff</h2>
+          <br />
+          <StaffList />
       </div>
     )
 }

src/admin/StaffList.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import gql from 'graphql-tag'
+import { useQuery } from '@apollo/react-hooks'
+import Table from 'react-bootstrap/Table'
+import Badge from 'react-bootstrap/Badge'
+
+import { AuthContext } from '../auth'
+import UhOhErrorAlert from '../common/components/UhOhErrorAlert'
+
+
+const GET_STAFF = gql`
+{
+  allStaff {
+    user {
+      id
+      username
+      name
+      email
+      dateJoined
+    }
+    isLibraryAdmin
+    branches {
+      name
+    }
+  }
+}
+`
+
+export default function StaffList() {
+    const { loading, error, data } = useQuery(GET_STAFF)
+    const { userInfo } = React.useContext(AuthContext)
+
+    if (loading) return <span>Loading...</span>
+    if (error) return <UhOhErrorAlert />
+
+    return (
+      <Table>
+          <thead>
+          <tr>
+              <th>Username</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Access</th>
+              <th>Branch</th>
+              <th>Added on</th>
+              <th>Actions</th>
+          </tr>
+          </thead>
+          <tbody>
+          {
+              data.allStaff.map(staff => (
+                <tr key={ staff.user.id }>
+                    <td>
+                        { staff.user.username } &nbsp;&nbsp;&nbsp;
+                        { userInfo.username === staff.user.username && <Badge variant="info">You</Badge> }
+                    </td>
+                    <td>
+                        { staff.user.name }
+                    </td>
+                    <td>
+                        { staff.user.email || '-' }
+                    </td>
+                    <td>
+                        { staff.isLibraryAdmin ? 'Administrator' : 'Staff' }
+                    </td>
+                    <td>
+                        { staff.branches.map(branch => branch.name).join(', ') }
+                    </td>
+                    <td>
+                        { new Date(staff.user.dateJoined).toDateString().split(' ').slice(1).join(' ') }
+                    </td>
+                    <td>...</td>
+                </tr>
+              ))
+          }
+          </tbody>
+      </Table>
+    )
+}

src/common/apolloLinks.js

@@ -21,7 +21,10 @@ export const csrfHeaderLink = setContext((_, { headers }) => {
 
 export const createErrorLink = (on403Callback) =>
   // When 403 Forbidden received since this app is entirely logged-in only
-  onError(({ networkError }) => {
-        if (networkError.statusCode === 403) on403Callback()
+  onError(({ graphQLErrors, networkError }) => {
+        if (networkError && networkError.statusCode === 403) on403Callback()
+        if (graphQLErrors) {
+            graphQLErrors.map(error => console.error(error.message))
+        }
     }
   )

src/common/components/UhOhErrorAlert.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import Alert from 'react-bootstrap/Alert'
+
+export default function UhOhErrorAlert() {
+    return <Alert variant="danger">Uh oh! Something didn't quite go as expected.</Alert>
+}