feat(adminUsers): create gql hoc

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

@@ -8,7 +8,6 @@ import { H2, Button, TextField, ValidatedFieldFormik } from '@pubsweet/ui'
 import { compose, setDisplayName, withHandlers, withProps } from 'recompose'
 import {
   Row,
-  Text,
   Item,
   Label,
   IconButton,
@@ -19,163 +18,7 @@ import {
 } from 'pubsweet-component-faraday-ui'
 
 import ValidatedMenuField from './ValidatedMenuField'
-
-// #region Unused stuff
-
-// const AddUserForm = ({ roles, countries, titles }) => (
-//   <Fragment>
-// <Row alignItems="baseline" mb={1} mt={1}>
-//   <Item mr={1} vertical>
-//     <Label required>Email</Label>
-//     <ValidatedField
-//       component={TextField}
-//       name="email"
-//       validate={[required]}
-//     />
-//   </Item>
-//   <ItemOverrideAlert ml={1} vertical>
-//     <Label required>Role</Label>
-//     <ValidatedField
-//       component={input => (
-//         <Menu options={roles} {...input} placeholder="Please select" />
-//       )}
-//       name="role"
-//       validate={[required]}
-//     />
-//   </ItemOverrideAlert>
-// </Row>
-
-// <Row mb={2}>
-//   <Item mr={1} vertical>
-//     <Label>First Name</Label>
-//     <ValidatedField component={TextField} name="firstName" />
-//   </Item>
-//   <Item ml={1} vertical>
-//     <Label>Last Name</Label>
-//     <ValidatedField component={TextField} name="lastName" />
-//   </Item>
-// </Row>
-
-// <RowOverrideAlert alignItems="center" mb={2}>
-//   <ItemOverrideAlert mr={1} vertical>
-//     <Label>Title</Label>
-//     <ValidatedField
-//       component={input => (
-//         <Menu options={titles} {...input} placeholder="Please select" />
-//       )}
-//       name="title"
-//     />
-//   </ItemOverrideAlert>
-//   <ItemOverrideAlert ml={1} vertical>
-//     <Label>Country</Label>
-//     <ValidatedField
-//       component={input => (
-//         <Menu options={countries} {...input} placeholder="Please select" />
-//       )}
-//       name="country"
-//     />
-//   </ItemOverrideAlert>
-// </RowOverrideAlert>
-
-// <Row mb={3}>
-//   <Item vertical>
-//     <Label>Affiliation</Label>
-//     <ValidatedField component={TextField} name="affiliation" />
-//   </Item>
-// </Row>
-//   </Fragment>
-// )
-
-// const EditForm = ({ titles, countries }) => (
-//   <Fragment>
-//     <Row alignItems="center" mb={2} mt={1}>
-//       <Item mr={1} vertical>
-//         <Label>First Name</Label>
-//         <ValidatedField component={TextField} name="firstName" />
-//       </Item>
-//       <Item ml={1} vertical>
-//         <Label>Last Name</Label>
-//         <ValidatedField component={TextField} name="lastName" />
-//       </Item>
-//     </Row>
-
-//     <RowOverrideAlert alignItems="center" mb={2}>
-//       <ItemOverrideAlert mr={1} vertical>
-//         <Label>Title</Label>
-//         <ValidatedField
-//           component={input => (
-//             <Menu options={titles} {...input} placeholder="Please select" />
-//           )}
-//           name="title"
-//         />
-//       </ItemOverrideAlert>
-//       <ItemOverrideAlert ml={1} vertical>
-//         <Label>Country</Label>
-//         <ValidatedField
-//           component={input => (
-//             <Menu options={countries} {...input} placeholder="Please select" />
-//           )}
-//           name="country"
-//         />
-//       </ItemOverrideAlert>
-//     </RowOverrideAlert>
-
-//     <Row mb={2}>
-//       <Item vertical>
-//         <Label>Affiliation</Label>
-//         <ValidatedField component={TextField} name="affiliation" />
-//       </Item>
-//     </Row>
-//     <Row>
-//       <Item>
-//         <Label>Roles</Label>
-//       </Item>
-//     </Row>
-//     <RowOverrideAlert mb={3} mt={1}>
-//       <Item>
-//         <ValidatedField
-//           component={({ value, onChange }) => (
-//             <Checkbox
-//               checked={value}
-//               label="Editor in Chief"
-//               onChange={onChange}
-//               value={value}
-//             />
-//           )}
-//           name="editorInChief"
-//         />
-//       </Item>
-//       <Item>
-//         <ValidatedField
-//           component={({ value, onChange }) => (
-//             <Checkbox
-//               checked={value}
-//               label="Admin"
-//               onChange={onChange}
-//               value={value}
-//             />
-//           )}
-//           name="admin"
-//         />
-//       </Item>
-//       <Item>
-//         <ValidatedField
-//           component={({ value, onChange }) => (
-//             <Checkbox
-//               checked={value}
-//               label="Handling Editor"
-//               onChange={onChange}
-//               value={value}
-//             />
-//           )}
-//           name="handlingEditor"
-//         />
-//       </Item>
-//     </RowOverrideAlert>
-//   </Fragment>
-// )
-
-// #endregion
+import ValidatedCheckboxField from './ValidatedCheckboxField'
 
 const FormModal = ({
   edit,
@@ -196,13 +39,7 @@ const FormModal = ({
   <Root>
     <IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
     <H2>{title}</H2>
-    <Formik
-      // onSubmit={values => {
-      //   addUser({ variables: { user: parseUser(values) } })
-      // }}
-      initialValues={initialValues}
-      onSubmit={onSubmit}
-    >
+    <Formik initialValues={initialValues} onSubmit={onSubmit}>
       {({ handleSubmit }) => (
         <Fragment>
           <Row alignItems="baseline" mb={1} mt={1}>
@@ -242,13 +79,33 @@ const FormModal = ({
             </ItemOverrideAlert>
           </RowOverrideAlert>
 
-          <Row mb={3}>
+          <Row mb={!edit && 3}>
             <Item vertical>
               <Label>Affiliation</Label>
               <ValidatedFieldFormik component={TextField} name="affiliation" />
             </Item>
           </Row>
 
+          {edit && (
+            <RowOverrideAlert mb={3}>
+              <Item>
+                <ValidatedCheckboxField
+                  label="Editor in Chief"
+                  name="editorInChief"
+                />
+              </Item>
+              <Item>
+                <ValidatedCheckboxField label="Admin" name="admin" />
+              </Item>
+              <Item>
+                <ValidatedCheckboxField
+                  label="Handling Editor"
+                  name="handlingEditor"
+                />
+              </Item>
+            </RowOverrideAlert>
+          )}
+
           <Row>
             <Button onClick={onClose}>Cancel</Button>
             <Button onClick={handleSubmit} primary>
@@ -296,7 +153,7 @@ export default compose(
   withHandlers({
     onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
       if (typeof onSubmit === 'function') {
-        onSubmit({ values: parseValues(values), formProps, props })
+        onSubmit(parseValues(values), { formProps, props })
       }
     },
     onClose: ({ onCancel, ...props }) => () => {

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

+import React from 'react'
+import { Field } from 'formik'
+import { Checkbox } from '@pubsweet/ui'
+
+const ValidatedCheckboxField = ({ name, label }) => (
+  <Field name={name}>
+    {({ field, form }) => (
+      <Checkbox
+        checked={field.value}
+        label={label}
+        onChange={() => {
+          form.setFieldValue(field.name, !field.value)
+        }}
+      />
+    )}
+  </Field>
+)
+
+export default ValidatedCheckboxField

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

@@ -7,8 +7,8 @@ const ValidatedMenuField = ({ options, name }) => (
     {({ field, form }) => (
       <Menu
         onChange={v => {
-          field.onChange(v)
-          form.setFieldValue(name, v)
+          // field.onChange(v)
+          form.setFieldValue(field.name, v)
         }}
         options={options}
         value={field.value}

packages/component-user/typeDefs.js

@@ -17,6 +17,8 @@ module.exports = `
   }
 
   extend input UserInput {
+    isActive: Boolean
+    isConfirmed: Boolean
     firstName: String
     lastName: String
     title: String

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

@@ -39,6 +39,7 @@ const Users = ({
   toggleUserStatus,
   //
   addUser,
+  updateUser,
   ...rest
 }) => (
   <Fragment>
@@ -52,10 +53,7 @@ const Users = ({
         >
           Admin Dashboard
         </ActionLink>
-        <OpenUserForm
-          modalKey="addUser"
-          onSubmit={v => console.log('GQL add mutation here:', v)} // eslint-disable-line
-        />
+        <OpenUserForm modalKey="addUser" onSubmit={addUser} />
       </Item>
 
       <Pagination {...rest} itemsPerPage={itemsPerPage} page={page} />
@@ -106,7 +104,7 @@ const Users = ({
                 <OpenUserForm
                   edit
                   modalKey={`edit-${user.id}`}
-                  onSubmit={v => console.log('GQL edit mutation here:', v)} // eslint-disable-line
+                  onSubmit={updateUser}
                   user={user}
                 />
                 <OpenModal
@@ -142,7 +140,7 @@ export default compose(
   withJournal,
   withFetching,
   withUsersGQL,
-  withProps(({ journal: { roles = {} }, data: { users } }) => ({
+  withProps(({ journal: { roles = {} }, users }) => ({
     roles: Object.keys(roles),
     items: users,
   })),

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

 import gql from 'graphql-tag'
-import { compose } from 'recompose'
 import { graphql } from 'react-apollo'
+import { compose, withHandlers, withProps } from 'recompose'
 
 const userFragment = gql`
   fragment userDetails on User {
@@ -49,6 +49,27 @@ const updateUserMutation = gql`
 
 export default compose(
   graphql(getUsersQuery),
-  graphql(addUserMutation, { name: 'addUser' }),
-  graphql(updateUserMutation, { name: 'updateUser' }),
+  graphql(addUserMutation, {
+    name: 'addUser',
+  }),
+  graphql(updateUserMutation, {
+    name: 'updateUser',
+  }),
+  withHandlers({
+    addUser: ({ addUser }) => (values, props) => {},
+    updateUser: ({ updateUser }) => (
+      { __typename, id, ...input },
+      { props: { hideModal } },
+    ) => {
+      updateUser({
+        variables: {
+          id,
+          input,
+        },
+      }).then(hideModal)
+    },
+  }),
+  withProps(({ data }) => ({
+    users: data.users,
+  })),
 )