diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/getting_started')
-rw-r--r-- | app/javascript/flavours/glitch/features/getting_started/index.js | 51 |
1 files changed, 37 insertions, 14 deletions
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 0077f193b..bf9fe118a 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -9,6 +9,8 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from 'flavours/glitch/util/initial_state'; +import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; +import { List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; import { fetchLists } from 'flavours/glitch/actions/lists'; @@ -45,13 +47,31 @@ const makeMapStateToProps = () => { lists: getOrderedLists(state), myAccount: state.getIn(['accounts', me]), columns: state.getIn(['settings', 'columns']), + unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, + unreadNotifications: state.getIn(['notifications', 'unread']), }); return mapStateToProps; }; +const mapDispatchToProps = dispatch => ({ + fetchFollowRequests: () => dispatch(fetchFollowRequests()), + fetchLists: () => dispatch(fetchLists()), + openSettings: () => dispatch(openModal('SETTINGS', {})), +}); + +const badgeDisplay = (number, limit) => { + if (number === 0) { + return undefined; + } else if (limit && number >= limit) { + return `${limit}+`; + } else { + return number; + } +}; + +@connect(makeMapStateToProps, mapDispatchToProps) @injectIntl -@connect(makeMapStateToProps) export default class GettingStarted extends ImmutablePureComponent { static propTypes = { @@ -59,25 +79,28 @@ export default class GettingStarted extends ImmutablePureComponent { myAccount: ImmutablePropTypes.map.isRequired, columns: ImmutablePropTypes.list, multiColumn: PropTypes.bool, - dispatch: PropTypes.func.isRequired, + fetchFollowRequests: PropTypes.func.isRequired, + unreadFollowRequests: PropTypes.number, + unreadNotifications: PropTypes.number, lists: ImmutablePropTypes.list, + fetchLists: PropTypes.func.isRequired, + openSettings: PropTypes.func.isRequired, }; - openSettings = () => { - this.props.dispatch(openModal('SETTINGS', {})); + componentWillMount () { + this.props.fetchLists(); } - openOnboardingModal = (e) => { - e.preventDefault(); - this.props.dispatch(openModal('ONBOARDING')); - } + componentDidMount () { + const { myAccount, fetchFollowRequests } = this.props; - componentWillMount () { - this.props.dispatch(fetchLists()); + if (myAccount.get('locked')) { + fetchFollowRequests(); + } } render () { - const { intl, myAccount, columns, multiColumn, lists } = this.props; + const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props; const navItems = []; let listItems = []; @@ -88,7 +111,7 @@ export default class GettingStarted extends ImmutablePureComponent { } if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) { - navItems.push(<ColumnLink key='1' icon='bell' text={intl.formatMessage(messages.notifications)} to='/notifications' />); + navItems.push(<ColumnLink key='1' icon='bell' text={intl.formatMessage(messages.notifications)} badge={badgeDisplay(unreadNotifications)} to='/notifications' />); } if (!columns.find(item => item.get('id') === 'COMMUNITY')) { @@ -105,7 +128,7 @@ export default class GettingStarted extends ImmutablePureComponent { } if (myAccount.get('locked')) { - navItems.push(<ColumnLink key='5' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />); + navItems.push(<ColumnLink key='5' icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />); } navItems.push(<ColumnLink key='6' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />); @@ -129,7 +152,7 @@ export default class GettingStarted extends ImmutablePureComponent { {listItems} <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> - <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={this.openSettings} /> + <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} /> <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> </div> |