Make suggestions box also use user list components

2 files changed, 12 insertions, 50 deletions

diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
index c46b82534..70c2fca6e 100644
--- a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
+++ b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
@@ -1,11 +1,8 @@
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar             from '../../../components/avatar';
-import { Link }           from 'react-router';
+import AccountContainer   from '../../followers/containers/account_container';
 
 const outerStyle = {
-  marginBottom: '10px',
-  borderTop: '1px solid #616b86',
   position: 'relative'
 };
 
@@ -16,32 +13,12 @@ const headerStyle = {
   padding: '10px',
   color: '#9baec8',
   background: '#454b5e',
-  width: '120px',
-  marginTop: '-18px'
-};
-
-const itemStyle = {
-  display: 'block',
-  padding: '10px',
-  color: '#9baec8',
-  overflow: 'hidden',
-  textDecoration: 'none'
-};
-
-const displayNameStyle = {
-  display: 'block',
-  fontWeight: '500',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-};
-
-const acctStyle = {
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
+  overflow: 'hidden'
 };
 
 const nextStyle = {
+  display: 'inline-block',
+  float: 'right',
   fontWeight: '400',
   color: '#2b90d9'
 };
@@ -49,7 +26,7 @@ const nextStyle = {
 const SuggestionsBox = React.createClass({
 
   propTypes: {
-    accounts: ImmutablePropTypes.list.isRequired,
+    accountIds: ImmutablePropTypes.list,
     perWindow: React.PropTypes.number
   },
 
@@ -72,7 +49,7 @@ const SuggestionsBox = React.createClass({
 
     let newIndex = this.state.index + 1;
 
-    if (this.props.accounts.skip(this.props.perWindow * newIndex).size === 0) {
+    if (this.props.accountIds.skip(this.props.perWindow * newIndex).size === 0) {
       newIndex = 0;
     }
 
@@ -80,16 +57,16 @@ const SuggestionsBox = React.createClass({
   },
 
   render () {
-    const { accounts, perWindow } = this.props;
+    const { accountIds, perWindow } = this.props;
 
-    if (accounts.size === 0) {
+    if (!accountIds || accountIds.size === 0) {
       return <div />;
     }
 
     let nextLink = '';
 
-    if (accounts.size > perWindow) {
-      nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}>Next</a>;
+    if (accountIds.size > perWindow) {
+      nextLink = <a href='#' style={nextStyle} onClick={this.handleNextClick}>Refresh</a>;
     }
 
     return (
@@ -98,21 +75,7 @@ const SuggestionsBox = React.createClass({
           Who to follow {nextLink}
         </strong>
 
-        {accounts.skip(perWindow * this.state.index).take(perWindow).map(account => {
-          let displayName = account.get('display_name');
-
-          if (displayName.length === 0) {
-            displayName = account.get('username');
-          }
-
-          return (
-            <Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}>
-              <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
-              <strong style={displayNameStyle}>{displayName}</strong>
-              <span style={acctStyle}>@{account.get('acct')}</span>
-            </Link>
-          )
-        })}
+        {accountIds.skip(perWindow * this.state.index).take(perWindow).map(accountId => <AccountContainer key={accountId} id={accountId} withNote={false} />)}
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx b/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx
index 7163cb100..12ee1ebc2 100644
--- a/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx
+++ b/app/assets/javascripts/components/features/compose/containers/suggestions_container.jsx
@@ -1,9 +1,8 @@
 import { connect }           from 'react-redux';
-import { getSuggestions }    from '../../../selectors';
 import SuggestionsBox        from '../components/suggestions_box';
 
 const mapStateToProps = (state) => ({
-  accounts: getSuggestions(state)
+  accountIds: state.get('suggestions')
 });
 
 export default connect(mapStateToProps)(SuggestionsBox);