Commit 1fabd284 authored by 2458773093's avatar 2458773093

New groups

parent fd50f033
......@@ -9,7 +9,7 @@ class Api::V1::Groups::AccountsController < Api::BaseController
before_action :require_user!
before_action :set_group
after_action :insert_pagination_headers, only: :index
after_action :insert_pagination_headers, only: :show
def show
@accounts = load_accounts
......
......@@ -10,10 +10,24 @@ class Api::V1::GroupsController < Api::BaseController
before_action :set_group, except: [:index, :create]
def index
@groups = Group.joins(:group_accounts).where(is_archived: false, group_accounts: { account: current_account }).all
case current_tab
when 'featured'
@groups = Group.where(is_featured: true).limit(25).all
when 'member'
@groups = Group.joins(:group_accounts).where(is_archived: false, group_accounts: { account: current_account }).all
when 'admin'
@groups = Group.joins(:group_accounts).where(is_archived: false, group_accounts: { account: current_account, write_permissions: true }).all
end
render json: @groups, each_serializer: REST::GroupSerializer
end
def current_tab
tab = 'featured'
tab = params[:tab] if ['featured', 'member', 'admin'].include? params[:tab]
return tab
end
def show
render json: @group, serializer: REST::GroupSerializer
end
......
......@@ -29,7 +29,7 @@ class Api::V1::Timelines::GroupController < Api::BaseController
end
def group_statuses
statuses = tag_timeline_statuses.paginate_by_id(
statuses = group_timeline_statuses.paginate_by_id(
limit_param(DEFAULT_STATUSES_LIMIT),
params_slice(:max_id, :since_id, :min_id)
)
......@@ -43,7 +43,7 @@ class Api::V1::Timelines::GroupController < Api::BaseController
end
end
def group_statuses
def group_timeline_statuses
GroupQueryService.new.call(@group)
end
......
......@@ -125,7 +125,7 @@ export function directCompose(account, routerHistory) {
};
};
export function submitCompose(routerHistory) {
export function submitCompose(routerHistory, group) {
return function (dispatch, getState) {
if (!me) return;
......@@ -147,6 +147,7 @@ export function submitCompose(routerHistory) {
spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''),
visibility: getState().getIn(['compose', 'privacy']),
poll: getState().getIn(['compose', 'poll'], null),
group_id: group ? group.get('id') : null,
}, {
headers: {
'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),
......
import api from '../api';
import api, { getLinks } from '../api';
import { me } from 'gabsocial/initial_state';
import { importFetchedAccounts } from './importer';
import { fetchRelationships } from './accounts';
export const GROUP_FETCH_REQUEST = 'GROUP_FETCH_REQUEST';
export const GROUP_FETCH_SUCCESS = 'GROUP_FETCH_SUCCESS';
......@@ -21,6 +23,14 @@ export const GROUP_LEAVE_REQUEST = 'GROUP_LEAVE_REQUEST';
export const GROUP_LEAVE_SUCCESS = 'GROUP_LEAVE_SUCCESS';
export const GROUP_LEAVE_FAIL = 'GROUP_LEAVE_FAIL';
export const GROUP_MEMBERS_FETCH_REQUEST = 'GROUP_MEMBERS_FETCH_REQUEST';
export const GROUP_MEMBERS_FETCH_SUCCESS = 'GROUP_MEMBERS_FETCH_SUCCESS';
export const GROUP_MEMBERS_FETCH_FAIL = 'GROUP_MEMBERS_FETCH_FAIL';
export const GROUP_MEMBERS_EXPAND_REQUEST = 'GROUP_MEMBERS_EXPAND_REQUEST';
export const GROUP_MEMBERS_EXPAND_SUCCESS = 'GROUP_MEMBERS_EXPAND_SUCCESS';
export const GROUP_MEMBERS_EXPAND_FAIL = 'GROUP_MEMBERS_EXPAND_FAIL';
export const fetchGroup = id => (dispatch, getState) => {
if (!me) return;
......@@ -98,13 +108,16 @@ export function fetchGroupRelationshipsFail(error) {
};
};
export const fetchGroups = () => (dispatch, getState) => {
export const fetchGroups = (tab) => (dispatch, getState) => {
if (!me) return;
dispatch(fetchGroupsRequest());
api(getState).get('/api/v1/groups')
.then(({ data }) => dispatch(fetchGroupsSuccess(data)))
api(getState).get('/api/v1/groups?tab=' + tab)
.then(({ data }) => {
dispatch(fetchGroupsSuccess(data, tab));
dispatch(fetchGroupRelationships(data.map(item => item.id)));
})
.catch(err => dispatch(fetchGroupsFail(err)));
};
......@@ -112,9 +125,10 @@ export const fetchGroupsRequest = () => ({
type: GROUPS_FETCH_REQUEST,
});
export const fetchGroupsSuccess = groups => ({
export const fetchGroupsSuccess = (groups, tab) => ({
type: GROUPS_FETCH_SUCCESS,
groups,
tab,
});
export const fetchGroupsFail = error => ({
......@@ -191,3 +205,93 @@ export function leaveGroupFail(error) {
error,
};
};
export function fetchMembers(id) {
return (dispatch, getState) => {
if (!me) return;
dispatch(fetchMembersRequest(id));
api(getState).get(`/api/v1/groups/${id}/accounts`).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next');
dispatch(importFetchedAccounts(response.data));
dispatch(fetchMembersSuccess(id, response.data, next ? next.uri : null));
dispatch(fetchRelationships(response.data.map(item => item.id)));
}).catch(error => {
dispatch(fetchMembersFail(id, error));
});
};
};
export function fetchMembersRequest(id) {
return {
type: GROUP_MEMBERS_FETCH_REQUEST,
id,
};
};
export function fetchMembersSuccess(id, accounts, next) {
return {
type: GROUP_MEMBERS_FETCH_SUCCESS,
id,
accounts,
next,
};
};
export function fetchMembersFail(id, error) {
return {
type: GROUP_MEMBERS_FETCH_FAIL,
id,
error,
};
};
export function expandMembers(id) {
return (dispatch, getState) => {
if (!me) return;
const url = getState().getIn(['user_lists', 'groups', id, 'next']);
if (url === null) {
return;
}
dispatch(expandMembersRequest(id));
api(getState).get(url).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next');
dispatch(importFetchedAccounts(response.data));
dispatch(expandMembersSuccess(id, response.data, next ? next.uri : null));
dispatch(fetchRelationships(response.data.map(item => item.id)));
}).catch(error => {
dispatch(expandMembersFail(id, error));
});
};
};
export function expandMembersRequest(id) {
return {
type: GROUP_MEMBERS_EXPAND_REQUEST,
id,
};
};
export function expandMembersSuccess(id, accounts, next) {
return {
type: GROUP_MEMBERS_EXPAND_SUCCESS,
id,
accounts,
next,
};
};
export function expandMembersFail(id, error) {
return {
type: GROUP_MEMBERS_EXPAND_FAIL,
id,
error,
};
};
\ No newline at end of file
......@@ -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 = () => {
......
......@@ -33,8 +33,8 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(changeCompose(text));
},
onSubmit (router) {
dispatch(submitCompose(router));
onSubmit (router, group) {
dispatch(submitCompose(router, group));
},
onClearSuggestions () {
......
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>
);
}
}
\ No newline at end of file
......@@ -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());
}
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 />
componentWillMount () {
this.props.dispatch(fetchGroups(this.props.activeTab));
}
<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>
);
}
componentDidUpdate(oldProps) {
if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
this.props.dispatch(fetchGroups(this.props.activeTab));
}
}
}
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>
);
}
}
\ No newline at end of file
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>
);
}
}
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 {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
static contextTypes = {
router: PropTypes.object,
};
render () {
const { group, relationships, toggleMembership } = this.props;
if (group === null) {
return null;
}
return (
<div className='account-timeline__header'>
<InnerHeader
group={group}
relationships={relationships}
toggleMembership={toggleMembership}
/>
<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>
);
}
const messages = defineMessages({
join: { id: 'groups.join', defaultMessage: 'Join group' },
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
});
export default @injectIntl
class Header extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
static contextTypes = {
router: PropTypes.object,
};
getActionButton() {
const { group, relationships, toggleMembership, intl } = this.props;
const toggle = () => toggleMembership(group, relationships);
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} />;
}
}
render () {
const { group, relationships } = this.props;
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>
);
}
}
'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' },
<