Updated components to use BlockHeading

• Updated:
- components to use BlockHeading

app/javascript/gabsocial/features/group_removed_accounts.js

@@ -1,6 +1,8 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
 import debounce from 'lodash.debounce'
+import isObject from 'lodash.isobject'
 import {
 	fetchRemovedAccounts,
 	expandRemovedAccounts,
@@ -8,70 +10,102 @@ import {
 } from '../actions/groups'
 import { FormattedMessage } from 'react-intl'
 import Account from '../components/account'
+import Block from '../components/block'
+import BlockHeading from '../components/block_heading'
+import ColumnIndicator from '../components/column_indicator'
 import ScrollableList from '../components/scrollable_list'
-import { defineMessages, injectIntl } from 'react-intl'
 
 const messages = defineMessages({
 	remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
 })
 
-const mapStateToProps = (state, { groupId }) => ({
-	group: state.getIn(['groups', groupId]),
-	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
-	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+const mapStateToProps = (state, { params }) => {
+	const groupId = isObject(params) ? params['id'] : -1
+	const group = groupId === -1 ? null : state.getIn(['groups', groupId])
+
+	return {
+		group,
+		groupId,
+		accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
+		hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+	}
+}
+
+const mapDispatchToProps = (dispatch) => ({
+	onFetchRemovedAccounts(groupId) {
+		dispatch(fetchRemovedAccounts(groupId))
+	},
+	onExpandRemovedAccounts(groupId) {
+		dispatch(expandRemovedAccounts(groupId))
+	},
+	onRemoveRemovedAccount(groupId, accountId) {
+		dispatch(removeRemovedAccount(groupId, accountId))
+	},
 })
 
 export default
-@connect(mapStateToProps)
 @injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupRemovedAccounts extends ImmutablePureComponent {
 
 	static propTypes = {
 		groupId: PropTypes.string.isRequired,
-		dispatch: PropTypes.func.isRequired,
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
+		onFetchRemovedAccounts: PropTypes.func.isRequired,
+		onExpandRemovedAccounts: PropTypes.func.isRequired,
+		onRemoveRemovedAccount: PropTypes.func.isRequired,
 	}
 
 	componentWillMount() {
 		const { groupId } = this.props
 
-		this.props.dispatch(fetchRemovedAccounts(groupId))
+		this.props.onFetchRemovedAccounts(groupId)
 	}
 
 	componentWillReceiveProps(nextProps) {
 		if (nextProps.groupId !== this.props.groupId) {
-			this.props.dispatch(fetchRemovedAccounts(nextProps.groupId))
+			this.props.onFetchRemovedAccounts(nextProps.groupId)
 		}
 	}
 
 	handleLoadMore = debounce(() => {
-		this.props.dispatch(expandRemovedAccounts(this.props.groupId))
+		this.props.onExpandRemovedAccounts(this.props.groupId)
 	}, 300, { leading: true })
 
 	render() {
-		const { accountIds, hasMore, group, intl } = this.props
+		const {
+			accountIds,
+			hasMore,
+			group,
+			intl,
+		} = this.props
+
+		if (!group) return <ColumnIndicator type='loading' />
 
 		return (
-			<ScrollableList
-				scrollKey='removed_accounts'
-				hasMore={hasMore}
-				showLoading={(!group || !accountIds)}
-				onLoadMore={this.handleLoadMore}
-				emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
-			>
-				{
-					accountIds && accountIds.map((id) => (
-						<Account
-							key={id}
-							id={id}
-							actionIcon='subtract'
-							onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
-							actionTitle={intl.formatMessage(messages.remove)}
-						/>
-					))
-				}
-			</ScrollableList>
+			<Block>
+				<BlockHeading title='Removed Accounts' />
+				<ScrollableList
+					scrollKey='removed_accounts'
+					hasMore={hasMore}
+					showLoading={(!group || !accountIds)}
+					onLoadMore={this.handleLoadMore}
+					emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
+				>
+					{
+						accountIds && accountIds.map((id) => (
+							<Account
+								key={id}
+								id={id}
+								actionIcon='subtract'
+								onActionClick={() => this.props.onRemoveRemovedAccount(group.get('id'), id)}
+								actionTitle={intl.formatMessage(messages.remove)}
+							/>
+						))
+					}
+				</ScrollableList>
+			</Block>
 		)
 	}