gab-social/app/javascript/gabsocial/components/sidebar.js

295 lines
9.3 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'
2020-04-09 20:18:14 +01:00
import * as Constants from '../constants'
2020-02-19 23:57:07 +00:00
import Button from './button'
import { closeSidebar } from '../actions/sidebar'
2020-02-24 21:56:07 +00:00
import { openModal } from '../actions/modal'
2020-03-14 17:31:29 +00:00
import { openPopover } from '../actions/popover'
2020-02-19 23:57:07 +00:00
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
2020-04-09 20:18:14 +01:00
import Responsive from '../features/ui/util/responsive_component'
2020-02-19 23:57:07 +00:00
import SidebarSectionTitle from './sidebar_section_title'
import SidebarSectionItem from './sidebar_section_item'
2020-04-29 23:32:49 +01:00
import Heading from './heading'
2020-05-09 03:17:19 +01:00
import BackButton from './back_button'
2020-04-29 23:32:49 +01:00
import Pills from './pills'
2020-02-19 23:57:07 +00:00
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Following' },
2020-02-19 23:57:07 +00:00
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' },
2020-04-08 02:06:59 +01:00
lists: { id: 'column.lists', defaultMessage: 'Lists' },
2020-02-19 23:57:07 +00:00
apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
more: { id: 'sidebar.more', defaultMessage: 'More' },
2020-04-29 23:32:49 +01:00
explore: { id: 'explore', defaultMessage: 'Explore' },
menu: { id: 'menu', defaultMessage: 'Menu' },
2020-02-19 23:57:07 +00:00
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' },
})
2020-05-03 06:22:49 +01:00
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']),
})
2020-02-19 23:57:07 +00:00
const mapDispatchToProps = (dispatch) => ({
onClose() {
dispatch(closeSidebar())
},
2020-03-14 17:31:29 +00:00
openSidebarMorePopover(props) {
dispatch(openPopover('SIDEBAR_MORE', props))
},
2020-02-24 21:56:07 +00:00
onOpenComposeModal() {
2020-03-12 16:09:15 +00:00
dispatch(openModal('COMPOSE'))
2020-02-24 21:56:07 +00:00
},
2020-02-19 23:57:07 +00:00
})
2020-02-24 21:56:07 +00:00
export default
@connect(mapStateToProps, mapDispatchToProps)
2020-02-19 23:57:07 +00:00
@injectIntl
class Sidebar extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map,
2020-04-07 02:53:23 +01:00
moreOpen: PropTypes.bool,
2020-02-19 23:57:07 +00:00
onClose: PropTypes.func.isRequired,
2020-02-24 21:56:07 +00:00
onOpenComposeModal: PropTypes.func.isRequired,
2020-03-14 17:31:29 +00:00
openSidebarMorePopover: PropTypes.func.isRequired,
notificationCount: PropTypes.number.isRequired,
homeItemsQueueCount: PropTypes.number.isRequired,
2020-04-29 23:32:49 +01:00
actions: PropTypes.array,
tabs: PropTypes.array,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
2020-02-19 23:57:07 +00:00
}
2020-02-24 21:56:07 +00:00
handleOpenComposeModal = () => {
this.props.onOpenComposeModal()
}
2020-05-03 06:22:49 +01:00
handleOpenSidebarMorePopover = () => {
2020-03-14 17:31:29 +00:00
this.props.openSidebarMorePopover({
targetRef: this.moreBtnRef,
position: 'top',
})
}
setMoreButtonRef = n => {
this.moreBtnRef = n
}
2020-02-19 23:57:07 +00:00
render() {
2020-03-25 03:08:43 +00:00
const {
intl,
account,
notificationCount,
homeItemsQueueCount,
2020-04-08 02:06:59 +01:00
moreOpen,
2020-04-29 23:32:49 +01:00
actions,
tabs,
title,
showBackBtn,
2020-03-25 03:08:43 +00:00
} = this.props
2020-02-19 23:57:07 +00:00
2020-02-28 15:20:47 +00:00
// : todo :
2020-02-19 23:57:07 +00:00
if (!me || !account) return null
const acct = account.get('acct')
const isPro = account.get('is_pro')
2020-03-25 03:08:43 +00:00
2020-02-19 23:57:07 +00:00
const menuItems = [
{
title: 'Home',
icon: 'home',
2020-03-31 17:04:50 +01:00
to: '/home',
2020-03-14 17:31:29 +00:00
count: homeItemsQueueCount,
2020-02-19 23:57:07 +00:00
},
{
title: 'Notifications',
icon: 'notifications',
to: '/notifications',
2020-03-14 17:31:29 +00:00
count: notificationCount,
2020-03-02 22:26:25 +00:00
},
2020-03-25 03:08:43 +00:00
{
title: 'Search',
icon: 'search-alt',
to: '/search',
hidden: true, // : todo : show only when search on top is not visible
},
2020-02-19 23:57:07 +00:00
{
title: 'Groups',
icon: 'group',
to: '/groups',
},
{
title: 'Lists',
icon: 'list',
to: '/lists',
},
{
title: 'Explore',
icon: 'explore',
to: '/explore',
},
2020-02-19 23:57:07 +00:00
{
title: 'More',
icon: 'more',
2020-03-14 17:31:29 +00:00
onClick: this.handleOpenSidebarMorePopover,
2020-04-07 02:53:23 +01:00
buttonRef: this.setMoreButtonRef,
active: moreOpen,
2020-02-19 23:57:07 +00:00
},
]
const shortcutItems = [
2020-03-28 00:17:32 +00:00
// {
// 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,
// },
2020-02-19 23:57:07 +00:00
]
const exploreItems = [
{
title: 'Pro Feed',
icon: 'circle',
to: '/timeline/pro',
},
2020-04-30 05:34:50 +01:00
{
title: 'Chat',
icon: 'chat',
href: 'https://chat.gab.com',
},
2020-02-19 23:57:07 +00:00
{
title: 'Apps',
icon: 'apps',
2020-03-14 17:31:29 +00:00
href: 'https://apps.gab.com',
2020-02-19 23:57:07 +00:00
},
{
title: 'Shop',
icon: 'shop',
2020-03-14 17:31:29 +00:00
href: 'https://shop.dissenter.com',
2020-02-19 23:57:07 +00:00
},
{
title: 'Trends',
icon: 'trends',
2020-03-14 17:31:29 +00:00
href: 'https://trends.gab.com',
2020-02-19 23:57:07 +00:00
},
{
title: 'Dissenter',
icon: 'dissenter',
2020-03-14 17:31:29 +00:00
href: 'https://dissenter.com',
2020-02-19 23:57:07 +00:00
},
]
return (
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
<div className={[_s.default, _s.width240PX].join(' ')}>
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
2020-05-10 04:26:58 +01:00
<div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
2020-05-03 06:22:49 +01:00
<div className={[_s.default, _s.width100PC].join(' ')}>
2020-05-01 06:50:27 +01:00
{
!!title &&
2020-05-03 06:22:49 +01:00
<div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
{
showBackBtn &&
2020-05-10 04:26:58 +01:00
<BackButton
icon='arrow-left'
/>
2020-05-03 06:22:49 +01:00
}
2020-05-01 06:50:27 +01:00
<Heading size='h1'>
{title}
</Heading>
2020-05-03 06:22:49 +01:00
{
!!actions &&
<div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
{
actions.map((action, i) => (
<Button
isNarrow
backgroundColor='none'
color='primary'
onClick={() => action.onClick()}
key={`action-btn-${i}`}
className={[_s.ml5, _s.px5].join(' ')}
icon={action.icon}
iconClassName={_s.fillPrimary}
iconSize='14px'
/>
))
}
</div>
}
2020-05-01 06:50:27 +01:00
</div>
}
2020-04-29 23:32:49 +01:00
{
!!tabs &&
<div className={[_s.default, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Pills pills={tabs} />
</div>
}
</div>
2020-03-11 23:56:18 +00:00
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
2020-04-29 23:32:49 +01:00
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
2020-02-19 23:57:07 +00:00
{
2020-03-25 03:08:43 +00:00
menuItems.map((menuItem, i) => {
if (menuItem.hidden) return null
return (
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
)
})
2020-02-19 23:57:07 +00:00
}
2020-04-29 23:32:49 +01:00
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
2020-02-19 23:57:07 +00:00
{
exploreItems.map((exploreItem, i) => (
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
))
}
</nav>
2020-04-09 20:18:14 +01:00
<Responsive min={Constants.BREAKPOINT_SMALL}>
<Button
2020-04-23 07:13:29 +01:00
isBlock
2020-04-09 20:18:14 +01:00
onClick={this.handleOpenComposeModal}
2020-04-29 23:32:49 +01:00
className={[_s.py15, _s.fs15PX, _s.fontWeightBold].join(' ')}
2020-04-09 20:18:14 +01:00
>
Gab
</Button>
</Responsive>
<Responsive max={Constants.BREAKPOINT_SMALL}>
<Button
onClick={this.handleOpenComposeModal}
className={_s.py15}
icon='pencil'
/>
</Responsive>
2020-02-19 23:57:07 +00:00
</div>
</div>
</div>
</header>
)
}
}