random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated GroupsCollection to be single column list in slim design

Browse Source 
• Updated:
- GroupsCollection to be single column list in slim design
This commit is contained in:
mgabdev 2020-07-14 00:41:20 -05:00
parent 3160d97b79
commit 8d3a5dbac2
1 changed files with 90 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
app/javascript/gabsocial/features/groups_collection.js
View File

@ -1,12 +1,21 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { FormattedMessage } from 'react-intl'
import { injectIntl, defineMessages } from 'react-intl'
import { fetchGroups } from '../actions/groups'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Responsive from './ui/util/responsive_component'
import Block from '../components/block'
import Button from '../components/button'
import ColumnIndicator from '../components/column_indicator'
import ScrollableList from '../components/scrollable_list'
import GroupCollectionItem from '../components/group_collection_item'
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' },
})
const mapStateToProps = (state, { activeTab }) => ({
groupIds: state.getIn(['group_lists', activeTab, 'items']),
@ -15,6 +24,7 @@ const mapStateToProps = (state, { activeTab }) => ({
})
export default
@injectIntl
@connect(mapStateToProps)
class GroupsCollection extends ImmutablePureComponent {
@ -22,69 +32,112 @@ class GroupsCollection extends ImmutablePureComponent {
activeTab: PropTypes.string.isRequired,
dispatch: PropTypes.func.isRequired,
groupIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
isFetched: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
}
state = {
isSearchVisible: false,
searchText: '',
}
componentWillMount() {
this.props.dispatch(fetchGroups(this.props.activeTab))
}
componentDidUpdate(oldProps) {
if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
this.setState({
isSearchVisible: false,
searchText: '',
})
this.props.dispatch(fetchGroups(this.props.activeTab))
}
}
handleToggleSearch = () => {
this.setState({ isSearchVisible: !this.state.isSearchVisible })
}
handleOnChangeSearch = (value) => {
this.setState({ searchText: value })
}
render() {
const {
activeTab,
groupIds,
intl,
isLoading,
isFetched,
} = this.props
const {
isSearchVisible,
searchText,
} = this.state
if (isLoading && groupIds.size === 0) {
return <ColumnIndicator type='loading' />
} else if (isFetched && groupIds.size === 0) {
return <ColumnIndicator type='error' message={<FormattedMessage id='groups.empty' defaultMessage='There are no groups to display' />} />
return <ColumnIndicator type='error' message={intl.formatMessage(messages.empty)} />
}
const halfCount = parseInt(groupIds.size / 2)
const isAddable = ['featured', 'new'].indexOf(activeTab) > -1
return (
<div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width100PC, _s.px5].join(' ')}>
<ScrollableList scrollKey='group-collection-column-1'>
{
groupIds.map((groupId, i) => (
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
))
}
</ScrollableList>
<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>
</div>
</Responsive>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.flexNormal].join(' ')}>
<ScrollableList scrollKey='group-collection-column-1'>
{
groupIds.slice(0, halfCount).map((groupId, i) => (
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
))
}
</ScrollableList>
<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'
/>
*/
}
</div>
<div className={[_s.default, _s.flexNormal].join(' ')}>
<ScrollableList scrollKey='group-collection-column-2'>
{
groupIds.slice(halfCount, groupIds.size).map((groupId, i) => (
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
))
}
</ScrollableList>
</div>
{
isSearchVisible &&
<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
<Input
onChange={this.handleOnChangeSearch}
value={searchText}
prependIcon='search'
/>
</div>
</Responsive>
</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>
)
}