import { withRouter } from 'react-router-dom' import { me } from '../initial_state' import { CX } from '../constants' import Button from './button' const mapStateToProps = (state) => ({ notificationCount: !!me ? state.getIn(['notifications', 'unread']) : 0, homeItemsQueueCount: !!me ? state.getIn(['timelines', 'home', 'totalQueuedItemsCount']) : 0, }) export default @withRouter @connect(mapStateToProps) class FooterBar extends PureComponent { static contextTypes = { router: PropTypes.object, } static propTypes = { notificationCount: PropTypes.number.isRequired, homeItemsQueueCount: PropTypes.number.isRequired, } render() { const { notificationCount, homeItemsQueueCount, } = this.props const noRouter = !this.context.router const currentPathname = noRouter ? '' : this.context.router.route.location.pathname const buttons = [ { to: !me ? '/' : '/home', icon: 'home', title: 'Home', active: !me ? currentPathname === '/' : currentPathname === '/home', }, { to: '/notifications', icon: 'notifications', title: 'Notifications', isHidden: !me, active: currentPathname === '/notifications', }, { to: '/groups', icon: 'group', title: 'Groups', active: currentPathname === '/groups', }, { to: '/explore', icon: 'explore', title: 'Explore', isHidden: !me, active: currentPathname === '/explore', }, { to: '/news', icon: 'news', title: 'News', active: currentPathname === '/news', }, ] return (
{ buttons.map((props) => { if (props.isHidden) return null const classes = CX({ borderTop2PX: 1, borderColorTransparent: !props.active, borderColorBrand: props.active, height100PC: 1, heightMin58PX: 1, px15: 1, flexGrow1: 1, alignItemsCenter: 1, justifyContentCenter: 1, }) const color = props.active ? 'brand' : 'secondary' let childIcon; if (props.to === '/notifications' && notificationCount > 0) { childIcon = (
{notificationCount}
) } else if (props.to === '/home' && homeItemsQueueCount > 0) { childIcon = (
) } return ( ) }) }
) } }