diff options
Diffstat (limited to 'app/assets/javascripts/components/features/compose/components/suggestions_box.jsx')
-rw-r--r-- | app/assets/javascripts/components/features/compose/components/suggestions_box.jsx | 59 |
1 files changed, 11 insertions, 48 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> ); } |