Added join requests to Groups

• Added:
- join requests to Groups
- redux actions, reducers
- controller and functionality for fetching join requests, accepting, rejecting join requests
This commit is contained in:
mgabdev
2020-09-10 17:07:00 -05:00
parent a8056f80a2
commit 217aab9faa
13 changed files with 456 additions and 6 deletions

View File

@@ -55,6 +55,20 @@ export const GROUP_REMOVED_ACCOUNTS_CREATE_REQUEST = 'GROUP_REMOVED_ACCOUNTS_CRE
export const GROUP_REMOVED_ACCOUNTS_CREATE_SUCCESS = 'GROUP_REMOVED_ACCOUNTS_CREATE_SUCCESS';
export const GROUP_REMOVED_ACCOUNTS_CREATE_FAIL = 'GROUP_REMOVED_ACCOUNTS_CREATE_FAIL';
export const GROUP_JOIN_REQUESTS_FETCH_REQUEST = 'GROUP_JOIN_REQUESTS_FETCH_REQUEST'
export const GROUP_JOIN_REQUESTS_FETCH_SUCCESS = 'GROUP_JOIN_REQUESTS_FETCH_SUCCESS'
export const GROUP_JOIN_REQUESTS_FETCH_FAIL = 'GROUP_JOIN_REQUESTS_FETCH_FAIL'
export const GROUP_JOIN_REQUESTS_EXPAND_REQUEST = 'GROUP_JOIN_REQUESTS_EXPAND_REQUEST'
export const GROUP_JOIN_REQUESTS_EXPAND_SUCCESS = 'GROUP_JOIN_REQUESTS_EXPAND_SUCCESS'
export const GROUP_JOIN_REQUESTS_EXPAND_FAIL = 'GROUP_JOIN_REQUESTS_EXPAND_FAIL'
export const GROUP_JOIN_REQUESTS_APPROVE_SUCCESS = 'GROUP_JOIN_REQUESTS_APPROVE_SUCCESS'
export const GROUP_JOIN_REQUESTS_APPROVE_FAIL = 'GROUP_JOIN_REQUESTS_APPROVE_FAIL'
export const GROUP_JOIN_REQUESTS_REJECT_SUCCESS = 'GROUP_JOIN_REQUESTS_REJECT_SUCCESS'
export const GROUP_JOIN_REQUESTS_REJECT_FAIL = 'GROUP_JOIN_REQUESTS_REJECT_FAIL'
export const GROUP_REMOVE_STATUS_REQUEST = 'GROUP_REMOVE_STATUS_REQUEST';
export const GROUP_REMOVE_STATUS_SUCCESS = 'GROUP_REMOVE_STATUS_SUCCESS';
export const GROUP_REMOVE_STATUS_FAIL = 'GROUP_REMOVE_STATUS_FAIL';
@@ -596,6 +610,149 @@ export function updateRoleFail(groupId, id, error) {
};
export function fetchJoinRequests(id) {
return (dispatch, getState) => {
if (!me) return
dispatch(fetchJoinRequestsRequest(id))
api(getState).get(`/api/v1/groups/${id}/join_requests`).then((response) => {
const next = getLinks(response).refs.find(link => link.rel === 'next')
dispatch(importFetchedAccounts(response.data))
dispatch(fetchJoinRequestsSuccess(id, response.data, next ? next.uri : null))
dispatch(fetchRelationships(response.data.map(item => item.id)))
}).catch((error) => {
dispatch(fetchJoinRequestsFail(id, error))
})
}
}
export function fetchJoinRequestsRequest(id) {
return {
type: GROUP_JOIN_REQUESTS_FETCH_REQUEST,
id,
}
}
export function fetchJoinRequestsSuccess(id, accounts, next) {
return {
type: GROUP_JOIN_REQUESTS_FETCH_SUCCESS,
id,
accounts,
next,
}
}
export function fetchJoinRequestsFail(id, error) {
return {
type: GROUP_JOIN_REQUESTS_FETCH_FAIL,
id,
error,
}
}
export function expandJoinRequests(id) {
return (dispatch, getState) => {
if (!me) return
const url = getState().getIn(['user_lists', 'group_join_requests', id, 'next'])
const isLoading = getState().getIn(['user_lists', 'group_join_requests', id, 'isLoading'])
if (url === null || isLoading) return
dispatch(expandJoinRequestsRequest(id))
api(getState).get(url).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next')
dispatch(importFetchedAccounts(response.data))
dispatch(expandJoinRequestsSuccess(id, response.data, next ? next.uri : null))
dispatch(fetchRelationships(response.data.map(item => item.id)))
}).catch(error => {
dispatch(expandJoinRequestsFail(id, error))
})
}
}
export function expandJoinRequestsRequest(id) {
return {
type: GROUP_JOIN_REQUESTS_EXPAND_REQUEST,
id,
}
}
export function expandJoinRequestsSuccess(id, accounts, next) {
return {
type: GROUP_JOIN_REQUESTS_EXPAND_SUCCESS,
id,
accounts,
next,
}
}
export function expandJoinRequestsFail(id, error) {
return {
type: GROUP_JOIN_REQUESTS_EXPAND_FAIL,
id,
error,
}
}
export const approveJoinRequest = (accountId, groupId) => (dispatch, getState) => {
if (!me) return
api(getState).post(`/api/v1/groups/${groupId}/join_requests/approve`, { accountId }).then((response) => {
dispatch(approveJoinRequestSuccess(accountId, groupId))
}).catch((error) => {
dispatch(approveJoinRequestFail(accountId, groupId, error))
})
}
export function approveJoinRequestSuccess(accountId, groupId) {
return {
type: GROUP_JOIN_REQUESTS_APPROVE_SUCCESS,
accountId,
groupId,
}
}
export function approveJoinRequestFail(accountId, groupId, error) {
return {
type: GROUP_JOIN_REQUESTS_APPROVE_FAIL,
accountId,
groupId,
error,
}
}
export const rejectJoinRequest = (accountId, groupId) => (dispatch, getState) => {
if (!me) return
api(getState).delete(`/api/v1/groups/${groupId}/join_requests/reject`, { accountId }).then((response) => {
dispatch(rejectJoinRequestSuccess(accountId, groupId))
}).catch((error) => {
dispatch(rejectJoinRequestFail(accountId, groupId, error))
})
}
export function rejectJoinRequestSuccess(accountId, groupId) {
return {
type: GROUP_JOIN_REQUESTS_REJECT_SUCCESS,
accountId,
groupId,
}
}
export function rejectJoinRequestFail(accountId, groupId, error) {
return {
type: GROUP_JOIN_REQUESTS_REJECT_FAIL,
accountId,
groupId,
error,
}
}
export function pinGroupStatus(groupId, statusId) {
return (dispatch, getState) => {
if (!me) return

View File

@@ -0,0 +1,130 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
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 { me } from '../initial_state'
import {
fetchJoinRequests,
expandJoinRequests,
rejectJoinRequest,
approveJoinRequest,
} from '../actions/groups'
import Account from '../components/account'
import ColumnIndicator from '../components/column_indicator'
import Block from '../components/block'
import BlockHeading from '../components/block_heading'
import ScrollableList from '../components/scrollable_list'
class GroupJoinRequests extends ImmutablePureComponent {
componentWillMount() {
const { groupId } = this.props
this.props.onFetchJoinRequests(groupId)
}
componentWillReceiveProps(nextProps) {
if (nextProps.groupId !== this.props.groupId) {
this.props.onFetchJoinRequests(nextProps.groupId)
}
}
handleLoadMore = debounce(() => {
this.props.onExpandJoinRequests(this.props.groupId)
}, 300, { leading: true })
render() {
const {
accountIds,
hasMore,
group,
groupId,
relationships,
} = this.props
if (!group || !relationships) return <ColumnIndicator type='loading' />
const isAdminOrMod = relationships ? (relationships.get('admin') || relationships.get('moderator')) : false
if (!isAdminOrMod) return <ColumnIndicator type='missing' />
return (
<Block>
<BlockHeading title='Group Member Requests' />
<div className={_s.d}>
<ScrollableList
scrollKey='group-members'
hasMore={hasMore}
showLoading={(!group || !accountIds || !relationships)}
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='group.requests.empty' defaultMessage='This group does not have any member requests.' />}
>
{
accountIds && accountIds.map((id) => (
<Account
compact
key={id}
id={id}
showDismiss
dismissAction={() => {
this.props.onRejectJoinRequest(id, groupId)
}}
actionIcon={(!isAdminOrMod || id === me) ? undefined : 'check'}
onActionClick={(data, event) => {
this.props.onApproveJoinRequest(id, groupId)
}}
/>
))
}
</ScrollableList>
</div>
</Block>
)
}
}
const mapStateToProps = (state, { params }) => {
const groupId = isObject(params) ? params['id'] : -1
const group = groupId === -1 ? null : state.getIn(['groups', groupId])
return {
group,
groupId,
relationships: state.getIn(['group_relationships', groupId]),
accountIds: state.getIn(['user_lists', 'group_join_requests', groupId, 'items']),
hasMore: !!state.getIn(['user_lists', 'group_join_requests', groupId, 'next']),
}
}
const mapDispatchToProps = (dispatch) => ({
onFetchJoinRequests(groupId) {
dispatch(fetchJoinRequests(groupId))
},
onExpandJoinRequests(groupId) {
dispatch(expandJoinRequests(groupId))
},
onRejectJoinRequest(accountId, groupId) {
dispatch(rejectJoinRequest(accountId, groupId))
},
onApproveJoinRequest(accountId, groupId) {
dispatch(approveJoinRequest(accountId, groupId))
},
})
GroupJoinRequests.propTypes = {
group: ImmutablePropTypes.map,
groupId: PropTypes.string.isRequired,
accountIds: ImmutablePropTypes.list,
hasMore: PropTypes.bool,
onExpandJoinRequests: PropTypes.func.isRequired,
onFetchJoinRequests: PropTypes.func.isRequired,
onRejectJoinRequest: PropTypes.func.isRequired,
onApproveJoinRequest: PropTypes.func.isRequired,
}
export default connect(mapStateToProps, mapDispatchToProps)(GroupJoinRequests)

View File

@@ -64,6 +64,7 @@ import {
GroupCollectionTimeline,
GroupCreate,
GroupAbout,
GroupJoinRequests,
GroupMembers,
GroupRemovedAccounts,
GroupTimeline,
@@ -193,6 +194,7 @@ class SwitchingArea extends React.PureComponent {
<WrappedRoute path='/groups/create' page={ModalPage} component={GroupCreate} content={children} componentParams={{ title: 'Create Group', page: 'create-group' }} />
<WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
<WrappedRoute path='/groups/:id/requests' page={GroupPage} component={GroupJoinRequests} 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', page: 'edit-group' }} />
<WrappedRoute path='/groups/:id/about' publicRoute page={GroupPage} component={GroupAbout} content={children} />

View File

@@ -37,7 +37,7 @@ export function GroupCreate() { return import(/* webpackChunkName: "features/gro
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 GroupInfoPanel() { return import(/* webpackChunkName: "components/group_info_panel" */'../../../components/panel/group_info_panel') }
// export function GroupJoinRequests() { return import(/* webpackChunkName: "features/group_join_requests" */'../../group_join_requests') }
export function GroupJoinRequests() { return import(/* webpackChunkName: "features/group_join_requests" */'../../group_join_requests') }
export function GroupListSortOptionsPopover() { return import(/* webpackChunkName: "components/group_list_sort_options_popover" */'../../../components/popover/group_list_sort_options_popover') }
export function GroupMemberOptionsPopover() { return import(/* webpackChunkName: "components/group_member_options_popover" */'../../../components/popover/group_member_options_popover') }
export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }

View File

@@ -8,6 +8,8 @@ import { fetchGroup } from '../actions/groups'
import PageTitle from '../features/ui/util/page_title'
import GroupLayout from '../layouts/group_layout'
import TimelineComposeBlock from '../components/timeline_compose_block'
import Block from '../components/block'
import ColumnIndicator from '../components/column_indicator'
import Divider from '../components/divider'
class GroupPage extends ImmutablePureComponent {
@@ -27,6 +29,11 @@ class GroupPage extends ImmutablePureComponent {
const groupTitle = !!group ? group.get('title') : ''
const groupId = !!group ? group.get('id') : undefined
const isPrivate = !!group ? group.get('is_private') : false
const isMember = !!relationships ? relationships.get('member') : false
const unavailable = isPrivate && !isMember
return (
<GroupLayout
@@ -36,16 +43,25 @@ class GroupPage extends ImmutablePureComponent {
relationships={relationships}
>
<PageTitle path={[groupTitle, intl.formatMessage(messages.group)]} />
{
!!relationships && isTimeline && relationships.get('member') &&
!!relationships && isTimeline && isMember &&
<React.Fragment>
<TimelineComposeBlock size={46} groupId={groupId} autoFocus />
<Divider />
</React.Fragment>
}
{children}
{
unavailable &&
<Block>
<ColumnIndicator type='error' message={intl.formatMessage(messages.groupPrivate)} />
</Block>
}
{
!unavailable && children
}
</GroupLayout>
)
}
@@ -53,6 +69,7 @@ class GroupPage extends ImmutablePureComponent {
const messages = defineMessages({
group: { id: 'group', defaultMessage: 'Group' },
groupPrivate: { id: 'group_private', defaultMessage: 'This group is private. You must request to join in order to view this group.' },
})
const mapStateToProps = (state, { params: { id } }) => ({

View File

@@ -48,6 +48,10 @@ import {
GROUP_REMOVED_ACCOUNTS_FETCH_SUCCESS,
GROUP_REMOVED_ACCOUNTS_EXPAND_SUCCESS,
GROUP_REMOVED_ACCOUNTS_REMOVE_SUCCESS,
GROUP_JOIN_REQUESTS_FETCH_SUCCESS,
GROUP_JOIN_REQUESTS_EXPAND_SUCCESS,
GROUP_JOIN_REQUESTS_APPROVE_SUCCESS,
GROUP_JOIN_REQUESTS_REJECT_SUCCESS,
} from '../actions/groups'
const initialState = ImmutableMap({
@@ -60,6 +64,7 @@ const initialState = ImmutableMap({
mutes: ImmutableMap(),
groups: ImmutableMap(),
group_removed_accounts: ImmutableMap(),
group_join_requests: ImmutableMap(),
});
const setListFailed = (state, type, id) => {
@@ -168,6 +173,14 @@ export default function userLists(state = initialState, action) {
case GROUP_REMOVED_ACCOUNTS_REMOVE_SUCCESS:
return state.updateIn(['group_removed_accounts', action.groupId, 'items'], list => list.filterNot(item => item === action.id));
case GROUP_JOIN_REQUESTS_FETCH_SUCCESS:
return normalizeList(state, 'group_join_requests', action.id, action.accounts, action.next);
case GROUP_JOIN_REQUESTS_EXPAND_SUCCESS:
return appendToList(state, 'group_join_requests', action.id, action.accounts, action.next);
case GROUP_JOIN_REQUESTS_APPROVE_SUCCESS:
case GROUP_JOIN_REQUESTS_REJECT_SUCCESS:
return state.updateIn(['group_join_requests', action.groupId, 'items'], list => list.filterNot(item => item === action.id));
default:
return state;
}