feat(adminUsers): create graphql hoc with user queries and mutations

packages/component-faraday-ui/src/helpers/withRoles.js

 import { get } from 'lodash'
-import { withProps } from 'recompose'
+import { withJournal } from 'xpub-journal'
+import { compose, withProps } from 'recompose'
 
-export default withProps(({ journal }) => ({
-  roles: Object.entries(get(journal, 'roles', {})).reduce(
-    (acc, el) => [
-      ...acc,
-      {
-        value: el[0],
-        label: el[1],
-      },
-    ],
-    [],
-  ),
-}))
+export default compose(
+  withJournal,
+  withProps(({ journal }) => ({
+    titles: get(journal, 'title', []),
+    roles: Object.entries(get(journal, 'roles', {})).reduce(
+      (acc, el) => [
+        ...acc,
+        {
+          value: el[0],
+          label: el[1],
+        },
+      ],
+      [],
+    ),
+  })),
+)

packages/component-faraday-ui/src/modals/FormModal.js

@@ -14,6 +14,8 @@ import {
   IconButton,
   RowOverrideAlert,
   ItemOverrideAlert,
+  withRoles,
+  withCountries,
 } from 'pubsweet-component-faraday-ui'
 
 import ValidatedMenuField from './ValidatedMenuField'
@@ -175,15 +177,6 @@ import ValidatedMenuField from './ValidatedMenuField'
 
 // #endregion
 
-const parseUser = ({ email, role, ...rest }) => ({
-  email,
-  username: email,
-  admin: role === 'admin',
-  editorInChief: role === 'editorInChief',
-  handlingEditor: role === 'handlingEditor',
-  ...rest,
-})
-
 const FormModal = ({
   edit,
   user,
@@ -194,23 +187,23 @@ const FormModal = ({
   subtitle,
   onConfirm,
   countries,
-  modalError,
-  isFetching,
-  handleSubmit,
   confirmText = 'OK',
   cancelText = 'Cancel',
   //
-  addUser,
+  onSubmit,
+  initialValues,
 }) => (
   <Root>
     <IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
     <H2>{title}</H2>
     <Formik
-      onSubmit={values => {
-        addUser({ variables: { user: parseUser(values) } })
-      }}
+      // onSubmit={values => {
+      //   addUser({ variables: { user: parseUser(values) } })
+      // }}
+      initialValues={initialValues}
+      onSubmit={onSubmit}
     >
-      {ceva => (
+      {({ handleSubmit }) => (
         <Fragment>
           <Row alignItems="baseline" mb={1} mt={1}>
             <Item mr={1} vertical>
@@ -258,22 +251,17 @@ const FormModal = ({
 
           <Row>
             <Button onClick={onClose}>Cancel</Button>
-            <Button onClick={ceva.handleSubmit} primary>
-              Save user
+            <Button onClick={handleSubmit} primary>
+              {confirmText}
             </Button>
           </Row>
         </Fragment>
       )}
     </Formik>
-
-    {modalError && (
-      <Row mb={1}>
-        <Text error>{modalError}</Text>
-      </Row>
-    )}
   </Root>
 )
 
+// #region FormHelpers
 const setInitialRole = a => {
   if (get(a, 'handlingEditor')) {
     return 'handlingEditor'
@@ -284,27 +272,41 @@ const setInitialRole = a => {
   return 'author'
 }
 
+const parseValues = ({ email, role, ...rest }) => ({
+  email,
+  username: email,
+  admin: role === 'admin',
+  editorInChief: role === 'editorInChief',
+  handlingEditor: role === 'handlingEditor',
+  ...rest,
+})
+// #endregion
+
 export default compose(
+  withRoles,
+  withCountries,
+  withProps(({ user, edit }) => ({
+    initialValues: {
+      ...user,
+      role: setInitialRole(user),
+    },
+    confirmText: edit ? 'EDIT USER' : 'SAVE USER',
+    title: edit ? 'Edit User' : 'Add User',
+  })),
   withHandlers({
-    onConfirm: ({ onConfirm, ...props }) => () => {
-      if (onConfirm && typeof onConfirm === 'function') {
-        onConfirm(props)
+    onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
+      if (typeof onSubmit === 'function') {
+        onSubmit({ values: parseValues(values), formProps, props })
       }
     },
     onClose: ({ onCancel, ...props }) => () => {
-      if (onCancel && typeof onCancel === 'function') {
+      if (typeof onCancel === 'function') {
         onCancel(props)
       }
       props.hideModal()
     },
   }),
-  withProps(({ user, edit }) => ({
-    initialValues: {
-      ...user,
-      role: setInitialRole(user),
-    },
-    confirmText: edit ? 'EDIT USER' : 'SAVE USER',
-  })),
+
   setDisplayName('FormModal'),
 )(FormModal)
 

packages/component-faraday-ui/src/modals/ValidatedMenuField.js

@@ -11,6 +11,7 @@ const ValidatedMenuField = ({ options, name }) => (
           form.setFieldValue(name, v)
         }}
         options={options}
+        value={field.value}
       />
     )}
   </Field>

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

@@ -6,8 +6,6 @@ import { th } from '@pubsweet/ui-toolkit'
 import { withJournal } from 'xpub-journal'
 import { compose, withHandlers, withProps } from 'recompose'
 
-import gql from 'graphql-tag'
-import { graphql } from 'react-apollo'
 import {
   Row,
   Text,
@@ -21,36 +19,8 @@ import {
   withPagination,
 } from 'pubsweet-component-faraday-ui'
 
-import { AddUser } from './'
-import { updateUserStatus, onSubmit } from './utils'
-
-const GET_USERS = gql`
-  {
-    users {
-      id
-      admin
-      email
-      country
-      username
-      lastName
-      isActive
-      firstName
-      affiliation
-      isConfirmed
-      editorInChief
-      handlingEditor
-    }
-  }
-`
-
-const ADD_USER = gql`
-  mutation addUser($user: UserInput) {
-    createUser(input: $user) {
-      id
-      email
-    }
-  }
-`
+import { updateUserStatus } from './utils'
+import { OpenUserForm, withUsersGQL } from './'
 
 const Users = ({
   page,
@@ -82,11 +52,9 @@ const Users = ({
         >
           Admin Dashboard
         </ActionLink>
-        <AddUser
-          addUser={addUser}
-          form="add-user"
-          getUsers={getUsers}
+        <OpenUserForm
           modalKey="addUser"
+          onSubmit={v => console.log('GQL add mutation here:', v)} // eslint-disable-line
         />
       </Item>
 
@@ -135,11 +103,10 @@ const Users = ({
 
             <HiddenCell>
               <Item alignItems="center" justify="flex-end">
-                <AddUser
+                <OpenUserForm
                   edit
-                  getUsers={getUsers}
                   modalKey={`edit-${user.id}`}
-                  onSubmit={onSubmit}
+                  onSubmit={v => console.log('GQL edit mutation here:', v)} // eslint-disable-line
                   user={user}
                 />
                 <OpenModal
@@ -174,8 +141,7 @@ const Users = ({
 export default compose(
   withJournal,
   withFetching,
-  graphql(GET_USERS),
-  graphql(ADD_USER, { name: 'addUser' }),
+  withUsersGQL,
   withProps(({ journal: { roles = {} }, data: { users } }) => ({
     roles: Object.keys(roles),
     items: users,

packages/components-faraday/src/components/Admin/AddUser.js → packages/components-faraday/src/components/Admin/OpenUserForm.js

 import React from 'react'
-import { get } from 'lodash'
-import { compose } from 'recompose'
-import { withJournal } from 'xpub-journal'
 
 import {
   OpenModal,
   ActionLink,
   IconButton,
-  withRoles,
-  withFetching,
-  withCountries,
 } from 'pubsweet-component-faraday-ui'
 
-const AddUser = ({ edit, journal, addUser, ...rest }) => (
+const OpenUserForm = ({ edit, user, onSubmit, modalKey }) => (
   <OpenModal
-    addUser={addUser}
     edit={edit}
     formModal
-    title={edit ? 'Edit User' : 'Add User'}
-    titles={get(journal, 'title', [])}
-    {...rest}
+    modalKey={modalKey}
+    onSubmit={onSubmit}
+    user={user}
   >
     {showModal =>
       edit ? (
@@ -33,6 +26,4 @@ const AddUser = ({ edit, journal, addUser, ...rest }) => (
   </OpenModal>
 )
 
-export default compose(withJournal, withCountries, withRoles, withFetching)(
-  AddUser,
-)
+export default OpenUserForm

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

-export { default as AddUser } from './AddUser'
+export { default as withUsersGQL } from './withUsersGQL'
+
 export { default as AdminUsers } from './AdminUsers'
 export { default as AdminRoute } from './AdminRoute'
+export { default as OpenUserForm } from './OpenUserForm'
 export { default as AdminDashboard } from './AdminDashboard'

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

 import { pick, omit, isBoolean, replace } from 'lodash'
-import { handleError } from 'pubsweet-component-faraday-ui'
-import { update, create } from 'pubsweet-client/src/helpers/api'
+import { update } from 'pubsweet-client/src/helpers/api'
 
 const generatePasswordHash = () =>
   Array.from({ length: 4 }, () =>
@@ -85,39 +84,3 @@ export const updateUserStatus = user => {
   const updatedUser = toggleUserStatus(user)
   return update(`/users/${user.id}`, parseUpdateUser(updatedUser))
 }
-
-export const onSubmit = (
-  values,
-  dispatch,
-  { edit, setFetching, getUsers, hideModal, setModalError },
-) => {
-  setFetching(true)
-  if (!edit) {
-    const newValues = setAdmin(values)
-    return create('/users', newValues)
-      .then(r => {
-        create(`/emails`, {
-          email: r.email,
-          type: 'invite',
-          role: values.role,
-        })
-        setFetching(false)
-        getUsers()
-        hideModal()
-      })
-      .catch(err => {
-        setFetching(false)
-        handleError(setModalError)(err)
-      })
-  }
-  return update(`/users/${values.id}`, parseUpdateUser(values))
-    .then(() => {
-      setFetching(false)
-      getUsers()
-      hideModal()
-    })
-    .catch(err => {
-      setFetching(false)
-      handleError(setModalError)(err)
-    })
-}

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

+import gql from 'graphql-tag'
+import { compose } from 'recompose'
+import { graphql } from 'react-apollo'
+
+const userFragment = gql`
+  fragment userDetails on User {
+    id
+    admin
+    email
+    title
+    country
+    username
+    lastName
+    isActive
+    firstName
+    affiliation
+    isConfirmed
+    editorInChief
+    handlingEditor
+  }
+`
+
+const getUsersQuery = gql`
+  {
+    users {
+      ...userDetails
+    }
+  }
+  ${userFragment}
+`
+
+const addUserMutation = gql`
+  mutation addUser($user: UserInput) {
+    createUser(input: $user) {
+      ...userDetails
+    }
+  }
+  ${userFragment}
+`
+
+const updateUserMutation = gql`
+  mutation updateUser($id: ID, $input: UserInput) {
+    updateUser(id: $id, input: $input) {
+      ...userDetails
+    }
+  }
+  ${userFragment}
+`
+
+export default compose(
+  graphql(getUsersQuery),
+  graphql(addUserMutation, { name: 'addUser' }),
+  graphql(updateUserMutation, { name: 'updateUser' }),
+)