feat(adminUsers): add error handling

packages/component-faraday-ui/src/index.js

@@ -51,6 +51,7 @@ export { default as EditorialReportCard } from './EditorialReportCard'
 export { default as ReviewerReportAuthor } from './ReviewerReportAuthor'
 export { default as PasswordValidation } from './PasswordValidation'
 export { default as MenuCountry } from './MenuCountry'
+export { default as ValidatedMenuField } from './ValidatedMenuField'
 
 export { SubmitRevision } from './submissionRevision'
 

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

-import React, { Fragment } from 'react'
-import { compose, withStateHandlers } from 'recompose'
-
-const MyMenu = ({ open, toggleMenu, field, form }) => (
-  <div onClick={toggleMenu}>
-    Click to open
-    {open && (
-      <Fragment>
-        <span onClick={() => form.setFieldValue(field.name, 1)}>Option 1</span>
-        <span onClick={() => form.setFieldValue(field.name, 2)}>Option 2</span>
-        <span onClick={() => form.setFieldValue(field.name, 3)}>Option 3</span>
-      </Fragment>
-    )}
-  </div>
-)
-
-export default compose(
-  withStateHandlers(
-    { open: false },
-    {
-      toggleMenu: ({ open }) => () => ({
-        open: !open,
-      }),
-    },
-  ),
-)(MyMenu)

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

@@ -6,6 +6,11 @@ import { MultiAction, SingleActionModal, FormModal } from './'
 const OpenModal = ({ showModal, children }) => children(showModal)
 
 const selectModalComponent = props => {
+  if (props.component) {
+    return {
+      modalComponent: props.component,
+    }
+  }
   if (props.single) {
     return {
       modalComponent: SingleActionModal,

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

 export { default as OpenModal } from './OpenModal'
-export { default as FormModal } from './FormModal'
 export { default as MultiAction } from './MultiAction'
 export { default as SingleActionModal } from './SingleActionModal'

packages/component-user/resolvers.js

-const Chance = require('chance')
-const { omit } = require('lodash')
 const Notification = require('./notifications/notification')
 
-const chance = new Chance()
+const { parseUserFromAdmin } = require('./user')
+
 const resolvers = {
   Mutation: {
-    async addUserWithConfirmationEmail(_, { input }, ctx) {
+    async addUserAsAdmin(_, { input }, ctx) {
       const reqUser = await ctx.connectors.User.fetchOne(ctx.user, ctx)
       if (!reqUser.admin) {
         throw new Error('Unauthorized')
       }
 
-      const roles = {
-        admin: false,
-        editorInChief: false,
-        handlingEditor: false,
-      }
-      if (input.role !== 'author') {
-        roles[input.role] = true
-      }
-
-      input = {
-        ...omit(input, ['role']),
-        ...roles,
-        isActive: true,
-        isConfirmed: false,
-        notifications: {
-          email: {
-            system: true,
-            user: true,
-          },
-        },
-        accessTokens: {
-          confirmation: chance.hash(),
-          unsubscribe: chance.hash(),
-        },
-      }
-
       try {
-        const user = await ctx.connectors.User.create(input, ctx)
+        const user = await ctx.connectors.User.create(
+          parseUserFromAdmin(input),
+          ctx,
+        )
         const notification = new Notification(user)
         await notification.notifyUserAddedByAdmin(input.role)
 
+        return user
+      } catch (e) {
+        return e
+      }
+    },
+    async editUserAsAdmin(_, { id, input }, ctx) {
+      try {
+        const user = await ctx.connectors.User.update(
+          id,
+          parseUserFromAdmin(input),
+          ctx,
+        )
+
         return user
       } catch (e) {
         return e

packages/component-user/typeDefs.js

 module.exports = `
-  type Creasta {
-    id: String!
-    name: String
-  }
-
   extend type User {
     affiliation: String
     country: String
@@ -22,11 +17,13 @@ module.exports = `
     title: String
     country: String
     affiliation: String
-    role: AllowedRole!
+    role: AllowedRole
+    isActive: Boolean
   }
 
   extend type Mutation {
-    addUserWithConfirmationEmail(input: UserInput!): User
+    addUserAsAdmin(id:ID!, input: UserInput!): User
+    editUserAsAdmin(id: ID!, input: UserInput!): User
   }
 
   enum AllowedRole {

packages/component-user/user.js

+const Chance = require('chance')
+const { omit } = require('lodash')
+
+const chance = new Chance()
+
+module.exports = {
+  parseUserFromAdmin: input => {
+    const roles = {
+      admin: false,
+      editorInChief: false,
+      handlingEditor: false,
+    }
+    if (input.role !== 'author') {
+      roles[input.role] = true
+    }
+
+    return {
+      ...omit(input, ['role']),
+      ...roles,
+      isActive: true,
+      isConfirmed: false,
+      notifications: {
+        email: {
+          system: true,
+          user: true,
+        },
+      },
+      accessTokens: {
+        confirmation: chance.hash(),
+        unsubscribe: chance.hash(),
+      },
+    }
+  },
+}

packages/component-faraday-ui/src/modals/FormModal.js → packages/components-faraday/src/components/Admin/AdminUserForm.js

@@ -20,30 +20,25 @@ import {
   IconButton,
   RowOverrideAlert,
   ItemOverrideAlert,
+  ValidatedMenuField,
   withRoles,
   withFetching,
   withCountries,
 } from 'pubsweet-component-faraday-ui'
 
-import ValidatedMenuField from './ValidatedMenuField'
-
 const FormModal = ({
-  edit,
-  user,
   roles,
   title,
   titles,
   onClose,
-  subtitle,
+  onSubmit,
   onConfirm,
   countries,
-  confirmText = 'OK',
-  cancelText = 'Cancel',
-  onSubmit,
-  initialValues,
-  //
   isFetching,
   fetchingError,
+  initialValues,
+  confirmText = 'OK',
+  cancelText = 'Cancel',
 }) => (
   <Root>
     <IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
@@ -54,11 +49,11 @@ const FormModal = ({
       validate={values => {
         const errors = {}
 
-        if (values.email === '') {
+        if (get(values, 'email', '') === '') {
           errors.email = 'Required'
         }
 
-        if (values.affiliation === '') {
+        if (get(values, 'affiliation', '') === '') {
           errors.affiliation = 'Required'
         }
 
@@ -72,6 +67,7 @@ const FormModal = ({
               <Label required>Email</Label>
               <ValidatedFieldFormik
                 component={TextField}
+                inline
                 name="email"
                 validate={[required]}
               />
@@ -85,11 +81,19 @@ const FormModal = ({
           <Row mb={2}>
             <Item mr={1} vertical>
               <Label>First Name</Label>
-              <ValidatedFieldFormik component={TextField} name="firstName" />
+              <ValidatedFieldFormik
+                component={TextField}
+                inline
+                name="firstName"
+              />
             </Item>
             <Item ml={1} vertical>
               <Label>Last Name</Label>
-              <ValidatedFieldFormik component={TextField} name="lastName" />
+              <ValidatedFieldFormik
+                component={TextField}
+                inline
+                name="lastName"
+              />
             </Item>
           </Row>
 
@@ -104,10 +108,14 @@ const FormModal = ({
             </ItemOverrideAlert>
           </RowOverrideAlert>
 
-          <Row mb={!edit && 3}>
+          <Row mb={3}>
             <Item vertical>
               <Label required>Affiliation</Label>
-              <ValidatedFieldFormik component={TextField} name="affiliation" />
+              <ValidatedFieldFormik
+                component={TextField}
+                inline
+                name="affiliation"
+              />
             </Item>
           </Row>
 
@@ -135,6 +143,9 @@ const FormModal = ({
 
 // #region FormHelpers
 const setInitialRole = a => {
+  if (get(a, 'admin')) {
+    return 'admin'
+  }
   if (get(a, 'handlingEditor')) {
     return 'handlingEditor'
   }
@@ -144,14 +155,6 @@ 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(

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

@@ -15,7 +15,6 @@ import {
   Pagination,
   ActionLink,
   handleError,
-  withFetching,
   withPagination,
 } from 'pubsweet-component-faraday-ui'
 

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

@@ -6,10 +6,12 @@ import {
   IconButton,
 } from 'pubsweet-component-faraday-ui'
 
+import AdminUserForm from './AdminUserForm'
+
 const OpenUserForm = ({ edit, user, onSubmit, modalKey }) => (
   <OpenModal
+    component={AdminUserForm}
     edit={edit}
-    formModal
     modalKey={modalKey}
     onSubmit={onSubmit}
     user={user}

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

@@ -5,6 +5,8 @@ import { compose, withHandlers, withProps } from 'recompose'
 const userFragment = gql`
   fragment userDetails on User {
     id
+    handlingEditor
+    editorInChief
     admin
     email
     title
@@ -25,46 +27,73 @@ const getUsersQuery = gql`
   ${userFragment}
 `
 
-const addUserMutation = gql`
-  mutation addUser($user: UserInput) {
-    createUser(input: $user) {
+const addUserAsAdmin = gql`
+  mutation addUserAsAdmin($id: ID!, $input: UserInput!) {
+    addUserAsAdmin(id: $id, input: $input) {
       ...userDetails
     }
   }
   ${userFragment}
 `
 
-const updateUserMutation = gql`
-  mutation updateUser($id: ID, $input: UserInput) {
-    updateUser(id: $id, input: $input) {
+const editUserAsAdmin = gql`
+  mutation editUserAsAdmin($id: ID!, $input: UserInput!) {
+    editUserAsAdmin(id: $id, input: $input) {
       ...userDetails
     }
   }
   ${userFragment}
 `
 
-const parseFormValues = ({ admin, ...input }) => input
-
 export default compose(
   graphql(getUsersQuery),
-  graphql(addUserMutation, {
+  graphql(addUserAsAdmin, {
     name: 'addUser',
+    options: {
+      refetchQueries: [{ query: getUsersQuery }],
+    },
   }),
-  graphql(updateUserMutation, {
+  graphql(editUserAsAdmin, {
     name: 'updateUser',
   }),
   withHandlers({
-    addUser: ({ addUser }) => (values, props) => {},
+    addUser: ({ addUser }) => (
+      { __typename, id, admin, ...input },
+      { props: { hideModal, setFetching } },
+    ) => {
+      setFetching(true)
+      addUser({
+        variables: {
+          id,
+          input: {
+            ...input,
+            username: input.email,
+          },
+        },
+      }).then(() => {
+        setFetching(false)
+        hideModal()
+      })
+    },
     updateUser: ({ updateUser }) => (
-      { __typename, id, ...formValues },
-      { props: { hideModal } },
+      { __typename, id, admin, handlingEditor, editorInChief, ...input },
+      { props: { hideModal, setFetching, setError } },
     ) => {
+      setFetching(true)
       updateUser({
         variables: {
           id,
-          input: parseFormValues(formValues),
+          input,
         },
-      }).then(hideModal)
+      })
+        .then(() => {
+          setFetching(false)
+          hideModal()
+        })
+        .catch(e => {
+          setFetching(false)
+          setError(e.message)
+        })
     },
   }),
   withProps(({ data }) => ({