gab-social/app/javascript/gabsocial/features/groups_collection.js

144 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-02-22 23:26:23 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'
2020-03-04 22:26:01 +00:00
import { fetchGroups } from '../actions/groups'
import Block from '../components/block'
import Button from '../components/button'
2020-04-02 04:17:21 +01:00
import ColumnIndicator from '../components/column_indicator'
import Heading from '../components/heading'
import GroupListItem from '../components/group_list_item'
import Input from '../components/input'
const messages = defineMessages({
empty: { id: 'groups.empty', defaultMessage: 'There are no groups to display' },
featured: { id: 'featured', defaultMessage: 'Featured' },
new: { id: 'new', defaultMessage: 'Just Added' },
member: { id: 'my_groups', defaultMessage: 'My Groups' },
admin: { id: 'admin', defaultMessage: 'Admin' },
})
2020-02-22 23:26:23 +00:00
const mapStateToProps = (state, { activeTab }) => ({
groupIds: state.getIn(['group_lists', activeTab, 'items']),
isFetched: state.getIn(['group_lists', activeTab, 'isFetched']),
isLoading: state.getIn(['group_lists', activeTab, 'isLoading']),
2020-02-22 23:26:23 +00:00
})
2020-02-25 16:04:44 +00:00
export default
@injectIntl
2020-02-25 16:04:44 +00:00
@connect(mapStateToProps)
2020-02-22 23:26:23 +00:00
class GroupsCollection extends ImmutablePureComponent {
2020-04-08 02:06:59 +01:00
2020-02-22 23:26:23 +00:00
static propTypes = {
activeTab: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
groupIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
isFetched: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
2020-02-22 23:26:23 +00:00
}
state = {
isSearchVisible: false,
searchText: '',
}
2020-02-22 23:26:23 +00:00
componentWillMount() {
this.props.dispatch(fetchGroups(this.props.activeTab))
}
componentDidUpdate(oldProps) {
if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
this.setState({
isSearchVisible: false,
searchText: '',
})
2020-02-22 23:26:23 +00:00
this.props.dispatch(fetchGroups(this.props.activeTab))
}
}
handleToggleSearch = () => {
this.setState({ isSearchVisible: !this.state.isSearchVisible })
}
handleOnChangeSearch = (value) => {
this.setState({ searchText: value })
}
2020-02-22 23:26:23 +00:00
render() {
const {
activeTab,
groupIds,
intl,
isLoading,
isFetched,
} = this.props
const {
isSearchVisible,
searchText,
} = this.state
2020-02-22 23:26:23 +00:00
if (isLoading && groupIds.size === 0) {
2020-04-02 04:17:21 +01:00
return <ColumnIndicator type='loading' />
} else if (isFetched && groupIds.size === 0) {
return <ColumnIndicator type='error' message={intl.formatMessage(messages.empty)} />
2020-04-02 04:17:21 +01:00
}
2020-03-27 15:29:52 +00:00
const isAddable = ['featured', 'new'].indexOf(activeTab) > -1
2020-04-08 02:06:59 +01:00
2020-02-22 23:26:23 +00:00
return (
<Block>
<div className={[_s.default, _s.flexRow, _s.px15, _s.pt10, _s.justifyContentCenter].join(' ')}>
<div className={[_s.default, _s.flexGrow1, _s.maxWidth80PC, _s.justifyContentCenter, _s.overflowHidden].join(' ')}>
<Heading size='h2'>
{intl.formatMessage(messages[activeTab])}
</Heading>
2020-05-07 05:03:34 +01:00
</div>
<div className={[_s.default, _s.flexRow, _s.mlAuto].join(' ')}>
{
/*
<Button
icon='search'
className={_s.px10}
color={isSearchVisible ? 'white' : 'primary'}
backgroundColor={isSearchVisible ? 'brand' : 'none'}
iconSize='14px'
onClick={this.handleToggleSearch}
/>
<Button
icon='sort'
className={_s.px10}
color='primary'
backgroundColor='none'
iconSize='14px'
/>
*/
}
2020-05-07 05:03:34 +01:00
</div>
</div>
{
isSearchVisible &&
<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
<Input
onChange={this.handleOnChangeSearch}
value={searchText}
prependIcon='search'
/>
2020-05-07 05:03:34 +01:00
</div>
}
<div className={[_s.default, _s.py10, _s.width100PC].join(' ')}>
{
groupIds.map((groupId, i) => (
<GroupListItem
isAddable={isAddable}
key={`group-collection-item-${i}`}
id={groupId}
isLast={groupIds.count() - 1 === i}
/>
))
}
</div>
</Block>
2020-02-22 23:26:23 +00:00
)
}
2020-04-08 02:06:59 +01:00
2020-02-22 23:26:23 +00:00
}