Progress

app/javascript/gabsocial/features/list_create.js

@@ -1,12 +1,17 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import { changeListEditorTitle, submitListEditor } from '../actions/lists'
+import { closeModal } from '../actions/modal'
+import { MODAL_LIST_CREATE } from '../constants'
 import Button from '../components/button'
 import Input from '../components/input'
+import Form from '../components/form'
 import Text from '../components/text'
 
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
-  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Create list' },
+  list_description: { id: 'list.description', defaultMessage: 'Lists are private and only you can see who is on a list.\nNo one else can view your lists. No one knows that they are on your list.' },
+  new_list_placeholder: { id: 'list.title_placeholder', defaultMessage: 'My new list...', },
 })
 
 const mapStateToProps = (state) => ({
@@ -14,9 +19,12 @@ const mapStateToProps = (state) => ({
   disabled: state.getIn(['listEditor', 'isSubmitting']),
 })
 
-const mapDispatchToProps = (dispatch) => ({
-  onChange: value => dispatch(changeListEditorTitle(value)),
-  onSubmit: () => dispatch(submitListEditor(true)),
+const mapDispatchToProps = (dispatch, { isModal }) => ({
+  onChange: (value) => dispatch(changeListEditorTitle(value)),
+  onSubmit: () => {
+    if (isModal) dispatch(closeModal(MODAL_LIST_CREATE))
+    dispatch(submitListEditor(true))
+  },
 })
 
 export default
@@ -25,49 +33,47 @@ export default
 class ListCreate extends PureComponent {
 
   static propTypes = {
-    value: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
+    value: PropTypes.string,
     intl: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
+    isModal: PropTypes.bool,
   }
 
   render() {
     const {
       value,
-      disabled,
       intl,
       onSubmit,
-      onChange
+      onChange,
     } = this.props
 
+    const isDisabled = !value
+
     return (
-      <form onSubmit={onSubmit}>
+      <Form>
         <Input
           title={intl.formatMessage(messages.label)}
-          placeholder='My new list...'
+          placeholder={intl.formatMessage(messages.new_list_placeholder)}
           value={value}
           onChange={onChange}
-          onSubmit={onSubmit}
-          disabled={disabled}
         />
 
         <div className={[_s.default, _s.my10, _s.py5, _s.ml10].join(' ')}>
           <Text color='secondary' size='small'>
-            Lists are private and only you can see who is on a list.<br/>
-            No one else can view your lists. No one knows that they are on your list.
+            {intl.formatMessage(messages.list_description)}
           </Text>
         </div>
 
         <Button
-          className={_s.ml10}
-          type='submit'
+          isDisabled={isDisabled}
+          onClick={onSubmit}
         >
-          <Text color='white'>
+          <Text color='inherit' align='center'>
             {intl.formatMessage(messages.create)}
           </Text>
         </Button>
-      </form>
+      </Form>
     )
   }