refactor(component): add link to edit and extract utils

packages/components-faraday/src/components/Admin/AddEditUser.js

 import React from 'react'
-import { get, map } from 'lodash'
+import { get } from 'lodash'
 import { connect } from 'react-redux'
 import { reduxForm, SubmissionError } from 'redux-form'
 import styled from 'styled-components'
@@ -13,13 +13,12 @@ import { compose, withProps, withHandlers, withState } from 'recompose'
 
 import AddUserForm from './AddUserForm'
 import EditUserForm from './EditUserForm'
-
-const getRoleOptions = journal =>
-  map(journal.roles, (value, key) => ({ label: value, value: key }))
+import { getRoleOptions, setAdmin, parseUpdateUser } from './utils'
 
 const onSubmit = (values, dispatch, { isEdit, history }) => {
   if (!isEdit) {
-    return create('/users/invite', values)
+    const newValues = setAdmin(values)
+    return create('/users/invite', newValues)
       .then(r => history.push('/admin/users'))
       .catch(error => {
         const err = get(error, 'response')
@@ -32,7 +31,7 @@ const onSubmit = (values, dispatch, { isEdit, history }) => {
       })
   }
 
-  return update(`/users/${values.id}`, values)
+  return update(`/users/${values.id}`, parseUpdateUser(values))
     .then(() => {
       history.push('/admin/users')
     })
@@ -47,7 +46,7 @@ const onSubmit = (values, dispatch, { isEdit, history }) => {
     })
 }
 
-const AddEditUser = ({ handleSubmit, journal, isEdit, user }) => (
+const AddEditUser = ({ handleSubmit, journal, isEdit, user, history }) => (
   <Root>
     <FormContainer onSubmit={handleSubmit}>
       {isEdit ? (
@@ -60,6 +59,7 @@ const AddEditUser = ({ handleSubmit, journal, isEdit, user }) => (
         <AddUserForm journal={journal} roles={getRoleOptions(journal)} />
       )}
       <Row>
+        <Button onClick={history.goBack}>Back</Button>
         <Button primary type="submit">
           Save user
         </Button>

packages/components-faraday/src/components/Admin/AdminUsers.js

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { Icon, Menu } from '@pubsweet/ui'
 import { actions } from 'pubsweet-client'
 import { ConnectPage } from 'xpub-connect'
+import { withJournal } from 'xpub-journal'
 import { withRouter } from 'react-router-dom'
 import { compose, withState, withHandlers } from 'recompose'
 
@@ -13,13 +14,16 @@ import { Pagination } from './'
 const TableRow = ({
   toggleUser,
   selected,
+  id,
   email,
   roles,
   username,
+  title = '',
   firstName = '',
   lastName = '',
   affiliation,
   isConfirmed,
+  roleOptions,
 }) => (
   <Row>
     <td>
@@ -28,10 +32,20 @@ const TableRow = ({
     <td>{email}</td>
     <td>{`${firstName} ${lastName}`}</td>
     <td>{affiliation}</td>
-    <td>{roles && roles.map(r => <div key={r}>{r}</div>)}</td>
-    <Status>
-      <span>{isConfirmed ? 'Confirmed' : 'Invited'}</span>
-    </Status>
+    <td>
+      {roles &&
+        roles.map((r, i, arr) => (
+          <Role key={r}>{`${roleOptions[r]}${
+            i !== arr.length - 1 ? ', ' : ''
+          }`}</Role>
+        ))}
+    </td>
+    <td>
+      <Tag>{isConfirmed ? 'Confirmed' : 'Invited'}</Tag>
+    </td>
+    <td>
+      <Action href={`/admin/users/edit/${id}`}>Edit</Action>
+    </td>
   </Row>
 )
 
@@ -44,13 +58,17 @@ const Users = ({
   page,
   itemsPerPage,
   history,
+  journal,
 }) => (
   <div>
     <Header>
-      <span>Users</span>
+      <BreadCrumbs>
+        <span>Admin Dashboard</span>
+        <span>Users</span>
+      </BreadCrumbs>
       <AddButton onClick={() => history.push('/admin/users/add')}>
         <Icon color="#667080">plus-circle</Icon>
-        Add User
+        &nbsp; Add User
       </AddButton>
     </Header>
     <SubHeader>
@@ -99,13 +117,19 @@ const Users = ({
           <td>Email</td>
           <td>Full name</td>
           <td>Affiliation</td>
-          <td>Roles</td>
+          <td width="200">Roles</td>
           <td>Status</td>
+          <td width="50" />
         </tr>
       </thead>
       <tbody>
         {users.map(u => (
-          <TableRow key={u.id} {...u} toggleUser={toggleUser(u)} />
+          <TableRow
+            key={u.id}
+            {...u}
+            roleOptions={journal.roles}
+            toggleUser={toggleUser(u)}
+          />
         ))}
       </tbody>
     </Table>
@@ -115,6 +139,7 @@ const Users = ({
 export default compose(
   ConnectPage(() => [actions.getUsers()]),
   withRouter,
+  withJournal,
   connect(state => ({ currentUsers: get(state, 'users.users') })),
   withState('users', 'setUsers', props =>
     props.currentUsers.map(u => ({ ...u, selected: false })),
@@ -160,13 +185,24 @@ const Header = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+`
 
+const BreadCrumbs = styled.div`
   & span {
-    font-family: Helvetica;
-    font-size: 24px;
-    font-weight: bold;
+    font-size: 17px;
     text-align: left;
     color: #667080;
+
+    &:after {
+      content: '>';
+      padding: 0 10px;
+    }
+    &:last-child {
+      font-size: 24px;
+      font-weight: bold;
+      &:after {
+        content: '';
+    }
   }
 `
 
@@ -196,7 +232,7 @@ const Table = styled.table`
   border-spacing: 0;
   border-collapse: collapse;
   margin-top: 10px;
-  width: 100vw;
+  width: 100%;
 
   & thead tr {
     height: 40px;
@@ -216,19 +252,37 @@ const Row = styled.tr`
   font-size: 14px;
   height: 40px;
   text-align: left;
+  &:hover {
+    background-color: #e6e7e9;
+    a {
+      display: block;
+    }
+  }
 `
 
-const Status = styled.td`
-  & span {
-    border: solid 1px #667080;
-    text-transform: uppercase;
-    font-family: Helvetica;
-    font-size: 12px;
-    font-weight: bold;
-    text-align: left;
-    color: #667080;
-    padding: 2px 10px;
-  }
+const Tag = styled.span`
+  border: solid 1px #667080;
+  text-transform: uppercase;
+  font-family: Helvetica;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  color: #667080;
+  padding: 2px 10px;
+  margin-right: 5px;
+`
+
+const Role = styled.span`
+  height: 17px;
+  font-size: 14px;
+  text-align: left;
+  color: #667080;
+  text-transform: uppercase;
+`
+
+const Action = styled.a`
+  color: #667080;
+  display: none;
 `
 
 const Input = styled.input`

packages/components-faraday/src/components/Admin/utils.js

+import { pick, map } from 'lodash'
+
+export const getRoleOptions = journal =>
+  map(journal.roles, (value, key) => ({ label: value, value: key }))
+
+export const setAdmin = values => {
+  const newValues = { ...values }
+  if (newValues.roles && newValues.roles.includes('admin')) {
+    newValues.admin = true
+  } else {
+    newValues.admin = false
+  }
+
+  return newValues
+}
+
+export const parseUpdateUser = values => {
+  const valuesToSave = [
+    'admin',
+    'firstName',
+    'lastName',
+    'affiliation',
+    'title',
+    'roles',
+    'rev',
+  ]
+
+  const newValues = setAdmin(values)
+  return pick(newValues, valuesToSave)
+}

packages/xpub-faraday/app/config/journal/title.js

@@ -23,8 +23,4 @@ export default [
     label: 'Professor',
     value: 'prof',
   },
-  {
-    label: 'Other',
-    value: 'other',
-  },
 ]