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
-	relationships: state.getIn(['group_relationships', groupId]),
+	const group = state.getIn(['groups', groupId])
-	accountIds: state.getIn(['user_lists', 'groups', groupId, 'items']),
+
-	hasMore: !!state.getIn(['user_lists', 'groups', groupId, 'next']),
+	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,30 +101,60 @@ 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 (
-			<ScrollableList
+			<Block>
-				scrollKey='group-members'
+				<div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-				hasMore={hasMore}
+					<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-				showLoading={(!group || !accountIds || !relationships)}
+						<Heading size='h2'>Members</Heading>
-				onLoadMore={this.handleLoadMore}
+					</div>
-				emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
+				</div>
-			>
 				{
-					accountIds && accountIds.map((id) => (
+					/* : todo :
-						<Account
+					<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
-							compact
+						<Input
-							key={id}
+							id='group-member-search'
-							id={id}
+							placeholder='Search group members'
-							actionIcon={!isAdmin ? undefined : 'ellipsis'}
+							prependIcon='search'
-							onActionClick={(data, event) => {
+							// value={value}
-								return !isAdmin ? false : this.handleOpenGroupMemberOptions(event, id)
+							onKeyUp={this.handleKeyUp}
-							}}
+							onChange={this.handleOnChange}
+							onFocus={this.handleOnFocus}
+							onBlur={this.handleOnBlur}
+							autoComplete='off'
 						/>
-					))
+					</div>
+					*/
 				}
-			</ScrollableList>
+				<div className={[_s.default].join(' ')}>
+					<ScrollableList
+						scrollKey='group-members'
+						hasMore={hasMore}
+						showLoading={(!group || !accountIds || !relationships)}
+						onLoadMore={this.handleLoadMore}
+						emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
+					>
+						{
+							accountIds && accountIds.map((id) => (
+								<Account
+									compact
+									key={id}
+									id={id}
+									actionIcon={!isAdmin ? undefined : 'ellipsis'}
+									onActionClick={(data, event) => {
+										return !isAdmin ? false : this.handleOpenGroupMemberOptions(event, id)
+									}}
+								/>
+							))
+						}
+					</ScrollableList>
+				</div>
+			</Block>
 		)
 	}