import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { injectIntl, defineMessages } from 'react-intl' import { BREAKPOINT_SMALL, } from '../constants' import Button from './button' import { closeSidebar } from '../actions/sidebar' import { openModal } from '../actions/modal' import { openPopover } from '../actions/popover' import { fetchShortcuts } from '../actions/shortcuts' 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' import Text from './text' class Sidebar extends ImmutablePureComponent { state = { hoveringShortcuts: false, } componentDidMount() { this.props.onFetchShortcuts() } handleOpenComposeModal = () => { this.props.onOpenComposeModal() } handleOpenSidebarMorePopover = () => { this.props.openSidebarMorePopover({ targetRef: this.moreBtnRef, position: 'top', }) } handleMouseEnterShortcuts = () => { this.setState({ hoveringShortcuts: true }) } handleMouseLeaveShortcuts = () => { this.setState({ hoveringShortcuts: false }) } setMoreButtonRef = n => { this.moreBtnRef = n } render() { const { intl, account, notificationCount, homeItemsQueueCount, moreOpen, actions, tabs, title, showBackBtn, shortcuts, } = this.props const { hoveringShortcuts } = this.state if (!me || !account) return null 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: 'Explore', icon: 'explore', to: '/explore', }, { title: 'Pro Feed', icon: 'explore', to: '/timeline/pro', }, { title: 'News', icon: 'news', to: '/news', }, { title: 'More', icon: 'more', onClick: this.handleOpenSidebarMorePopover, buttonRef: this.setMoreButtonRef, active: moreOpen, }, ] let shortcutItems = [] if (!!shortcuts) { shortcuts.forEach((s) => { shortcutItems.push({ to: s.get('to'), title: s.get('title'), image: s.get('image'), }) }) } const exploreItems = [ { 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 &&
}
) } } 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' }, news: { id: 'news', defaultMessage: 'News' }, 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' }, shortcuts: { id: 'navigation_bar.shortcuts', defaultMessage: 'Shortcuts' }, all: { id: 'all', defaultMessage: 'All' }, edit: { id: 'edit', defaultMessage: 'Edit' }, }) const mapStateToProps = (state) => ({ account: makeGetAccount()(state, me), shortcuts: state.getIn(['shortcuts', 'items']), 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')) }, onFetchShortcuts() { dispatch(fetchShortcuts()) }, }) Sidebar.propTypes = { intl: PropTypes.object.isRequired, account: ImmutablePropTypes.map, moreOpen: PropTypes.bool, onClose: PropTypes.func.isRequired, onOpenComposeModal: PropTypes.func.isRequired, onFetchShortcuts: 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, shortcuts: ImmutablePropTypes.list, } export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Sidebar))