Updated GroupMembers feature

• Updated:
- GroupMembers feature

app/javascript/gabsocial/features/group_members.js

@@ -1,23 +1,38 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import debounce from 'lodash.debounce'
+import isObject from 'lodash.isobject'
 import { FormattedMessage } from 'react-intl'
 import {
+	fetchGroup,
 	fetchMembers,
 	expandMembers,
 } from '../actions/groups'
 import { openPopover } from '../actions/popover'
 import Account from '../components/account'
+import ColumnIndicator from '../components/column_indicator'
+import Block from '../components/block'
+import Heading from '../components/heading'
+import Input from '../components/input'
 import ScrollableList from '../components/scrollable_list'
 
-const mapStateToProps = (state, { groupId }) => ({
+const mapStateToProps = (state, { params }) => {
-	group: state.getIn(['groups', groupId]),
+	const groupId = isObject(params) ? params['id'] : null
+	const group = state.getIn(['groups', groupId])
+
+	return {
+		group,
+		groupId,
 		relationships: state.getIn(['group_relationships', groupId]),
 		accountIds: state.getIn(['user_lists', 'groups', groupId, 'items']),
 		hasMore: !!state.getIn(['user_lists', 'groups', groupId, 'next']),
-})
+	}
+}
 
 const mapDispatchToProps = (dispatch) => ({
+	onFetchGroup(groupId) {
+		dispatch(fetchGroup(groupId))
+	},
 	onFetchMembers(groupId) {
 		dispatch(fetchMembers(groupId))
 	},
@@ -39,14 +54,25 @@ export default
 class GroupMembers extends ImmutablePureComponent {
 
 	static propTypes = {
+		group: ImmutablePropTypes.map,
 		groupId: PropTypes.string.isRequired,
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
 		onExpandMembers: PropTypes.func.isRequired,
+		onFetchGroup: PropTypes.func.isRequired,
 		onFetchMembers: PropTypes.func.isRequired,
 		onOpenGroupMemberOptions: PropTypes.func.isRequired,
 	}
 
+	componentDidMount() {
+		const { group, groupId } = this.props
+
+		if (!group && groupId) {
+			console.log("componentDidMount:", groupId)
+			this.props.onFetchGroup(groupId)
+		}
+	}
+
 	componentWillMount() {
 		const { groupId } = this.props
 
@@ -75,9 +101,37 @@ class GroupMembers extends ImmutablePureComponent {
 			relationships,
 		} = this.props
 
-		const isAdmin = relationships.get('admin')
+		if (!group || !relationships) return <ColumnIndicator type='loading' />
+
+		const isAdmin = relationships ? relationships.get('admin') : false
+
+		if (!isAdmin) return <ColumnIndicator type='missing' />
 			
 		return (
+			<Block>
+				<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+					<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+						<Heading size='h2'>Members</Heading>
+					</div>
+				</div>
+				{
+					/* : todo :
+					<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
+						<Input
+							id='group-member-search'
+							placeholder='Search group members'
+							prependIcon='search'
+							// value={value}
+							onKeyUp={this.handleKeyUp}
+							onChange={this.handleOnChange}
+							onFocus={this.handleOnFocus}
+							onBlur={this.handleOnBlur}
+							autoComplete='off'
+						/>
+					</div>
+					*/
+				}
+				<div className={[_s.default].join(' ')}>
 					<ScrollableList
 						scrollKey='group-members'
 						hasMore={hasMore}
@@ -99,6 +153,8 @@ class GroupMembers extends ImmutablePureComponent {
 							))
 						}
 					</ScrollableList>
+				</div>
+			</Block>
 		)
 	}