From 218a55c84896be7539e954884389c6e172084203 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Mon, 15 Jun 2020 22:38:56 -0400 Subject: [PATCH] Added ListAddUserModal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • 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 --- .../components/modal/list_add_user_modal.js | 97 +++++++++++++++++++ .../gabsocial/components/modal/modal_root.js | 3 + .../popover/profile_options_popover.js | 6 +- app/javascript/gabsocial/constants.js | 1 + .../features/ui/util/async_components.js | 1 + 5 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 app/javascript/gabsocial/components/modal/list_add_user_modal.js diff --git a/app/javascript/gabsocial/components/modal/list_add_user_modal.js b/app/javascript/gabsocial/components/modal/list_add_user_modal.js new file mode 100644 index 00000000..8bd00a43 --- /dev/null +++ b/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 ( + +
+
+ { + lists && lists.map((list) => { + return ( +
+ + {list.get('title')} + + +
+ ) + }) + } +
+
+ + ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/modal/modal_root.js b/app/javascript/gabsocial/components/modal/modal_root.js index d0b3a8aa..0829260d 100644 --- a/app/javascript/gabsocial/components/modal/modal_root.js +++ b/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 diff --git a/app/javascript/gabsocial/components/popover/profile_options_popover.js b/app/javascript/gabsocial/components/popover/profile_options_popover.js index 1407f1f9..a78f8ba2 100644 --- a/app/javascript/gabsocial/components/popover/profile_options_popover.js +++ b/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 }) diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index ec83144d..d36c21fb 100644 --- a/app/javascript/gabsocial/constants.js +++ b/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' diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index 8b4762f7..06363510 100644 --- a/app/javascript/gabsocial/features/ui/util/async_components.js +++ b/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') }