From bfb6cc5f2c792852cdbc74bc9634289a4298c1b8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko <eugen@zeonfederated.com> Date: Fri, 28 Oct 2016 20:26:49 +0200 Subject: [PATCH] Make suggestions box also use user list components --- .../compose/components/suggestions_box.jsx | 59 ++++--------------- .../containers/suggestions_container.jsx | 3 +- .../features/followers/components/account.jsx | 10 +++- .../components/selectors/index.jsx | 6 -- app/models/follow_suggestion.rb | 1 + 5 files changed, 21 insertions(+), 58 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 c46b8253476..70c2fca6e01 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 7163cb10047..12ee1ebc2f9 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); diff --git a/app/assets/javascripts/components/features/followers/components/account.jsx b/app/assets/javascripts/components/features/followers/components/account.jsx index 27f34c47731..9d863a1aefd 100644 --- a/app/assets/javascripts/components/features/followers/components/account.jsx +++ b/app/assets/javascripts/components/features/followers/components/account.jsx @@ -38,6 +38,12 @@ const Account = React.createClass({ withNote: React.PropTypes.bool }, + getDefaultProps () { + return { + withNote: true + }; + }, + mixins: [PureRenderMixin], handleFollow () { @@ -45,7 +51,7 @@ const Account = React.createClass({ }, render () { - const { account, me } = this.props; + const { account, me, withNote } = this.props; if (!account) { return <div />; @@ -53,7 +59,7 @@ const Account = React.createClass({ let note, buttons; - if (account.get('note').length > 0) { + if (account.get('note').length > 0 && withNote) { note = <div style={noteStyle}>{account.get('note')}</div>; } diff --git a/app/assets/javascripts/components/selectors/index.jsx b/app/assets/javascripts/components/selectors/index.jsx index 21ee9690617..2bbbd3f70f9 100644 --- a/app/assets/javascripts/components/selectors/index.jsx +++ b/app/assets/javascripts/components/selectors/index.jsx @@ -66,9 +66,3 @@ export const getNotifications = createSelector([getNotificationsBase], (base) => return arr; }); - -const getSuggestionsBase = (state) => state.get('suggestions'); - -export const getSuggestions = createSelector([getSuggestionsBase, getAccounts], (base, accounts) => { - return base.map(accountId => accounts.get(accountId)); -}); diff --git a/app/models/follow_suggestion.rb b/app/models/follow_suggestion.rb index ff07722cadc..146e515a067 100644 --- a/app/models/follow_suggestion.rb +++ b/app/models/follow_suggestion.rb @@ -38,6 +38,7 @@ END query = <<END MATCH (b) +WHERE b.account_id <> {id} RETURN b.account_id ORDER BY b.nodeRank DESC LIMIT {limit}