diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 0077f193bca..1ae596e4a77 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,38 @@ 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', {})), + + openOnboardingModal: (e) => { + e.preventDefault(); + this.props.dispatch(openModal('ONBOARDING')); + }, +}); + +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 +86,29 @@ 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, + openOnboardingModal: PropTypes.func.isRequired, }; - openSettings = () => { - this.props.dispatch(openModal('SETTINGS', {})); - } - - openOnboardingModal = (e) => { - e.preventDefault(); - this.props.dispatch(openModal('ONBOARDING')); - } - componentWillMount () { - this.props.dispatch(fetchLists()); + fetchLists(); + } + + componentDidMount () { + const { myAccount, fetchFollowRequests } = this.props; + + 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 +119,7 @@ export default class GettingStarted extends ImmutablePureComponent { } if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) { - navItems.push(); + navItems.push(); } if (!columns.find(item => item.get('id') === 'COMMUNITY')) { @@ -105,7 +136,7 @@ export default class GettingStarted extends ImmutablePureComponent { } if (myAccount.get('locked')) { - navItems.push(); + navItems.push(); } navItems.push(); @@ -129,7 +160,7 @@ export default class GettingStarted extends ImmutablePureComponent { {listItems} - + diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js index b845d18957d..b058aa963fc 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js @@ -2,12 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; -const ColumnLink = ({ icon, text, to, onClick, href, method }) => { +const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { + const badgeElement = typeof badge !== 'undefined' ? {badge} : null; + if (href) { return ( {text} + {badgeElement} ); } else if (to) { @@ -15,6 +18,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method }) => { {text} + {badgeElement} ); } else { @@ -22,6 +26,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method }) => { {text} + {badgeElement} ); } @@ -34,6 +39,7 @@ ColumnLink.propTypes = { onClick: PropTypes.func, href: PropTypes.string, method: PropTypes.string, + badge: PropTypes.node, }; export default ColumnLink; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8f06209c618..ebc4ee38361 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -737,6 +737,17 @@ } } +.column-link__badge { + display: inline-block; + border-radius: 4px; + font-size: 12px; + line-height: 19px; + font-weight: 500; + background: $ui-base-color; + padding: 4px 8px; + margin: -6px 10px; +} + .keyboard-shortcuts { padding: 8px 0 0; overflow: hidden;