Added ListAddUserModal

• Added:
- ListAddUserModal for adding an account to a list from profile page

• Todo:
- Add remove account from list modal
- Add instant notice of addition/removal

app/javascript/gabsocial/components/modal/list_add_user_modal.js

@@ -0,0 +1,97 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
+import { getOrderedLists } from '../../selectors'
+import {
+  fetchLists,
+  addToList,
+} from '../../actions/lists'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+
+const messages = defineMessages({
+  add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
+})
+
+const mapStateToProps = (state) => ({
+  lists: getOrderedLists(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchLists: () => dispatch(fetchLists()),
+
+  onAddToList(listId, accountId) {
+    dispatch(addToList(listId, accountId))
+  },
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class ListAddUserModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    accountId: PropTypes.string.isRequired,
+    lists: ImmutablePropTypes.list,
+    intl: PropTypes.object.isRequired,
+    onAddToList: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onFetchLists: PropTypes.func.isRequired,
+  }
+
+  updateOnProps = [
+    'lists',
+  ]
+
+  componentDidMount() {
+    this.props.onFetchLists()
+  }
+
+  handleOnAddToList = (listId) => {
+    this.props.onAddToList(listId, this.props.accountId)
+  }
+
+  render() {
+    const {
+      intl,
+      lists,
+      onClose,
+    } = this.props
+
+    const title = intl.formatMessage(messages.add)
+
+    return (
+      <ModalLayout
+        noPadding
+        title={title}
+        onClose={onClose}
+      >
+        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
+          <div>
+            {
+              lists && lists.map((list) => {
+                return (
+                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+                    <Text color='primary' size='large' className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
+                      {list.get('title')}
+                    </Text>
+                    <Button
+                      isOutline
+                      backgroundColor='none'
+                      color='brand'
+                      onClick={() => this.handleOnAddToList(list.get('id'))}
+                    >
+                      {title}
+                    </Button>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </ModalLayout>
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/modal_root.js

@@ -22,6 +22,7 @@ import {
   MODAL_HASHTAG_TIMELINE_SETTINGS,
   MODAL_HOME_TIMELINE_SETTINGS,
   MODAL_HOTKEYS,
+  MODAL_LIST_ADD_USER,
   MODAL_LIST_CREATE,
   MODAL_LIST_DELETE,
   MODAL_LIST_EDITOR,
@@ -55,6 +56,7 @@ import {
   HashtagTimelineSettingsModal,
   HomeTimelineSettingsModal,
   HotkeysModal,
+  ListAddUserModal,
   ListCreateModal,
   ListDeleteModal,
   ListEditorModal,
@@ -89,6 +91,7 @@ MODAL_COMPONENTS[MODAL_GROUP_REMOVED_ACCOUNTS] = GroupRemovedAccountsModal
 MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
 MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
+MODAL_COMPONENTS[MODAL_LIST_ADD_USER] = ListAddUserModal
 MODAL_COMPONENTS[MODAL_LIST_CREATE] = ListCreateModal
 MODAL_COMPONENTS[MODAL_LIST_DELETE] = ListDeleteModal
 MODAL_COMPONENTS[MODAL_LIST_EDITOR] = ListEditorModal