Progress

app/javascript/gabsocial/features/blocked_domains.js

@@ -1,62 +1,86 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { debounce } from 'lodash';
-import { fetchDomainBlocks, expandDomainBlocks } from '../actions/domain_blocks';
-import DomainContainer from '../containers/domain_container';
-import ColumnIndicator from '../components/column_indicator';
-import ScrollableList from '../components/scrollable_list';
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { debounce } from 'lodash'
+import { unblockDomain, fetchDomainBlocks, expandDomainBlocks } from '../actions/domain_blocks'
+import ColumnIndicator from '../components/column_indicator'
+import List from '../components/list'
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
+  emptyMessage: { id: 'empty_column.domain_blocks', defaultMessage: 'There are no hidden domains yet.' },
 });
 
+const mapDispatchToProps = (dispatch) => ({
+  onExpandDomainBlocks() {
+    dispatch(expandDomainBlocks())
+  },
+
+  onFetchDomainBlocks() {
+    dispatch(fetchDomainBlocks())
+  },
+
+  onUnblockDomain (domain) {
+    dispatch(unblockDomain(domain))
+  },
+})
+
 const mapStateToProps = state => ({
   domains: state.getIn(['domain_lists', 'blocks', 'items']),
   hasMore: !!state.getIn(['domain_lists', 'blocks', 'next']),
-});
+})
 
 export default
-@connect(mapStateToProps)
 @injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
 class Blocks extends ImmutablePureComponent {
 
   static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
     hasMore: PropTypes.bool,
     domains: ImmutablePropTypes.orderedSet,
-    intl: PropTypes.object.isRequired,
-  };
+    onUnblockDomain: PropTypes.func.isRequired,
+    onFetchDomainBlocks: PropTypes.func.isRequired,
+    onExpandDomainBlocks: PropTypes.func.isRequired,
+  }
 
   componentWillMount() {
-    this.props.dispatch(fetchDomainBlocks());
+    this.props.onFetchDomainBlocks()
+  }
+
+  handleUnblockDomain = (domain) => {
+    this.props.onUnblockDomain(domain)
   }
 
   handleLoadMore = debounce(() => {
-    this.props.dispatch(expandDomainBlocks());
-  }, 300, { leading: true });
+    this.props.onExpandDomainBlocks()
+  }, 300, { leading: true })
 
   render() {
-    const { intl, domains, hasMore } = this.props;
+    const { intl, domains, hasMore } = this.props
 
     if (!domains) {
-      return (<ColumnIndicator type='loading' />);
+      return <ColumnIndicator type='loading' />
     }
 
+    const items = domains.map((domain) => {
+      return {
+        title: intl.formatMessage(messages.unblockDomain, { domain }),
+        onClick: () => this.handleUnblockDomain(domain),
+        hideArrow: true,
+      }
+    })
+
     return (
-      <ScrollableList
+      <List
         scrollKey='domain_blocks'
         onLoadMore={this.handleLoadMore}
         hasMore={hasMore}
-        emptyMessage={<FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />}
-      >
-        {domains.map(domain =>
-          <DomainContainer key={domain} domain={domain} />
-        )}
-      </ScrollableList>
-    );
+        emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        items={items}
+      />
+    )
   }
 
 }