import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { injectIntl, defineMessages } from 'react-intl' import * as Constants from '../constants' import Button from './button' import { closeSidebar } from '../actions/sidebar' import { openModal } from '../actions/modal' import { openPopover } from '../actions/popover' import { me } from '../initial_state' import { makeGetAccount } from '../selectors' import Responsive from '../features/ui/util/responsive_component' import SidebarSectionTitle from './sidebar_section_title' import SidebarSectionItem from './sidebar_section_item' import Heading from './heading' import BackButton from './back_button' import Pills from './pills' const messages = defineMessages({ followers: { id: 'account.followers', defaultMessage: 'Followers' }, follows: { id: 'account.follows', defaultMessage: 'Following' }, profile: { id: 'account.profile', defaultMessage: 'Profile' }, preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' }, logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, lists: { id: 'column.lists', defaultMessage: 'Lists' }, apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' }, more: { id: 'sidebar.more', defaultMessage: 'More' }, explore: { id: 'explore', defaultMessage: 'Explore' }, menu: { id: 'menu', defaultMessage: 'Menu' }, pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' }, trends: { id: 'promo.trends', defaultMessage: 'Trends' }, search: { id: 'tabs_bar.search', defaultMessage: 'Search' }, shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' }, donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' }, }) const mapStateToProps = (state) => ({ account: makeGetAccount()(state, me), moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE', notificationCount: state.getIn(['notifications', 'unread']), homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']), }) const mapDispatchToProps = (dispatch) => ({ onClose() { dispatch(closeSidebar()) }, openSidebarMorePopover(props) { dispatch(openPopover('SIDEBAR_MORE', props)) }, onOpenComposeModal() { dispatch(openModal('COMPOSE')) }, }) export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl class Sidebar extends ImmutablePureComponent { static propTypes = { intl: PropTypes.object.isRequired, account: ImmutablePropTypes.map, moreOpen: PropTypes.bool, onClose: PropTypes.func.isRequired, onOpenComposeModal: PropTypes.func.isRequired, openSidebarMorePopover: PropTypes.func.isRequired, notificationCount: PropTypes.number.isRequired, homeItemsQueueCount: PropTypes.number.isRequired, actions: PropTypes.array, tabs: PropTypes.array, title: PropTypes.string, showBackBtn: PropTypes.bool, } handleOpenComposeModal = () => { this.props.onOpenComposeModal() } handleOpenSidebarMorePopover = () => { this.props.openSidebarMorePopover({ targetRef: this.moreBtnRef, position: 'top', }) } setMoreButtonRef = n => { this.moreBtnRef = n } render() { const { intl, account, notificationCount, homeItemsQueueCount, moreOpen, actions, tabs, title, showBackBtn, } = this.props // : todo : if (!me || !account) return null const acct = account.get('acct') const isPro = account.get('is_pro') const menuItems = [ { title: 'Home', icon: 'home', to: '/home', count: homeItemsQueueCount, }, { title: 'Notifications', icon: 'notifications', to: '/notifications', count: notificationCount, }, { title: 'Search', icon: 'search-alt', to: '/search', hidden: true, // : todo : show only when search on top is not visible }, { title: 'Groups', icon: 'group', to: '/groups', }, { title: 'Lists', icon: 'list', to: '/lists', }, { title: 'More', icon: 'more', onClick: this.handleOpenSidebarMorePopover, buttonRef: this.setMoreButtonRef, active: moreOpen, }, ] const shortcutItems = [ // { // title: 'Meme Group', // icon: 'group', // to: '/', // count: 0, // }, // { // title: '@andrew', // image: 'http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139', // to: '/', // count: 3, // }, ] const exploreItems = [ { title: 'All', icon: 'community', to: '/timeline/all', }, { title: 'Chat', icon: 'chat', href: 'https://chat.gab.com', }, { title: 'Apps', icon: 'apps', href: 'https://apps.gab.com', }, { title: 'Shop', icon: 'shop', href: 'https://shop.dissenter.com', }, { title: 'Trends', icon: 'trends', href: 'https://trends.gab.com', }, { title: 'Dissenter', icon: 'dissenter', href: 'https://dissenter.com', }, ] return (
{ !!title &&
{ showBackBtn && } {title} { !!actions &&
{ actions.map((action, i) => (
}
} { !!tabs &&
}
) } }