import { withRouter } from 'react-router-dom' import { me } from '../initial_state' import { CX } from '../constants' import Button from './button' const mapStateToProps = (state) => ({ notificationCount: state.getIn(['notifications', 'unread']), }) export default @withRouter @connect(mapStateToProps) class FooterBar extends PureComponent { static contextTypes = { router: PropTypes.object, } static propTypes = { notificationCount: PropTypes.number.isRequired, } render() { const { notificationCount } = this.props if (!me) return false const noRouter = !this.context.router const currentPathname = noRouter ? '' : this.context.router.route.location.pathname const buttons = [ { to: '/home', icon: 'home', title: 'Home', active: currentPathname === '/home', }, { to: '/notifications', icon: 'notifications', title: 'Notifications', active: currentPathname === '/notifications', }, { to: '/groups', icon: 'group', title: 'Groups', active: currentPathname === '/groups', }, { href: 'https://trends.gab.com', icon: 'trends', title: 'Trends', }, ] return (
{ buttons.map((props) => { 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' const childIcon = props.to === '/notifications' && notificationCount > 0 ? (
{notificationCount}
) : null return ( ) }) }
) } }