Merge branch 'develop' of https://code.gab.com/gab/social/gab-social into feature/frontend_refactor

app/javascript/gabsocial/features/groups/index/index.js

@@ -6,17 +6,20 @@ import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import GroupCard from './card';
 import GroupCreate from '../create';
+import { me } from 'gabsocial/initial_state';
+import { openModal } from '../../../actions/modal';
 
 const messages = defineMessages({
 	heading: { id: 'column.groups', defaultMessage: 'Groups' },
 	create: { id: 'groups.create', defaultMessage: 'Create group' },
 	tab_featured: { id: 'groups.tab_featured', defaultMessage: 'Featured' },
-	tab_member: { id: 'groups.tab_member', defaultMessage: 'Groups you\'re in' },
-	tab_admin: { id: 'groups.tab_admin', defaultMessage: 'Groups you manage' },
+	tab_member: { id: 'groups.tab_member', defaultMessage: 'Member' },
+	tab_admin: { id: 'groups.tab_admin', defaultMessage: 'Manage' },
 });
 
 const mapStateToProps = (state, { activeTab }) => ({
 	groupIds: state.getIn(['group_lists', activeTab]),
+	account: state.getIn(['accounts', me]),
 });
 
 export default @connect(mapStateToProps)
@@ -42,12 +45,27 @@ class Groups extends ImmutablePureComponent {
 		}
 	}
 
+	handleOpenProUpgradeModal = () => {
+		this.props.dispatch(openModal('PRO_UPGRADE'));
+	}
+
 	renderHeader() {
-		const { intl, activeTab } = this.props;
+		const { intl, activeTab, account, onOpenProUpgradeModal } = this.props;
+
+		const isPro = account.get('is_pro');
 
 		return (
 			<div className="group-column-header">
-				<div className="group-column-header__cta"><Link to="/groups/create" className="button">{intl.formatMessage(messages.create)}</Link></div>
+				<div className="group-column-header__cta">
+					{
+						account && isPro &&
+						<Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link>
+					}
+					{
+						account && !isPro &&
+						<button onClick={this.handleOpenProUpgradeModal} className="button standard-small">{intl.formatMessage(messages.create)}</button>
+					}
+				</div>
 				<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
 
 				<div className="column-header__wrapper">

app/javascript/gabsocial/features/groups/members/index.js

@@ -3,18 +3,22 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 import ColumnIndicator from '../../../components/column_indicator';
 import {
-  fetchMembers,
-  expandMembers,
+	fetchMembers,
+	expandMembers,
+	updateRole,
+	createRemovedAccount,
 } from '../../../actions/groups';
 import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
 import Column from '../../../components/column';
 import ScrollableList from '../../../components/scrollable_list';
+import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 
 const mapStateToProps = (state, { params: { id } }) => ({
-  group: state.getIn(['groups', id]),
-  accountIds: state.getIn(['user_lists', 'groups', id, 'items']),
-  hasMore: !!state.getIn(['user_lists', 'groups', id, 'next']),
+	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']),
 });
 
 export default @connect(mapStateToProps)
@@ -44,24 +48,44 @@ class GroupMembers extends ImmutablePureComponent {
 	}, 300, { leading: true });
 
 	render () {
-	  const { accountIds, hasMore, group } = this.props;
+		const { accountIds, hasMore, group, relationships, dispatch } = this.props;
+		
+		if (!group || !accountIds || !relationships) {
+			return (
+				<Column>
+					<LoadingIndicator />
+				</Column>
+			);
+		}
 
-	  if (!group || !accountIds) {
-	    return (<ColumnIndicator type='loading' />);
-	  }
+		return (
+			<Column>
+				<ScrollableList
+					scrollKey='members'
+					hasMore={hasMore}
+					onLoadMore={this.handleLoadMore}
+					emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
+				>
+					{accountIds.map(id => {
+						let menu = [];
 
-	  return (
-  <Column>
-  <ScrollableList
-	        scrollKey='members'
-	        hasMore={hasMore}
-	        onLoadMore={this.handleLoadMore}
-	        emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
-	      >
-  {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
-	      </ScrollableList>
-	    </Column>
-	  );
+						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}>
+								<AccountContainer id={id} withNote={false} actionIcon="none" onActionClick={() => true} />
+								{menu.length > 0 && <DropdownMenuContainer items={menu} icon='ellipsis-h' size={18} direction='right' />}
+							</div>
+						);
+					})}
+				</ScrollableList>
+			</Column>
+		);
 	}
 
 }

app/javascript/gabsocial/features/groups/timeline/components/column_settings.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import SettingToggle from '../../../notifications/components/setting_toggle';
+
+export default @injectIntl
+class ColumnSettings extends React.PureComponent {
+
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render () {
+    const { settings, onChange } = this.props;
+
+    return (
+      <div>
+        <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+
+        <div className='column-settings__row'>
+          <SettingToggle prefix='home_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/features/groups/timeline/containers/column_settings_container.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import ColumnSettings from '../components/column_settings';
+import { changeSetting, saveSettings } from '../../../../actions/settings';
+
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'group']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (key, checked) {
+    dispatch(changeSetting(['group', ...key], checked));
+  },
+
+  onSave () {
+    dispatch(saveSettings());
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);

app/javascript/gabsocial/features/groups/timeline/index.js

@@ -1,11 +1,24 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusListContainer from '../../../containers/status_list_container';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import StatusListContainer from '../../ui/containers/status_list_container';
+import Column from '../../../components/column';
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { connectGroupStream } from '../../../actions/streaming';
 import { expandGroupTimeline } from '../../../actions/timelines';
-import ColumnIndicator from '../../../components/column_indicator';
-import TimelineComposeBlock from '../../../components/timeline_compose_block';
+import MissingIndicator from '../../../components/missing_indicator';
+import LoadingIndicator from '../../../components/loading_indicator';
+import ComposeFormContainer from '../../../../gabsocial/features/compose/containers/compose_form_container';
+import { me } from 'gabsocial/initial_state';
+import Avatar from '../../../components/avatar';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import ColumnSettingsContainer from "./containers/column_settings_container";
+import Icon from 'gabsocial/components/icon';
+
+const messages = defineMessages({
+  tabLatest: { id: 'group.timeline.tab_latest', defaultMessage: 'Latest' },
+  show: { id: 'group.timeline.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'group.timeline.hide_settings', defaultMessage: 'Hide settings' },
+});
 
 const mapStateToProps = (state, props) => ({
   group: state.getIn(['groups', props.params.id]),
@@ -31,6 +44,10 @@ class GroupTimeline extends ImmutablePureComponent {
 	  intl: PropTypes.object.isRequired,
 	};
 
+	state = {
+		collapsed: true,
+	}
+
 	componentDidMount () {
 	  const { dispatch } = this.props;
 	  const { id } = this.props.params;
@@ -52,9 +69,15 @@ class GroupTimeline extends ImmutablePureComponent {
 	  this.props.dispatch(expandGroupTimeline(id, { maxId }));
 	}
 
+	handleToggleClick = (e) => {
+		e.stopPropagation();
+		this.setState({ collapsed: !this.state.collapsed });
+	  }
+
 	render () {
-	  const { columnId, group, relationships } = this.props;
-	  const { id } = this.props.params;
+		const { columnId, group, relationships, account, intl } = this.props;
+		const { collapsed } = this.state;
+		const { id } = this.props.params;
 
 	  if (typeof group === 'undefined' || !relationships) {
 	    return (<ColumnIndicator type='loading' />);
@@ -69,18 +92,44 @@ class GroupTimeline extends ImmutablePureComponent {
 					<TimelineComposeBlock size={46} group={group} shouldCondense={true} autoFocus={false} />
 	      }
 
-  			<div className='group__feed'>
-	        <StatusListContainer
-	          scrollKey={`group_timeline-${columnId}`}
-	          timelineId={`group:${id}`}
-	          onLoadMore={this.handleLoadMore}
-	          group={group}
-	          withGroupAdmin={relationships && relationships.get('admin')}
-	          emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There is nothing in this group yet. When members of this group post new statuses, they will appear here.' />}
-    			/>
-	      </div>
-	    </div>
-	  );
+				<div className='group__feed'>
+					<div className="column-header__wrapper">
+						<h1 className="column-header">
+							<Link to={`/groups/${id}`} className={classNames('btn grouped active')}>
+								{intl.formatMessage(messages.tabLatest)}
+							</Link>
+
+							<div className='column-header__buttons'>
+								<button
+									className={classNames('column-header__button', { 'active': !collapsed })} 
+									title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+									aria-label={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+									aria-pressed={collapsed ? 'false' : 'true'}
+									onClick={this.handleToggleClick}
+								><Icon id='sliders' /></button>
+							</div>
+						</h1>
+						{!collapsed && <div className='column-header__collapsible'>
+							<div className='column-header__collapsible-inner'>
+								<div className='column-header__collapsible__extra'>
+									<ColumnSettingsContainer />
+								</div>
+							</div>
+						</div>}
+					</div>
+
+					<StatusListContainer
+						alwaysPrepend
+						scrollKey={`group_timeline-${columnId}`}
+						timelineId={`group:${id}`}
+						onLoadMore={this.handleLoadMore}
+						group={group}
+						withGroupAdmin={relationships && relationships.get('admin')}
+						emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There is nothing in this group yet. When members of this group post new statuses, they will appear here.' />}
+					/>
+				</div>
+			</div>
+		);
 	}
 
 }