Add some UI for user-defined domain blocks (#6628)
* Keep list of blocked domains Might be overkill, but I'm trying to follow the same logic as for blocked users * Add basic domain block UI * Add the domain blocks UI to Getting Started * Fix undefined URL in `fetchDomainBlocks` * Update all known users' domain_blocking relationship instead of just one'smaster
ThibG
7 years ago
committed by
Eugen Rochko
parent
47cee7cc8e
commit
a6c129ddbd
@ -0,0 +1,42 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import IconButton from './icon_button'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
|
||||
const messages = defineMessages({ |
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, |
||||
}); |
||||
|
||||
@injectIntl |
||||
export default class Account extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
domain: PropTypes.string, |
||||
onUnblockDomain: PropTypes.func.isRequired, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
handleDomainUnblock = () => { |
||||
this.props.onUnblockDomain(this.props.domain); |
||||
} |
||||
|
||||
render () { |
||||
const { domain, intl } = this.props; |
||||
|
||||
return ( |
||||
<div className='domain'> |
||||
<div className='domain__wrapper'> |
||||
<span className='domain__domain-name'> |
||||
<strong>{domain}</strong> |
||||
</span> |
||||
|
||||
<div className='domain__buttons'> |
||||
<IconButton active icon='unlock-alt' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,33 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import { blockDomain, unblockDomain } from '../actions/domain_blocks'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
import Domain from '../components/domain'; |
||||
import { openModal } from '../actions/modal'; |
||||
|
||||
const messages = defineMessages({ |
||||
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, |
||||
}); |
||||
|
||||
const makeMapStateToProps = () => { |
||||
const mapStateToProps = (state, { }) => ({ |
||||
}); |
||||
|
||||
return mapStateToProps; |
||||
}; |
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({ |
||||
onBlockDomain (domain) { |
||||
dispatch(openModal('CONFIRM', { |
||||
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />, |
||||
confirm: intl.formatMessage(messages.blockDomainConfirm), |
||||
onConfirm: () => dispatch(blockDomain(domain)), |
||||
})); |
||||
}, |
||||
|
||||
onUnblockDomain (domain) { |
||||
dispatch(unblockDomain(domain)); |
||||
}, |
||||
}); |
||||
|
||||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain)); |
||||
@ -0,0 +1,66 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import PropTypes from 'prop-types'; |
||||
import LoadingIndicator from '../../components/loading_indicator'; |
||||
import Column from '../ui/components/column'; |
||||
import ColumnBackButtonSlim from '../../components/column_back_button_slim'; |
||||
import DomainContainer from '../../containers/domain_container'; |
||||
import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks'; |
||||
import { defineMessages, injectIntl } from 'react-intl'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import { debounce } from 'lodash'; |
||||
import ScrollableList from '../../components/scrollable_list'; |
||||
|
||||
const messages = defineMessages({ |
||||
heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' }, |
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, |
||||
}); |
||||
|
||||
const mapStateToProps = state => ({ |
||||
domains: state.getIn(['domain_lists', 'blocks', 'items']), |
||||
}); |
||||
|
||||
@connect(mapStateToProps) |
||||
@injectIntl |
||||
export default class Blocks extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
params: PropTypes.object.isRequired, |
||||
dispatch: PropTypes.func.isRequired, |
||||
domains: ImmutablePropTypes.list, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
componentWillMount () { |
||||
this.props.dispatch(fetchDomainBlocks()); |
||||
} |
||||
|
||||
handleLoadMore = debounce(() => { |
||||
this.props.dispatch(expandDomainBlocks()); |
||||
}, 300, { leading: true }); |
||||
|
||||
render () { |
||||
const { intl, domains } = this.props; |
||||
|
||||
if (!domains) { |
||||
return ( |
||||
<Column> |
||||
<LoadingIndicator /> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Column icon='ban' heading={intl.formatMessage(messages.heading)}> |
||||
<ColumnBackButtonSlim /> |
||||
<ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}> |
||||
{domains.map(domain => |
||||
<DomainContainer key={domain} domain={domain} /> |
||||
)} |
||||
</ScrollableList> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
import { |
||||
DOMAIN_BLOCKS_FETCH_SUCCESS, |
||||
DOMAIN_BLOCKS_EXPAND_SUCCESS, |
||||
DOMAIN_UNBLOCK_SUCCESS, |
||||
} from '../actions/domain_blocks'; |
||||
import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable'; |
||||
|
||||
const initialState = ImmutableMap({ |
||||
blocks: ImmutableMap(), |
||||
}); |
||||
|
||||
export default function domainLists(state = initialState, action) { |
||||
switch(action.type) { |
||||
case DOMAIN_BLOCKS_FETCH_SUCCESS: |
||||
return state.setIn(['blocks', 'items'], ImmutableOrderedSet(action.domains)).setIn(['blocks', 'next'], action.next); |
||||
case DOMAIN_BLOCKS_EXPAND_SUCCESS: |
||||
return state.updateIn(['blocks', 'items'], set => set.union(action.domains)).setIn(['blocks', 'next'], action.next); |
||||
case DOMAIN_UNBLOCK_SUCCESS: |
||||
return state.updateIn(['blocks', 'items'], set => set.delete(action.domain)); |
||||
default: |
||||
return state; |
||||
} |
||||
}; |
||||
Loading…
Reference in new issue