Commit 218a55c8 authored by mgabdev's avatar mgabdev

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
parent 44519fef
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>
)
}
}
\ No newline at end of file
......@@ -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
......
......@@ -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
})
......
......@@ -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'
......
......@@ -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') }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment