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

app/javascript/gabsocial/components/popover/profile_options_popover.js

@@ -43,7 +43,7 @@ const messages = defineMessages({
   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
   admin_account: { id: 'admin_account', defaultMessage: 'Open moderation interface' },
-  add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
+  add_to_list: { id: 'lists.account.add', defaultMessage: 'Add to list' },
   add_or_remove_from_shortcuts: { id: 'account.add_or_remove_from_shortcuts', defaultMessage: 'Add or Remove from shortcuts' },
   accountBlocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
   accountMuted: { id: 'account.muted', defaultMessage: 'Muted' },
@@ -119,7 +119,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onAddToList(account) {
     dispatch(closePopover())
-    dispatch(openModal('LIST_ADDER', {
+    dispatch(openModal('LIST_ADD_USER', {
       accountId: account.get('id'),
     }));
   },
@@ -202,7 +202,7 @@ class ProfileOptionsPopover extends PureComponent {
     menu.push({
       hideArrow: true,
       icon: 'list',
-      title: intl.formatMessage(messages.add_or_remove_from_list),
+      title: intl.formatMessage(messages.add_to_list),
       onClick: this.handleAddToList
     })
 

app/javascript/gabsocial/constants.js

@@ -50,6 +50,7 @@ export const MODAL_GROUP_REMOVED_ACCOUNTS = 'GROUP_REMOVED_ACCOUNTS'
 export const MODAL_HASHTAG_TIMELINE_SETTINGS = 'HASHTAG_TIMELINE_SETTINGS'
 export const MODAL_HOME_TIMELINE_SETTINGS = 'HOME_TIMELINE_SETTINGS'
 export const MODAL_HOTKEYS = 'HOTKEYS'
+export const MODAL_LIST_ADD_USER = 'LIST_ADD_USER'
 export const MODAL_LIST_CREATE = 'LIST_CREATE'
 export const MODAL_LIST_DELETE = 'LIST_DELETE'
 export const MODAL_LIST_EDITOR = 'LIST_EDITOR'

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -39,6 +39,7 @@ export function HashtagTimelineSettingsModal() { return import(/* webpackChunkNa
 export function HomeTimeline() { return import(/* webpackChunkName: "features/home_timeline" */'../../home_timeline') }
 export function HomeTimelineSettingsModal() { return import(/* webpackChunkName: "components/home_timeline_settings_modal" */'../../../components/modal/home_timeline_settings_modal') }
 export function HotkeysModal() { return import(/* webpackChunkName: "components/hotkeys_modal" */'../../../components/modal/hotkeys_modal') }
+export function ListAddUserModal() { return import(/* webpackChunkName: "features/list_add_user_modal" */'../../../components/modal/list_add_user_modal') }
 export function ListCreate() { return import(/* webpackChunkName: "features/list_create" */'../../list_create') }
 export function ListCreateModal() { return import(/* webpackChunkName: "components/list_create_modal" */'../../../components/modal/list_create_modal') }
 export function ListDeleteModal() { return import(/* webpackChunkName: "components/list_delete_modal" */'../../../components/modal/list_delete_modal') }