From bfb6cc5f2c792852cdbc74bc9634289a4298c1b8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Oct 2016 20:26:49 +0200 Subject: Make suggestions box also use user list components --- .../compose/components/suggestions_box.jsx | 59 ++++------------------ .../compose/containers/suggestions_container.jsx | 3 +- .../features/followers/components/account.jsx | 10 +++- .../javascripts/components/selectors/index.jsx | 6 --- 4 files changed, 20 insertions(+), 58 deletions(-) (limited to 'app/assets/javascripts/components') 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
; } let nextLink = ''; - if (accounts.size > perWindow) { - nextLink = Next; + if (accountIds.size > perWindow) { + nextLink = Refresh; } return ( @@ -98,21 +75,7 @@ const SuggestionsBox = React.createClass({ Who to follow {nextLink} - {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 ( - -
- {displayName} - @{account.get('acct')} - - ) - })} + {accountIds.skip(perWindow * this.state.index).take(perWindow).map(accountId => )}
); } 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); diff --git a/app/assets/javascripts/components/features/followers/components/account.jsx b/app/assets/javascripts/components/features/followers/components/account.jsx index 27f34c477..9d863a1ae 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
; @@ -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 =
{account.get('note')}
; } diff --git a/app/assets/javascripts/components/selectors/index.jsx b/app/assets/javascripts/components/selectors/index.jsx index 21ee96906..2bbbd3f70 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)); -}); -- cgit