gab-social/app/javascript/gabsocial/features/blocked_accounts.js

89 lines
2.5 KiB
JavaScript
Raw Normal View History

2020-03-24 04:39:12 +00:00
import { defineMessages, injectIntl } from 'react-intl'
2020-03-04 22:26:01 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-04-08 02:06:59 +01:00
import debounce from 'lodash.debounce'
import { me } from '../initial_state'
2020-03-04 22:26:01 +00:00
import { fetchBlocks, expandBlocks } from '../actions/blocks'
2020-04-11 23:29:19 +01:00
import Account from '../components/account'
import Block from '../components/block'
import Heading from '../components/heading'
2020-03-04 22:26:01 +00:00
import ScrollableList from '../components/scrollable_list'
const messages = defineMessages({
2020-03-24 04:39:12 +00:00
empty: { id: 'empty_column.blocks', defaultMessage: 'You haven\'t blocked any users yet.' },
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
2020-03-24 04:39:12 +00:00
})
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
accountIds: state.getIn(['user_lists', 'blocks', me, 'items']),
hasMore: !!state.getIn(['user_lists', 'blocks', me, 'next']),
isLoading: state.getIn(['user_lists', 'blocks', me, 'isLoading']),
})
const mapDispatchToProps = (dispatch) => ({
onFetchBlocks: () => dispatch(fetchBlocks()),
onExpandBlocks: () => dispatch(expandBlocks()),
2020-03-24 04:39:12 +00:00
})
2020-02-25 16:04:44 +00:00
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class Blocks extends ImmutablePureComponent {
static propTypes = {
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
intl: PropTypes.object.isRequired,
isLoading: PropTypes.bool,
onExpandBlocks: PropTypes.func.isRequired,
onFetchBlocks: PropTypes.func.isRequired,
2020-03-24 04:39:12 +00:00
}
componentDidMount() {
this.props.onFetchBlocks()
}
handleLoadMore = debounce(() => {
this.props.onExpandBlocks()
2020-03-24 04:39:12 +00:00
}, 300, { leading: true })
2020-03-24 04:39:12 +00:00
render() {
const {
intl,
accountIds,
2020-05-01 06:50:27 +01:00
hasMore,
isLoading,
2020-03-24 04:39:12 +00:00
} = this.props
2020-03-24 04:39:12 +00:00
const emptyMessage = intl.formatMessage(messages.empty)
return (
<Block>
<div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter].join(' ')}>
<Heading size='h2'>
{intl.formatMessage(messages.blocks)}
</Heading>
</div>
<ScrollableList
scrollKey='blocked_accounts'
onLoadMore={this.handleLoadMore}
hasMore={hasMore}
isLoading={isLoading}
emptyMessage={emptyMessage}
>
{
accountIds && accountIds.map((id) =>
<Account
key={`blocked-accounts-${id}`}
id={id}
compact
/>
)
}
</ScrollableList>
</Block>
2020-03-24 04:39:12 +00:00
)
}
}