Port 0e445ebb13
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
local
parent
d99a661f08
commit
ff88387a4a
8 changed files with 89 additions and 29 deletions
@ -0,0 +1,20 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import Icon from 'flavours/glitch/components/icon'; |
||||||
|
|
||||||
|
const formatNumber = num => num > 40 ? '40+' : num; |
||||||
|
|
||||||
|
const IconWithBadge = ({ id, count, className }) => ( |
||||||
|
<i className='icon-with-badge'> |
||||||
|
<Icon icon={id} fixedWidth className={className} /> |
||||||
|
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
||||||
|
</i> |
||||||
|
); |
||||||
|
|
||||||
|
IconWithBadge.propTypes = { |
||||||
|
id: PropTypes.string.isRequired, |
||||||
|
count: PropTypes.number.isRequired, |
||||||
|
className: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
export default IconWithBadge; |
@ -0,0 +1,44 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
import { NavLink, withRouter } from 'react-router-dom'; |
||||||
|
import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; |
||||||
|
import { me } from 'flavours/glitch/util/initial_state'; |
||||||
|
import { List as ImmutableList } from 'immutable'; |
||||||
|
import { FormattedMessage } from 'react-intl'; |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
locked: state.getIn(['accounts', me, 'locked']), |
||||||
|
count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, |
||||||
|
}); |
||||||
|
|
||||||
|
export default @withRouter |
||||||
|
@connect(mapStateToProps) |
||||||
|
class FollowRequestsNavLink extends React.Component { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
dispatch: PropTypes.func.isRequired, |
||||||
|
locked: PropTypes.bool, |
||||||
|
count: PropTypes.number.isRequired, |
||||||
|
}; |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
const { dispatch, locked } = this.props; |
||||||
|
|
||||||
|
if (locked) { |
||||||
|
dispatch(fetchFollowRequests()); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { locked, count } = this.props; |
||||||
|
|
||||||
|
if (!locked || count === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return <NavLink className='column-link column-link--transparent' to='/follow_requests'><IconWithBadge className='column-link__icon' id='user-plus' count={count} /><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></NavLink>; |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -1,26 +1,9 @@ |
|||||||
import React from 'react'; |
|
||||||
import PropTypes from 'prop-types'; |
|
||||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||||
import Icon from 'flavours/glitch/components/icon'; |
import IconWithBadge from 'flavours/glitch/components/icon'; |
||||||
|
|
||||||
const mapStateToProps = state => ({ |
const mapStateToProps = state => ({ |
||||||
count: state.getIn(['notifications', 'unread']), |
count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0, |
||||||
showBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), |
icon: 'bell', |
||||||
}); |
}); |
||||||
|
|
||||||
const formatNumber = num => num > 99 ? '99+' : num; |
export default connect(mapStateToProps)(IconWithBadge); |
||||||
|
|
||||||
const NotificationsCounterIcon = ({ count, className, showBadge }) => ( |
|
||||||
<i className='icon-with-badge'> |
|
||||||
<Icon icon='bell' fixedWidth className={className} /> |
|
||||||
{showBadge && count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>} |
|
||||||
</i> |
|
||||||
); |
|
||||||
|
|
||||||
NotificationsCounterIcon.propTypes = { |
|
||||||
count: PropTypes.number.isRequired, |
|
||||||
showBadge: PropTypes.bool, |
|
||||||
className: PropTypes.string, |
|
||||||
}; |
|
||||||
|
|
||||||
export default connect(mapStateToProps)(NotificationsCounterIcon); |
|
||||||
|
Loading…
Reference in new issue