New groups

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -68,6 +68,7 @@ class ComposeForm extends ImmutablePureComponent {
     anyMedia: PropTypes.bool,
     shouldCondense: PropTypes.bool,
     autoFocus: PropTypes.bool,
+    group: ImmutablePropTypes.map,
   };
 
   static defaultProps = {
@@ -118,7 +119,7 @@ class ComposeForm extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onSubmit(this.context.router ? this.context.router.history : null);
+    this.props.onSubmit(this.context.router ? this.context.router.history : null, this.props.group);
   }
 
   onSuggestionsClearRequested = () => {

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -33,8 +33,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(changeCompose(text));
   },
 
-  onSubmit (router) {
-    dispatch(submitCompose(router));
+  onSubmit (router, group) {
+    dispatch(submitCompose(router, group));
   },
 
   onClearSuggestions () {

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { shortNumberFormat } from '../../../utils/numbers';
+import { connect } from 'react-redux';
+
+const messages = defineMessages({
+    members: { id: 'groups.card.members', defaultMessage: 'Members' },
+    view: { id: 'groups.card.view', defaultMessage: 'View' },
+    join: { id: 'groups.card.join', defaultMessage: 'Join' },
+    role_member: { id: 'groups.card.roles.member', defaultMessage: 'You\'re a member' },
+    role_admin: { id: 'groups.card.roles.admin', defaultMessage: 'You\'re an admin' },
+});
+
+const mapStateToProps = (state, { id }) => ({
+	group: state.getIn(['groups', id]),
+	relationships: state.getIn(['group_relationships', id]),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class GroupCard extends ImmutablePureComponent {
+    static propTypes = {
+        group: ImmutablePropTypes.map,
+        relationships: ImmutablePropTypes.map,
+    }
+
+    getRole() {
+        const { intl, relationships } = this.props;
+
+        if (!relationships) return null;
+        if (relationships.get('admin')) return intl.formatMessage(messages.role_admin);
+        if (relationships.get('member')) return intl.formatMessage(messages.role_member);
+    }
+
+    render() {
+        const { intl, group } = this.props;
+        const coverImageUrl = group.get('cover_image_url');
+        const role = this.getRole();
+
+        return (
+            <Link to={`/groups/${group.get('id')}`} className="group-card">
+                <div className="group-card__header">{coverImageUrl && <img alt="" src={coverImageUrl} />}</div>
+                <div className="group-card__content">
+                    <div className="group-card__title">{group.get('title')}</div>
+                    <div className="group-card__meta"><strong>{shortNumberFormat(group.get('member_count'))}</strong> {intl.formatMessage(messages.members)}{role && <span> · {role}</span>}</div>
+                    <div className="group-card__description">{group.get('description')}</div>
+                </div>
+            </Link>
+        );
+    }
+}

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

@@ -2,80 +2,75 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import LoadingIndicator from '../../../components/loading_indicator';
-import Column from '../../ui/components/column';
-import ColumnBackButtonSlim from '../../../components/column_back_button_slim';
 import { fetchGroups } from '../../../actions/groups';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import ColumnLink from '../../ui/components/column_link';
-import ColumnSubheading from '../../ui/components/column_subheading';
-import NewGroupForm from '../create';
-import { createSelector } from 'reselect';
-import ScrollableList from '../../../components/scrollable_list';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import GroupCard from './card';
 
 const messages = defineMessages({
-  heading: { id: 'column.groups', defaultMessage: 'Groups' },
-  subheading: { id: 'groups.subheading', defaultMessage: 'Your groups' },
+	heading: { id: 'column.groups', defaultMessage: 'Groups' },
+	tab_featured: { id: 'column.groups_tab_featured', defaultMessage: 'Featured' },
+	tab_member: { id: 'column.groups_tab_member', defaultMessage: 'Groups you\'re in' },
+	tab_admin: { id: 'column.groups_tab_admin', defaultMessage: 'Groups you manage' },
 });
 
-const getOrderedGroups = createSelector([state => state.get('groups')], groups => {
-  if (!groups) {
-    return groups;
-  }
-
-  return groups.toList().filter(item => !!item);
-});
-
-const mapStateToProps = state => ({
-  groups: getOrderedGroups(state),
+const mapStateToProps = (state, { activeTab }) => ({
+	groupIds: state.getIn(['group_lists', activeTab]),
 });
 
 export default @connect(mapStateToProps)
 @injectIntl
 class Groups extends ImmutablePureComponent {
+	static propTypes = {
+		params: PropTypes.object.isRequired,
+		activeTab: PropTypes.string.isRequired,
+		dispatch: PropTypes.func.isRequired,
+		groups: ImmutablePropTypes.map,
+		groupIds: ImmutablePropTypes.list,
+		intl: PropTypes.object.isRequired,
+	};
 
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    groups: ImmutablePropTypes.list,
-    intl: PropTypes.object.isRequired,
-  };
+	componentWillMount () {
+		this.props.dispatch(fetchGroups(this.props.activeTab));
+	}
 
-  componentWillMount () {
-    this.props.dispatch(fetchGroups());
-  }
+	componentDidUpdate(oldProps) {
+		if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
+			this.props.dispatch(fetchGroups(this.props.activeTab));
+		}
+	}
 
-  render () {
-    const { intl, groups } = this.props;
-
-    if (!groups) {
-      return (
-        <Column>
-          <LoadingIndicator />
-        </Column>
-      );
-    }
-
-    const emptyMessage = <FormattedMessage id='empty_column.groups' defaultMessage="No groups." />;
-
-    return (
-      <Column icon='list-ul' heading={intl.formatMessage(messages.heading)}>
-        <ColumnBackButtonSlim />
-
-        <NewGroupForm />
-
-        <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
-        <ScrollableList
-          scrollKey='lists'
-          emptyMessage={emptyMessage}
-        >
-          {groups.map(group =>
-            <ColumnLink key={group.get('id')} to={`/groups/${group.get('id')}`} icon='list-ul' text={group.get('title')} />
-          )}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
+	render () {
+		const { intl, groupIds, activeTab } = this.props;
+		
+		return (
+			<div>
+				<div className="group-column-header">
+					<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
+					
+					<div className="column-header__wrapper">
+						<h1 className="column-header">
+							<Link to='/groups' className={classNames('btn grouped', {'active': 'featured' === activeTab})}>
+								{intl.formatMessage(messages.tab_featured)}
+							</Link>
+							
+							<Link to='/groups/browse/member' className={classNames('btn grouped', {'active': 'member' === activeTab})}>
+								{intl.formatMessage(messages.tab_member)}
+							</Link>
+							
+							<Link to='/groups/browse/admin' className={classNames('btn grouped', {'active': 'admin' === activeTab})}>
+								{intl.formatMessage(messages.tab_admin)}
+							</Link>
+						</h1>
+					</div>
+				</div>
+				
+				<div className="group-card-list">
+					{groupIds.map(id => <GroupCard key={id} id={id} />)}
+				</div>
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { debounce } from 'lodash';
+import LoadingIndicator from '../../../components/loading_indicator';
+import {
+	fetchMembers,
+	expandMembers,
+} from '../../../actions/groups';
+import { FormattedMessage } from 'react-intl';
+import AccountContainer from '../../../containers/account_container';
+import Column from '../../ui/components/column';
+import ScrollableList from '../../../components/scrollable_list';
+
+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']),
+});
+
+export default @connect(mapStateToProps)
+class GroupMembers extends ImmutablePureComponent {
+
+	static propTypes = {
+		params: PropTypes.object.isRequired,
+		dispatch: PropTypes.func.isRequired,
+		accountIds: ImmutablePropTypes.list,
+		hasMore: PropTypes.bool,
+	};
+
+	componentWillMount () {
+		const { params: { id } } = this.props;
+
+		this.props.dispatch(fetchMembers(id));
+	}
+
+	componentWillReceiveProps (nextProps) {
+		if (nextProps.params.id !== this.props.params.id) {
+			this.props.dispatch(fetchMembers(nextProps.params.id));
+		}
+	}
+
+	handleLoadMore = debounce(() => {
+		this.props.dispatch(expandMembers(this.props.params.id));
+	}, 300, { leading: true });
+
+	render () {
+		const { accountIds, hasMore, group } = this.props;
+
+		if (!group || !accountIds) {
+			return (
+				<Column>
+					<LoadingIndicator />
+				</Column>
+			);
+		}
+
+		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>
+		);
+	}
+}

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

@@ -1,44 +1,62 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import InnerHeader from './inner_header';
+import Button from 'gabsocial/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-export default class Header extends ImmutablePureComponent {
+const messages = defineMessages({
+	join: { id: 'groups.join', defaultMessage: 'Join group' },
+	leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
+});
 
-  static propTypes = {
-    group: ImmutablePropTypes.map,
-    relationships: ImmutablePropTypes.map,
-    toggleMembership: PropTypes.func.isRequired,
-  };
+export default @injectIntl
+class Header extends ImmutablePureComponent {
+	static propTypes = {
+		group: ImmutablePropTypes.map,
+		relationships: ImmutablePropTypes.map,
+		toggleMembership: PropTypes.func.isRequired,
+	};
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+	static contextTypes = {
+		router: PropTypes.object,
+	};
 
-  render () {
-    const { group, relationships, toggleMembership } = this.props;
+	getActionButton() {
+		const { group, relationships, toggleMembership, intl } = this.props;
+		const toggle = () => toggleMembership(group, relationships);
 
-    if (group === null) {
-      return null;
-    }
+		if (!relationships) {
+			return '';
+		} else if (!relationships.get('member')) {
+			return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={toggle} />;
+		} else if (relationships.get('member')) {
+			return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={toggle} />;
+		}
+	}
 
-    return (
-      <div className='account-timeline__header'>
-        <InnerHeader
-          group={group}
-          relationships={relationships}
-          toggleMembership={toggleMembership}
-        />
+	render () {
+		const { group, relationships } = this.props;
 
-        <div className='account__section-headline'>
-            <NavLink exact to={`/groups/${group.get('id')}`}><FormattedMessage id='groups.posts' defaultMessage='Posts' /></NavLink>
-            <NavLink exact to={`/groups/${group.get('id')}/accounts`}><FormattedMessage id='group.accounts' defaultMessage='Members' /></NavLink>
-        </div>
-      </div>
-    );
-  }
+		if (!group || !relationships) {
+			return null;
+		}
 
+		return (
+			<div className='group__header-container'>
+				<div className="group__header">
+					<div className='group__cover'>
+						<img src={group.get('cover_image_url')} alt='' className='parallax' />
+					</div>
+					
+					<div className='group__tabs'>
+						<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
+						<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
+						{this.getActionButton()}
+					</div>
+				</div>
+			</div>
+		);
+	}
 }

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

@@ -1,96 +0,0 @@
-'use strict';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Button from 'gabsocial/components/button';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'gabsocial/components/icon';
-import DropdownMenuContainer from 'gabsocial/containers/dropdown_menu_container';
-
-const messages = defineMessages({
-  join: { id: 'groups.join', defaultMessage: 'Join' },
-  leave: { id: 'groups.leave', defaultMessage: 'Leave' },
-});
-
-export default @injectIntl
-class InnerHeader extends ImmutablePureComponent {
-
-  static propTypes = {
-    group: ImmutablePropTypes.map,
-    relationships: ImmutablePropTypes.map,
-    toggleMembership: PropTypes.func.isRequired,
-  };
-
-  isStatusesPageActive = (match, location) => {
-    if (!match) {
-      return false;
-    }
-
-    return !location.pathname.match(/\/(accounts)\/?$/);
-  }
-
-  render () {
-    const { group, relationships, intl } = this.props;
-
-    if (!group || !relationships) {
-      return null;
-    }
-
-    let info        = [];
-    let actionBtn   = '';
-    let lockedIcon  = '';
-    let menu        = [];
-
-    if (relationships.get('admin')) {
-      info.push(<span key='admin'><FormattedMessage id='group.admin' defaultMessage='You are an admin' /></span>);
-    }
-    
-    if (!relationships) { // Wait until the relationship is loaded
-      actionBtn = '';
-    } else if (!relationships.get('member')) {
-      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={() => this.props.toggleMembership(group, relationships)} />;
-    } else if (relationships.get('member')) {
-      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={() => this.props.toggleMembership(group, relationships)} />;
-    }
-
-    if (group.get('archived')) {
-      lockedIcon = <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />;
-    }
-
-    return (
-      <div className='account__header'>
-        <div className='account__header__image'>
-          <div className='account__header__info'>
-            <img src={group.get('cover_image_url')} alt='' className='parallax' />
-          </div>
-        </div>
-
-        <div className='account__header__bar'>
-          <div className='account__header__tabs'>
-            <div className='account__header__tabs__buttons'>
-              {actionBtn}
-
-              <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
-            </div>
-          </div>
-
-          <div className='account__header__tabs__name'>
-            <h1>
-              <span>{group.get('title')} {info}</span>
-              <small>{lockedIcon}</small>
-            </h1>
-          </div>
-
-          <div className='account__header__extra'>
-            <div className='account__header__bio'>
-              {group.get('description').length > 0 && <div className='account__header__content'>{group.get('description')}</div>}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
+    group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
+});
+
+export default @injectIntl
+class GroupPanel extends ImmutablePureComponent {
+    static propTypes = {
+        group: ImmutablePropTypes.map,
+        relationships: ImmutablePropTypes.map,
+    }
+
+    render() {
+        const { group, relationships, intl } = this.props;
+
+        return (
+            <div className="group__panel">
+                <h1 className="group__panel__title">
+                    {group.get('title')}
+                    {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
+                </h1>
+
+                {relationships.get('admin') && <span className="group__panel__label">{intl.formatMessage(messages.group_admin)}</span>}
+
+                <div className="group__panel__description">{group.get('description')}</div>
+            </div>
+        );
+    }
+}

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

@@ -4,102 +4,98 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusListContainer from '../../ui/containers/status_list_container';
 import Column from '../../../components/column';
-import ColumnBackButton from '../../../components/column_back_button';
-import ColumnHeader from '../../../components/column_header';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connectGroupStream } from '../../../actions/streaming';
 import { expandGroupTimeline } from '../../../actions/timelines';
-import { fetchGroup } from '../../../actions/groups';
 import MissingIndicator from '../../../components/missing_indicator';
 import LoadingIndicator from '../../../components/loading_indicator';
-import HeaderContainer from './containers/header_container';
+import ComposeFormContainer from '../../../../gabsocial/features/compose/containers/compose_form_container';
+import { me } from 'gabsocial/initial_state';
+import Avatar from '../../../components/avatar';
 
 const mapStateToProps = (state, props) => ({
-  group: state.getIn(['groups', props.params.id]),
-  hasUnread: state.getIn(['timelines', `group:${props.params.id}`, 'unread']) > 0,
+	account: state.getIn(['accounts', me]),
+	group: state.getIn(['groups', props.params.id]),
+	relationships: state.getIn(['group_relationships', props.params.id]),
+	hasUnread: state.getIn(['timelines', `group:${props.params.id}`, 'unread']) > 0,
 });
 
 export default @connect(mapStateToProps)
 @injectIntl
 class GroupTimeline extends React.PureComponent {
+	static contextTypes = {
+		router: PropTypes.object,
+	};
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+	static propTypes = {
+		params: PropTypes.object.isRequired,
+		dispatch: PropTypes.func.isRequired,
+		columnId: PropTypes.string,
+		hasUnread: PropTypes.bool,
+		group: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
+		relationships: ImmutablePropTypes.map,
+		account: ImmutablePropTypes.map,
+		intl: PropTypes.object.isRequired,
+	};
 
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    columnId: PropTypes.string,
-    hasUnread: PropTypes.bool,
-    group: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
-    intl: PropTypes.object.isRequired,
-  };
+	componentDidMount () {
+		const { dispatch } = this.props;
+		const { id } = this.props.params;
 
-  componentDidMount () {
-    const { dispatch } = this.props;
-    const { id } = this.props.params;
+		dispatch(expandGroupTimeline(id));
 
-    dispatch(fetchGroup(id));
-    dispatch(expandGroupTimeline(id));
+		this.disconnect = dispatch(connectGroupStream(id));
+	}
 
-    this.disconnect = dispatch(connectGroupStream(id));
-  }
+	componentWillUnmount () {
+		if (this.disconnect) {
+			this.disconnect();
+			this.disconnect = null;
+		}
+	}
 
-  componentWillUnmount () {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
+	handleLoadMore = maxId => {
+		const { id } = this.props.params;
+		this.props.dispatch(expandGroupTimeline(id, { maxId }));
+	}
 
-  handleLoadMore = maxId => {
-    const { id } = this.props.params;
-    this.props.dispatch(expandGroupTimeline(id, { maxId }));
-  }
+	render () {
+		const { columnId, group, relationships, account } = this.props;
+		const { id } = this.props.params;
 
-  render () {
-    const { hasUnread, columnId, group } = this.props;
-    const { id } = this.props.params;
-    const title  = group ? group.get('title') : id;
+		if (typeof group === 'undefined') {
+			return (
+				<Column>
+					<LoadingIndicator />
+				</Column>
+			);
+		} else if (group === false) {
+			return (
+				<Column>
+					<MissingIndicator />
+				</Column>
+			);
+		}
 
-    if (typeof group === 'undefined') {
-      return (
-        <Column>
-          <div>
-            <LoadingIndicator />
-          </div>
-        </Column>
-      );
-    } else if (group === false) {
-      return (
-        <Column>
-          <ColumnBackButton />
-          <MissingIndicator />
-        </Column>
-      );
-    }
+		return (
+			<div>
+				{relationships && relationships.get('member') && (
+					<div className='timeline-compose-block'>
+						<div className='timeline-compose-block__avatar'>
+							<Avatar account={account} size={46} />
+						</div>
+						<ComposeFormContainer group={group} shouldCondense={true} autoFocus={false}/>
+					</div>
+				)}
 
-    return (
-      <Column label={title}>
-        <ColumnHeader icon='list-ul' active={hasUnread} title={title}>
-          <div className='column-header__links'>
-            {/* Leave might be here */}
-          </div>
-
-          <hr />
-        </ColumnHeader>
-
-        <StatusListContainer
-          prepend={<HeaderContainer groupId={id} />}
-          alwaysPrepend
-          scrollKey={`group_timeline-${columnId}`}
-          timelineId={`group:${id}`}
-          onLoadMore={this.handleLoadMore}
-          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.' />}
-        />
-      </Column>
-    );
-  }
-
-}
+				<StatusListContainer
+					alwaysPrepend
+					scrollKey={`group_timeline-${columnId}`}
+					timelineId={`group:${id}`}
+					onLoadMore={this.handleLoadMore}
+					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>
+		);
+	}
+}

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

@@ -24,6 +24,9 @@ export const privateLinks = [
     <NotificationsCounterIcon />
     <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
   </NavLink>,
+  <NavLink className='tabs-bar__link groups' to='/groups' data-preview-title-id='column.groups' >
+    <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
+  </NavLink>,
   // <NavLink className='tabs-bar__link home' to='/groups' data-preview-title-id='column.groups' >
   //   <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
   // </NavLink>,

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

@@ -25,6 +25,8 @@ import TabsBar from './components/tabs_bar';
 import WhoToFollowPanel from './components/who_to_follow_panel';
 import LinkFooter from './components/link_footer';
 import ProfilePage from 'gabsocial/pages/profile_page';
+import GroupsPage from 'gabsocial/pages/groups_page';
+import GroupPage from 'gabsocial/pages/group_page';
 import SearchPage from 'gabsocial/pages/search_page';
 import HomePage from 'gabsocial/pages/home_page';
 
@@ -54,6 +56,7 @@ import {
   Explore,
   Groups,
   GroupTimeline,
+  GroupMembers,
 } from './util/async-components';
 import { me, meUsername } from '../../initial_state';
 import { previewState as previewMediaState } from './components/media_modal';
@@ -170,8 +173,11 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
         <WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
 
-        <WrappedRoute path='/groups' component={Groups} content={children} />
-        <WrappedRoute path='/groups/:id' component={GroupTimeline} content={children} />
+        <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
+        <WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} />
+        <WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
+        <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
+        <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
 
         <WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
 

app/javascript/gabsocial/features/ui/util/async-components.js

@@ -38,6 +38,10 @@ export function GroupTimeline () {
   return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/timeline');
 }
 
+export function GroupMembers () {
+  return import(/* webpackChunkName: "features/groups/timeline" */'../../groups/members');
+}
+
 export function Groups () {
   return import(/* webpackChunkName: "features/groups/index" */'../../groups/index');
 }