refactor(menucountry): refactored code and updated old menu country field boxes

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

@@ -4,14 +4,7 @@ import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { required } from 'xpub-validators'
 import { reduxForm, Field } from 'redux-form'
-import {
-  Menu,
-  H3,
-  ValidatedField,
-  TextField,
-  Checkbox,
-  Spinner,
-} from '@pubsweet/ui'
+import { H3, ValidatedField, TextField, Checkbox, Spinner } from '@pubsweet/ui'
 import {
   compose,
   withState,
@@ -20,7 +13,7 @@ import {
   setDisplayName,
 } from 'recompose'
 
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
 import { Tag, Label, Row, Item, PersonInfo, IconButton, OpenModal } from './'
 import { validators } from './helpers'
 
@@ -129,7 +122,6 @@ const AuthorTitle = ({
 
 // #region AuthorEdit
 const AuthorEdit = ({
-  countries,
   author,
   editMode,
   listIndex,
@@ -196,7 +188,7 @@ const AuthorEdit = ({
         <Label required>Country</Label>
         <ValidatedField
           component={input => (
-            <Menu {...input} options={countries} placeholder="Please select" />
+            <MenuCountry {...input} placeholder="Please select" />
           )}
           data-test-id="author-card-country"
           name="country"
@@ -208,7 +200,6 @@ const AuthorEdit = ({
 // #endregion
 
 const EnhancedAuthorEdit = compose(
-  withCountries,
   withProps(({ author }) => ({
     initialValues: author,
   })),

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

@@ -5,7 +5,9 @@ import { reduxForm } from 'redux-form'
 import { th } from '@pubsweet/ui-toolkit'
 import { required } from 'xpub-validators'
 import { withModal } from 'pubsweet-component-modal/src/components'
-import { Button, H4, Menu, TextField, ValidatedField } from '@pubsweet/ui'
+import { Button, H4, TextField, ValidatedField } from '@pubsweet/ui'
+
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
 
 import {
   Row,
@@ -15,10 +17,9 @@ import {
   ItemOverrideAlert,
   withFetching,
   validators,
-  withCountries,
 } from '../'
 
-const InviteReviewers = ({ countries, handleSubmit, reset }) => (
+const InviteReviewers = ({ handleSubmit, reset }) => (
   <Root>
     <Row justify="space-between" mb={2}>
       <H4>Invite reviewer</H4>
@@ -82,7 +83,9 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => (
       <ItemOverrideAlert vertical>
         <Label required>Country</Label>
         <ValidatedField
-          component={input => <Menu options={countries} {...input} />}
+          component={input => (
+            <MenuCountry {...input} placeholder="Please select" />
+          )}
           name="country"
           validate={[required]}
         />
@@ -93,7 +96,6 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => (
 
 export default compose(
   withFetching,
-  withCountries,
   withModal(({ isFetching, modalKey }) => ({
     modalKey,
     isFetching,

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

@@ -13,23 +13,6 @@ const filteredCountries = (countries, userInput) =>
 const firstFilteredCountry = props =>
   filteredCountries(props.countries, props.userInput)[0]
 
-const Input = styled.input`
-  width: 100%;
-  height: calc(${th('gridUnit')} * 4);
-  border: ${th('accordion.border')};
-  border-radius: ${th('borderRadius')};
-  padding: 0 ${th('gridUnit')};
-  ::placeholder {
-    color: ${th('colorText')};
-    opacity: 1;
-    font-family: ${th('fontWriting')};
-  }
-  :focus {
-    border-color: ${th('action.colorActive')}
-    outline: none;
-  }
-`
-
 const CustomOpener = ({
   selected,
   userInput,
@@ -79,3 +62,20 @@ const enhance = compose(
 )
 
 export default enhance(MenuCountry)
+
+const Input = styled.input`
+  width: 100%;
+  height: calc(${th('gridUnit')} * 4);
+  border: ${th('accordion.border')};
+  border-radius: ${th('borderRadius')};
+  padding: 0 ${th('gridUnit')};
+  ::placeholder {
+    color: ${th('colorText')};
+    opacity: 1;
+    font-family: ${th('fontWriting')};
+  }
+  :focus {
+    border-color: ${th('action.colorActive')}
+    outline: none;
+  }
+`

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

@@ -7,7 +7,7 @@ import { th } from '@pubsweet/ui-toolkit'
 import { required as requiredValidator } from 'xpub-validators'
 import { compose, withStateHandlers, withProps } from 'recompose'
 import { H3, Spinner, ValidatedField, TextField, Menu } from '@pubsweet/ui'
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { withCountries, MenuCountry } from 'pubsweet-component-faraday-ui'
 
 import {
   Row,
@@ -179,7 +179,9 @@ const EditUserProfile = compose(
           <Item ml={1} vertical>
             <Label required>Country</Label>
             <ValidatedField
-              component={input => <Menu {...input} options={countries} />}
+              component={input => (
+                <MenuCountry {...input} placeholder="Please select" />
+              )}
               name="country"
               validate={[requiredValidator]}
             />

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

@@ -19,12 +19,13 @@ import {
   Text,
   Item,
   Label,
+  MenuCountry,
   IconButton,
   RowOverrideAlert,
   ItemOverrideAlert,
 } from 'pubsweet-component-faraday-ui'
 
-const AddUserForm = ({ roles, countries, titles }) => (
+const AddUserForm = ({ roles, titles }) => (
   <Fragment>
     <Row alignItems="baseline" mb={1} mt={1}>
       <Item mr={1} vertical>
@@ -72,7 +73,7 @@ const AddUserForm = ({ roles, countries, titles }) => (
         <Label>Country</Label>
         <ValidatedField
           component={input => (
-            <Menu options={countries} {...input} placeholder="Please select" />
+            <MenuCountry {...input} placeholder="Please select" />
           )}
           name="country"
         />
@@ -88,7 +89,7 @@ const AddUserForm = ({ roles, countries, titles }) => (
   </Fragment>
 )
 
-const EditForm = ({ titles, countries }) => (
+const EditForm = ({ titles }) => (
   <Fragment>
     <Row alignItems="center" mb={2} mt={1}>
       <Item mr={1} vertical>
@@ -115,7 +116,7 @@ const EditForm = ({ titles, countries }) => (
         <Label>Country</Label>
         <ValidatedField
           component={input => (
-            <Menu options={countries} {...input} placeholder="Please select" />
+            <MenuCountry {...input} placeholder="Please select" />
           )}
           name="country"
         />
@@ -186,7 +187,6 @@ const FormModal = ({
   onClose,
   subtitle,
   onConfirm,
-  countries,
   modalError,
   isFetching,
   handleSubmit,
@@ -198,9 +198,9 @@ const FormModal = ({
     <H2>{title}</H2>
     {edit && <Text secondary>{user.email}</Text>}
     {edit ? (
-      <EditForm countries={countries} titles={titles} />
+      <EditForm titles={titles} />
     ) : (
-      <AddUserForm countries={countries} roles={roles} titles={titles} />
+      <AddUserForm roles={roles} titles={titles} />
     )}
     {modalError && (
       <Row mb={1}>

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

@@ -9,7 +9,6 @@ import {
   IconButton,
   withRoles,
   withFetching,
-  withCountries,
 } from 'pubsweet-component-faraday-ui'
 
 const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
@@ -32,6 +31,4 @@ const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
   </OpenModal>
 )
 
-export default compose(withJournal, withCountries, withRoles, withFetching)(
-  AddUser,
-)
+export default compose(withJournal, withRoles, withFetching)(AddUser)