Progress

app/javascript/gabsocial/features/account_timeline.js

@@ -17,8 +17,6 @@ const mapStateToProps = (state, { account, commentsOnly = false }) => {
 
   const path = commentsOnly ? `${accountId}:comments_only` : accountId
 
-  console.log("commentsOnly, path:", commentsOnly, path)
-
   return {
     accountId,
     statusIds: state.getIn(['timelines', `account:${path}`, 'items'], emptyList),

app/javascript/gabsocial/features/group_members.js

@@ -1,86 +1,101 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import debounce from 'lodash.debounce'
 import {
 	fetchMembers,
 	expandMembers,
 	updateRole,
 	createRemovedAccount,
-} from '../actions/groups';
-import { FormattedMessage } from 'react-intl';
-import Account from '../components/account';
-import ScrollableList from '../components/scrollable_list';
+} from '../actions/groups'
+import { FormattedMessage } from 'react-intl'
+import Account from '../components/account'
+import ScrollableList from '../components/scrollable_list'
 
-const mapStateToProps = (state, { params: { id } }) => ({
-	group: state.getIn(['groups', id]),
-	relationships: state.getIn(['group_relationships', id]),
-	accountIds: state.getIn(['user_lists', 'groups', id, 'items']),
-	hasMore: !!state.getIn(['user_lists', 'groups', id, 'next']),
-});
+const mapStateToProps = (state, { groupId }) => ({
+	group: state.getIn(['groups', 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) => ({
+	onFetchMembers(groupId) {
+		dispatch(fetchMembers(groupId))
+	},
+	onExpandMembers(groupId) {
+		dispatch(expandMembers(groupId))
+	},
+})
 
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupMembers extends ImmutablePureComponent {
 
 	static propTypes = {
-		params: PropTypes.object.isRequired,
-		dispatch: PropTypes.func.isRequired,
+		groupId: PropTypes.string.isRequired,
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
-	};
+		onExpandMembers: PropTypes.func.isRequired,
+		onFetchMembers: PropTypes.func.isRequired,
+	}
 
 	componentWillMount() {
-		const { params: { id } } = this.props;
+		const { groupId } = this.props
 
-		this.props.dispatch(fetchMembers(id));
+		this.props.onFetchMembers(groupId)
 	}
 
 	componentWillReceiveProps(nextProps) {
-		if (nextProps.params.id !== this.props.params.id) {
-			this.props.dispatch(fetchMembers(nextProps.params.id));
+		if (nextProps.groupId !== this.props.groupId) {
+			this.props.onFetchMembers(nextProps.groupId)
 		}
 	}
 
 	handleLoadMore = debounce(() => {
-		this.props.dispatch(expandMembers(this.props.params.id));
-	}, 300, { leading: true });
+		this.props.onExpandMembers(this.props.groupId)
+	}, 300, { leading: true })
 
 	render() {
-		const { accountIds, hasMore, group, relationships, dispatch } = this.props;
-
-		if (!group || !accountIds || !relationships) {
-			return <LoadingIndicator />
-		}
+		const {
+			accountIds,
+			hasMore,
+			group,
+			relationships,
+			dispatch,
+		} = this.props
 
 		return (
 			<ScrollableList
-				scrollKey='members'
+				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.map(id => {
-					let menu = [];
+				{
+					accountIds && accountIds.map((id) => {
+						let menu = []
 
-					if (relationships.get('admin')) {
-						menu = [
-							{ text: 'Remove from group', action: () => dispatch(createRemovedAccount(group.get('id'), id)) },
-							{ text: 'Make administrator', action: () => dispatch(updateRole(group.get('id'), id, 'admin')) },
-						]
-					}
+						if (relationships.get('admin')) {
+							menu = [
+								{ text: 'Remove from group', action: () => dispatch(createRemovedAccount(group.get('id'), id)) },
+								{ text: 'Make administrator', action: () => dispatch(updateRole(group.get('id'), id, 'admin')) },
+							]
+						}
 
-					return (
-						<div className="group-account-wrapper" key={id}>
-							<Account id={id} actionIcon="none" onActionClick={() => true} />
-							{ /*
-								menu.length > 0 && <DropdownMenuContainer items={menu} icon='ellipsis-h' size={18} direction='right' />
-								*/
-							}
-						</div>
-					);
-				})}
+						return (
+							<Account
+								compact
+								key={id}
+								id={id}
+								actionIcon='ellipsis'
+								onActionClick={() => true}
+							/>
+						)
+					})
+				}
 			</ScrollableList>
-		);
+		)
 	}
 
 }

app/javascript/gabsocial/features/group_removed_accounts.js

@@ -1,26 +1,25 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import debounce from 'lodash.debounce'
-import ColumnIndicator from '../components/column_indicator';
 import {
 	fetchRemovedAccounts,
 	expandRemovedAccounts,
 	removeRemovedAccount,
-} from '../actions/groups';
-import { FormattedMessage } from 'react-intl';
-import Account from '../components/account';
-import ScrollableList from '../components/scrollable_list';
-import { defineMessages, injectIntl } from 'react-intl';
+} from '../actions/groups'
+import { FormattedMessage } from 'react-intl'
+import Account from '../components/account'
+import ScrollableList from '../components/scrollable_list'
+import { defineMessages, injectIntl } from 'react-intl'
 
 const messages = defineMessages({
 	remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
-});
+})
 
-const mapStateToProps = (state, { params: { id } }) => ({
-	group: state.getIn(['groups', id]),
-	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', id, 'items']),
-	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', id, 'next']),
-});
+const mapStateToProps = (state, { groupId }) => ({
+	group: state.getIn(['groups', groupId]),
+	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'items']),
+	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', groupId, 'next']),
+})
 
 export default
 @connect(mapStateToProps)
@@ -28,49 +27,50 @@ export default
 class GroupRemovedAccounts extends ImmutablePureComponent {
 
 	static propTypes = {
-		params: PropTypes.object.isRequired,
+		groupId: PropTypes.string.isRequired,
 		dispatch: PropTypes.func.isRequired,
 		accountIds: ImmutablePropTypes.list,
 		hasMore: PropTypes.bool,
-	};
+	}
 
 	componentWillMount() {
-		const { params: { id } } = this.props;
+		const { groupId } = this.props
 
-		this.props.dispatch(fetchRemovedAccounts(id));
+		this.props.dispatch(fetchRemovedAccounts(groupId))
 	}
 
 	componentWillReceiveProps(nextProps) {
-		if (nextProps.params.id !== this.props.params.id) {
-			this.props.dispatch(fetchRemovedAccounts(nextProps.params.id));
+		if (nextProps.groupId !== this.props.groupId) {
+			this.props.dispatch(fetchRemovedAccounts(nextProps.groupId))
 		}
 	}
 
 	handleLoadMore = debounce(() => {
-		this.props.dispatch(expandRemovedAccounts(this.props.params.id));
-	}, 300, { leading: true });
+		this.props.dispatch(expandRemovedAccounts(this.props.groupId))
+	}, 300, { leading: true })
 
 	render() {
-		const { accountIds, hasMore, group, intl } = this.props;
-
-		if (!group || !accountIds) {
-			return <ColumnIndicator type='loading' />
-		}
+		const { accountIds, hasMore, group, intl } = this.props
 
 		return (
 			<ScrollableList
 				scrollKey='removed_accounts'
 				hasMore={hasMore}
+				showLoading={(!group || !accountIds)}
 				onLoadMore={this.handleLoadMore}
 				emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
 			>
-				{accountIds.map(id => (<Account
-					key={id}
-					id={id}
-					actionIcon='remove'
-					onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
-					actionTitle={intl.formatMessage(messages.remove)}
-				/>))}
+				{
+					accountIds && accountIds.map((id) => (
+						<Account
+							key={id}
+							id={id}
+							actionIcon='subtract'
+							onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
+							actionTitle={intl.formatMessage(messages.remove)}
+						/>
+					))
+				}
 			</ScrollableList>
 		)
 	}

app/javascript/gabsocial/features/list_edit.js

@@ -229,7 +229,7 @@ class ListEdit extends ImmutablePureComponent {
                         key={`remove-from-list-${accountId}`}
                         id={accountId}
                         onActionClick={() => this.handleAddOrRemoveFromList(accountId)}
-                        actionIcon={'subtract'}
+                        actionIcon='subtract'
                       />
                     ))
                   }

app/javascript/gabsocial/features/ui/ui.js

@@ -153,8 +153,8 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/groups/browse/admin' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'admin' }} />
 
         <WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group' }} />
-        <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
-        <WrappedRoute path='/groups/:id/removed-accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />
+        { /* <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} /> 
+        <WrappedRoute path='/groups/:id/removed-accounts' page={GroupPage} component={GroupRemovedAccounts} content={children} />  */}
         <WrappedRoute path='/groups/:id/edit' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Edit Group' }} />
         <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
 
@@ -208,11 +208,12 @@ class SwitchingArea extends PureComponent {
         <Redirect from='/@:username/posts/:statusId' to='/:username/posts/:statusId' exact />
         <WrappedRoute path='/:username/posts/:statusId' publicRoute exact page={BasicPage} component={StatusFeature} content={children} componentParams={{ title: 'Status' }} />
 
+        { /*
         <Redirect from='/@:username/posts/:statusId/reposts' to='/:username/posts/:statusId/reposts' />
         <WrappedRoute path='/:username/posts/:statusId/reposts' page={BasicPage} component={StatusReposts} content={children} componentParams={{ title: 'Reposts' }} />
 
         <Redirect from='/@:username/posts/:statusId/likes' to='/:username/posts/:statusId/likes' />
-        <WrappedRoute path='/:username/posts/:statusId/likes' page={BasicPage} component={StatusLikes} content={children} componentParams={{ title: 'Likes' }} />
+        <WrappedRoute path='/:username/posts/:statusId/likes' page={BasicPage} component={StatusLikes} content={children} componentParams={{ title: 'Likes' }} /> */ }
 
         <WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
       </Switch>

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -29,9 +29,10 @@ export function GroupsCollection() { return import(/* webpackChunkName: "feature
 export function GroupCreate() { return import(/* webpackChunkName: "features/group_create" */'../../group_create') }
 export function GroupCreateModal() { return import(/* webpackChunkName: "components/group_create_modal" */'../../../components/modal/group_create_modal') }
 export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
-export function GroupEditorModal() { return import(/* webpackChunkName: "components/group_editor_modal" */'../../../components/modal/group_editor_modal') }
+export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
 export function GroupMembersModal() { return import(/* webpackChunkName: "components/group_members_modal" */'../../../components/modal/group_members_modal') }
 export function GroupInfoPopover() { return import(/* webpackChunkName: "components/group_info_popover" */'../../../components/popover/group_info_popover') }
+export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
 export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
 export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
 export function GroupTimeline() { return import(/* webpackChunkName: "features/group_timeline" */'../../group_timeline') }