gab-social/app/javascript/gabsocial/components/panel/group_info_panel.js

111 lines
3.5 KiB
JavaScript
Raw Normal View History

2020-02-29 15:42:47 +00:00
import { Fragment } from 'react'
2020-04-28 06:33:58 +01:00
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
2020-02-28 15:20:47 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-05-07 06:55:24 +01:00
import { openModal } from '../../actions/modal'
import { MODAL_GROUP_MEMBERS } from '../../constants'
2020-02-28 15:20:47 +00:00
import { shortNumberFormat } from '../../utils/numbers'
import PanelLayout from './panel_layout'
2020-02-29 15:42:47 +00:00
import Button from '../button'
import Divider from '../divider'
2020-05-09 03:17:19 +01:00
import Dummy from '../dummy'
2020-02-29 15:42:47 +00:00
import Icon from '../icon'
import Text from '../text'
2020-04-28 06:33:58 +01:00
import RelativeTimestamp from '../relative_timestamp'
2020-02-28 15:20:47 +00:00
const messages = defineMessages({
title: { id: 'about', defaultMessage: 'About' },
2020-02-29 15:42:47 +00:00
members: { id: 'members', defaultMessage: 'Members' },
2020-02-28 15:20:47 +00:00
})
2020-05-07 06:55:24 +01:00
const mapDispatchToProps = (dispatch) => ({
onOpenGroupMembersModal(groupId) {
dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
},
})
2020-02-28 15:20:47 +00:00
export default
@injectIntl
2020-05-07 06:55:24 +01:00
@connect(null, mapDispatchToProps)
2020-02-28 15:20:47 +00:00
class GroupInfoPanel extends ImmutablePureComponent {
static propTypes = {
2020-05-07 06:55:24 +01:00
group: ImmutablePropTypes.map.isRequired,
2020-02-28 15:20:47 +00:00
intl: PropTypes.object.isRequired,
2020-05-07 06:55:24 +01:00
onOpenGroupMembersModal: PropTypes.func.isRequired,
2020-05-09 03:17:19 +01:00
noPanel: PropTypes.bool,
2020-05-07 06:55:24 +01:00
}
handleOnOpenGroupMembersModal = () => {
this.props.onOpenGroupMembersModal(this.props.group.get('id'))
2020-02-28 15:20:47 +00:00
}
render() {
2020-05-09 03:17:19 +01:00
const { intl, group, noPanel } = this.props
const Wrapper = noPanel ? Dummy : PanelLayout
2020-02-28 15:20:47 +00:00
return (
2020-05-09 03:17:19 +01:00
<Wrapper title={intl.formatMessage(messages.title)}>
2020-02-29 15:42:47 +00:00
{
!!group &&
<Fragment>
2020-04-28 06:33:58 +01:00
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Text weight='medium'>
{group.get('title')}
</Text>
</div>
2020-02-29 15:42:47 +00:00
2020-04-23 07:13:29 +01:00
<Divider isSmall />
2020-02-29 15:42:47 +00:00
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
2020-05-14 07:03:22 +01:00
<Icon id='group' size='14px' className={_s.fillPrimary} />
2020-03-11 23:56:18 +00:00
<Text size='small' className={_s.ml5}>
2020-02-29 15:42:47 +00:00
{intl.formatMessage(messages.members)}
</Text>
</div>
<Button
2020-04-23 07:13:29 +01:00
isText
2020-02-29 15:42:47 +00:00
color='brand'
backgroundColor='none'
2020-04-24 04:17:27 +01:00
className={_s.mlAuto}
2020-05-07 06:55:24 +01:00
onClick={this.handleOnOpenGroupMembersModal}
2020-02-29 15:42:47 +00:00
>
<Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
{intl.formatMessage(messages.members)}
</Text>
</Button>
</div>
2020-04-23 07:13:29 +01:00
<Divider isSmall />
2020-02-29 15:42:47 +00:00
2020-04-28 06:33:58 +01:00
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
2020-04-29 23:32:49 +01:00
<Icon id='calendar' size='12px' className={_s.fillSecondary} />
2020-04-28 06:33:58 +01:00
<Text
size='small'
color='secondary'
className={_s.ml5}
>
{
<FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
date: <RelativeTimestamp timestamp={group.get('created_at')} />,
}} />
}
</Text>
</div>
<Divider isSmall />
2020-02-29 15:42:47 +00:00
<Text>
{group.get('description')}
</Text>
</Fragment>
}
2020-05-09 03:17:19 +01:00
</Wrapper>
2020-02-28 15:20:47 +00:00
)
}
}