Updated GroupsCollection to be single column list in slim design

• Updated:
- GroupsCollection to be single column list in slim design

app/javascript/gabsocial/features/groups_collection.js

@@ -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 Block from '../components/block'
-import Responsive from './ui/util/responsive_component'
+import Button from '../components/button'
 import ColumnIndicator from '../components/column_indicator'
-import ScrollableList from '../components/scrollable_list'
+import Heading from '../components/heading'
-import GroupCollectionItem from '../components/group_collection_item'
+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(' ')}>
+			<Block>
-				<Responsive max={BREAKPOINT_EXTRA_SMALL}>
+				<div className={[_s.default, _s.flexRow, _s.px15, _s.pt10, _s.justifyContentCenter].join(' ')}>
-					<div className={[_s.default, _s.width100PC, _s.px5].join(' ')}>
+					<div className={[_s.default, _s.flexGrow1, _s.maxWidth80PC, _s.justifyContentCenter, _s.overflowHidden].join(' ')}>
-						<ScrollableList scrollKey='group-collection-column-1'>
+						<Heading size='h2'>
-							{
+							{intl.formatMessage(messages[activeTab])}
-								groupIds.map((groupId, i) => (
+						</Heading>
-									<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
-								))
-							}
-						</ScrollableList>
 					</div>
-				</Responsive>
+					<div className={[_s.default, _s.flexRow, _s.mlAuto].join(' ')}>
-				<Responsive min={BREAKPOINT_EXTRA_SMALL}>
+						{
-					<div className={[_s.default, _s.flexNormal].join(' ')}>
+							/*
-						<ScrollableList scrollKey='group-collection-column-1'>
+							<Button
-							{
+								icon='search'
-								groupIds.slice(0, halfCount).map((groupId, i) => (
+								className={_s.px10}
-									<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
+								color={isSearchVisible ? 'white' : 'primary'}
-								))
+								backgroundColor={isSearchVisible ? 'brand' : 'none'}
-							}
+								iconSize='14px'
-						</ScrollableList>
+								onClick={this.handleToggleSearch}
+							/>
+							<Button
+								icon='sort'
+								className={_s.px10}
+								color='primary'
+								backgroundColor='none'
+								iconSize='14px'
+							/>
+							*/
+						}
 					</div>
-					<div className={[_s.default, _s.flexNormal].join(' ')}>
+				</div>
-						<ScrollableList scrollKey='group-collection-column-2'>
+				{
-							{
+					isSearchVisible &&
-								groupIds.slice(halfCount, groupIds.size).map((groupId, i) => (
+					<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
-									<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
+						<Input
-								))
+							onChange={this.handleOnChangeSearch}
-							}
+							value={searchText}
-						</ScrollableList>
+							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>
 		)
 	}