refactor: create entities component for groups and users

packages/brokeneck-react/src/components/Admin.js

@@ -3,10 +3,9 @@ import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
 import { Box, CircularProgress, makeStyles } from '@material-ui/core'
 import { useQuery } from 'graphql-hooks'
 
-import { LOAD_ROOT } from '../graphql'
+import { LOAD_ROOT, LOAD_USERS, LOAD_GROUPS } from '../graphql'
 
-import Users from './Users'
-import Groups from './Groups'
+import Entities from './Entities'
 import User from './User'
 import Group from './Group'
 import Navigation from './Navigation'
@@ -44,13 +43,23 @@ export default function Admin() {
               <Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
               <Redirect from="/" exact to="/users" />
               <Route path="/users" exact>
-                <Users />
+                <Entities
+                  entityName="User"
+                  entitiesName="Users"
+                  entitiesKey="users"
+                  query={LOAD_USERS}
+                />
               </Route>
               <Route path="/users/:userId">
                 {({ match }) => <User userId={match.params.userId} />}
               </Route>
               <Route path="/groups" exact>
-                <Groups />
+                <Entities
+                  entityName="Group"
+                  entitiesName="Groups"
+                  entitiesKey="groups"
+                  query={LOAD_GROUPS}
+                />
               </Route>
               <Route path="/groups/:groupId">
                 {({ match }) => <Group groupId={match.params.groupId} />}

packages/brokeneck-react/src/components/Entities.js

@@ -0,0 +1,164 @@
+import React from 'react'
+import T from 'prop-types'
+import {
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  Link,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from '@material-ui/core'
+import { Link as RouterLink, useRouteMatch } from 'react-router-dom'
+import { useQuery } from 'graphql-hooks'
+import startCase from 'lodash.startcase'
+
+import useCreateUserDialog from '../hooks/useCreateUserDialog'
+import useFields, { TYPE_NAMES } from '../hooks/useFields'
+import usePagination from '../hooks/usePagination'
+import useSearch from '../hooks/useSearch'
+
+import Square from './Square'
+
+const useStyles = makeStyles(theme => ({
+  spacing: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > * + *': {
+      marginLeft: theme.spacing(2)
+    }
+  },
+  right: {
+    marginLeft: 'auto'
+  }
+}))
+
+export default function Entities({
+  query,
+  entityName,
+  entitiesName,
+  entitiesKey
+}) {
+  const match = useRouteMatch()
+  const classes = useStyles()
+  const fields = useFields(entityName)
+  const { search, Search } = useSearch()
+
+  const {
+    pageSize,
+    currentToken,
+    useUpdateToken,
+    useTablePagination
+  } = usePagination({ pageSizeOptions: [2, 3, 4] }) // TODO: temp small page sizes for testing
+  // console.log(fields, 'fields')
+  // console.log(query(fields.all), 'query')
+  const { data, loading, refetch: loadEntities } = useQuery(query(fields.all), {
+    variables: {
+      pageNumber: currentToken,
+      pageSize,
+      search
+    }
+  })
+
+  const [dialog, openDialog] = useCreateUserDialog(loadEntities)
+  // console.log(data, 'data')
+  // console.log(entitiesKey, 'entitiesKey')
+  useUpdateToken(data?.[entitiesKey].nextPage)
+  // console.log('this')
+  const tablePagination = useTablePagination(data?.[entitiesKey])
+
+  return (
+    <>
+      {dialog}
+      <Square mb={3}>
+        <Box className={classes.spacing} mb={3}>
+          <Button variant="contained" color="primary" onClick={openDialog}>
+            {`Create ${entityName}`}
+          </Button>
+          {Search}
+          <div className={classes.right}>
+            <IconButton onClick={loadEntities} title={`reload ${entitiesName}`}>
+              <Typography>
+                <span role="img" aria-label={`reload ${entitiesName}`}>
+                  🔃
+                </span>
+              </Typography>
+            </IconButton>
+          </div>
+        </Box>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                {fields.all.map(field => (
+                  <TableCell
+                    align={
+                      fields.metadata[field].type === 'checkbox'
+                        ? 'center'
+                        : undefined
+                    }
+                    key={field}
+                  >
+                    {startCase(field)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data?.[entitiesKey].data.map(user => (
+                <TableRow key={user[fields.id]}>
+                  {fields.all.map((field, index) => (
+                    <TableCell key={field}>
+                      {!index ? (
+                        <Link
+                          color="secondary"
+                          component={RouterLink}
+                          to={`${match.url}/${user[fields.id]}`}
+                        >
+                          <Typography>
+                            {fields.format(field, user[field])}
+                          </Typography>
+                        </Link>
+                      ) : (
+                        <Typography
+                          align={
+                            fields.isType(field, TYPE_NAMES.Boolean)
+                              ? 'center'
+                              : undefined
+                          }
+                        >
+                          {fields.format(field, user[field])}
+                        </Typography>
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+              {loading && (
+                <TableRow>
+                  <TableCell colSpan={fields.all.length}>
+                    <CircularProgress />
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        {tablePagination}
+      </Square>
+    </>
+  )
+}
+
+Entities.propTypes = {
+  query: T.func.isRequired,
+  entityName: T.string.isRequired,
+  entitiesName: T.string.isRequired,
+  entitiesKey: T.string.isRequired
+}