72 lines
3.3 KiB
JavaScript
72 lines
3.3 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||
|
|
import Column from '../ui/components/column';
|
||
|
|
import ColumnSubheading from '../ui/components/column_subheading';
|
||
|
|
import ScrollableList from '../../components/scrollable_list';
|
||
|
|
import Icon from 'soapbox/components/icon';
|
||
|
|
import Search from './components/search';
|
||
|
|
import Account from './components/account';
|
||
|
|
import { removeFromAliases } from '../../actions/aliases';
|
||
|
|
|
||
|
|
const messages = defineMessages({
|
||
|
|
heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
|
||
|
|
subheading_add_new: { id: 'column.aliases.subheading_add_new', defaultMessage: 'Add New Alias' },
|
||
|
|
create_error: { id: 'column.aliases.create_error', defaultMessage: 'Error creating alias' },
|
||
|
|
delete_error: { id: 'column.aliases.delete_error', defaultMessage: 'Error deleting alias' },
|
||
|
|
subheading_aliases: { id: 'column.aliases.subheading_aliases', defaultMessage: 'Current aliases' },
|
||
|
|
delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapStateToProps = state => ({
|
||
|
|
aliases: state.getIn(['meta', 'pleroma', 'also_known_as']),
|
||
|
|
searchAccountIds: state.getIn(['aliases', 'suggestions', 'items']),
|
||
|
|
});
|
||
|
|
|
||
|
|
export default @connect(mapStateToProps)
|
||
|
|
@injectIntl
|
||
|
|
class Aliases extends ImmutablePureComponent {
|
||
|
|
|
||
|
|
handleFilterDelete = e => {
|
||
|
|
const { dispatch, intl } = this.props;
|
||
|
|
dispatch(removeFromAliases(intl, e.currentTarget.dataset.value));
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { intl, aliases, searchAccountIds } = this.props;
|
||
|
|
|
||
|
|
const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Column className='aliases-settings-panel' icon='suitcase' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||
|
|
<ColumnSubheading text={intl.formatMessage(messages.subheading_add_new)} />
|
||
|
|
<Search />
|
||
|
|
<div className='aliases__accounts'>
|
||
|
|
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||
|
|
</div>
|
||
|
|
<ColumnSubheading text={intl.formatMessage(messages.subheading_aliases)} />
|
||
|
|
<div className='aliases-settings-panel'>
|
||
|
|
<ScrollableList
|
||
|
|
scrollKey='aliases'
|
||
|
|
emptyMessage={emptyMessage}
|
||
|
|
>
|
||
|
|
{aliases.map((alias, i) => (
|
||
|
|
<div key={i} className='alias__container'>
|
||
|
|
<div className='alias__details'>
|
||
|
|
<span className='alias__list-label'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></span>
|
||
|
|
<span className='alias__list-value'>{alias}</span>
|
||
|
|
</div>
|
||
|
|
<div className='alias__delete' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
|
||
|
|
<Icon className='alias__delete-icon' id='times' size={40} />
|
||
|
|
<span className='alias__delete-label'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</ScrollableList>
|
||
|
|
</div>
|
||
|
|
</Column>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|