gab-social/app/javascript/gabsocial/pages/group_page.js
2020-02-29 10:42:47 -05:00

93 lines
2.7 KiB
JavaScript

import { Fragment } from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { fetchGroup } from '../actions/groups'
import GroupInfoPanel from '../components/panel/group_info_panel'
import GroupLayout from '../layouts/group_layout'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import GroupSidebarPanel from '../components/panel/groups_panel'
import LinkFooter from '../components/link_footer'
import TimelineComposeBlock from '../components/timeline_compose_block'
import Divider from '../components/divider'
const mapStateToProps = (state, { params: { id } }) => ({
group: state.getIn(['groups', id]),
relationships: state.getIn(['group_relationships', id]),
})
export default
@connect(mapStateToProps)
class GroupPage extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
dispatch: PropTypes.func.isRequired,
}
componentWillMount() {
const { params: { id }, dispatch } = this.props
dispatch(fetchGroup(id))
}
render() {
const { children, group, relationships } = this.props
// <div className="column-header__wrapper">
// <h1 className="column-header">
// <Link to={`/groups/${id}`} className={classNames('btn grouped active')}>
// {intl.formatMessage(messages.tabLatest)}
// </Link>
// <div className='column-header__buttons'>
// <button
// className={classNames('column-header__button', { 'active': !collapsed })}
// title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
// aria-label={intl.formatMessage(collapsed ? messages.show : messages.hide)}
// aria-pressed={collapsed ? 'false' : 'true'}
// onClick={this.handleToggleClick}
// ><Icon id='sliders' /></button>
// </div>
// </h1>
// {!collapsed && <div className='column-header__collapsible'>
// <div className='column-header__collapsible-inner'>
// <div className='column-header__collapsible__extra'>
// <ColumnSettingsContainer />
// </div>
// </div>
// </div>}
// </div>
return (
<GroupLayout
group={group}
relationships={relationships}
actions={[
{
icon: 'ellipsis',
onClick: null,
},
]}
layout={(
<Fragment>
<GroupInfoPanel group={group} />
<WhoToFollowPanel />
<GroupSidebarPanel slim />
<LinkFooter />
</Fragment>
)}
showBackBtn
>
{
!!relationships && relationships.get('member') &&
<Fragment>
<TimelineComposeBlock size={46} group={group} autoFocus />
<Divider />
</Fragment>
}
{children}
</GroupLayout>
)
}
}