import React from 'react' import PropTypes from 'prop-types' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { connect } from 'react-redux' import { withRouter } from 'react-router-dom' import { me } from '../initial_state' import { openSidebar } from '../actions/sidebar' import { CX } from '../constants' import Button from './button' import Avatar from './avatar' class FooterBar extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, } handleOnOpenSidebar = () => { this.props.onOpenSidebar() } render() { const { account, 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.indexOf('/notifications') > -1, }, { to: '/groups', icon: 'group', title: 'Groups', active: currentPathname.indexOf('/groups') > -1, }, { to: '/search', icon: 'explore', title: 'Explore', active: currentPathname.indexOf('/search') > -1, }, { to: '/news', icon: 'news', title: 'News', isHidden: !!me, active: currentPathname.indexOf('/news') > -1, }, { title: 'Menu', isHidden: !me, active: !!account ? currentPathname === `/${account.get('username')}` : false, onClick: this.handleOnOpenSidebar, }, ] return (
{ buttons.map((props, i) => { if (props.isHidden) return null const classes = CX({ borderTop2PX: 1, borderColorTransparent: !props.active, borderColorBrand: props.active, h100PC: 1, minH58PX: 1, px15: 1, flexGrow1: 1, aiCenter: 1, jcCenter: 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 = (
) } else if (props.title === 'Menu' && !!account) { const avatarContainerClasses = CX({ d: 1, circle: 1, boxShadowProfileAvatarFooter: !!props.active, }) childIcon = (
) } return ( ) }) }
) } } const mapDispatchToProps = (dispatch) => ({ onOpenSidebar() { dispatch(openSidebar()) }, }) const mapStateToProps = (state) => ({ account: !!me ? state.getIn(['accounts', me]) : undefined, notificationCount: !!me ? state.getIn(['notifications', 'unread']) : 0, homeItemsQueueCount: !!me ? state.getIn(['timelines', 'home', 'totalQueuedItemsCount']) : 0, }) FooterBar.propTypes = { account: ImmutablePropTypes.map, onOpenSidebar: PropTypes.func.isRequired, notificationCount: PropTypes.number.isRequired, homeItemsQueueCount: PropTypes.number.isRequired, } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(FooterBar))