Use EntityStore for pending group requests
This commit is contained in:
parent
143a9eda44
commit
ca9a41f102
|
@ -1,17 +1,18 @@
|
||||||
import React, { useCallback, useEffect } from 'react';
|
import React from 'react';
|
||||||
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
import { authorizeGroupMembershipRequest, fetchGroupMembershipRequests, rejectGroupMembershipRequest } from 'soapbox/actions/groups';
|
import { authorizeGroupMembershipRequest, rejectGroupMembershipRequest } from 'soapbox/actions/groups';
|
||||||
import Account from 'soapbox/components/account';
|
import Account from 'soapbox/components/account';
|
||||||
import ScrollableList from 'soapbox/components/scrollable-list';
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
||||||
import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
|
import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
|
||||||
import { useAppDispatch, useAppSelector, useGroup } from 'soapbox/hooks';
|
import { useAppDispatch, useGroup } from 'soapbox/hooks';
|
||||||
import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
|
import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
|
||||||
import { makeGetAccount } from 'soapbox/selectors';
|
|
||||||
import toast from 'soapbox/toast';
|
import toast from 'soapbox/toast';
|
||||||
|
|
||||||
import ColumnForbidden from '../ui/components/column-forbidden';
|
import ColumnForbidden from '../ui/components/column-forbidden';
|
||||||
|
|
||||||
|
import type { Account as AccountEntity } from 'soapbox/schemas';
|
||||||
|
|
||||||
type RouteParams = { id: string };
|
type RouteParams = { id: string };
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -23,27 +24,23 @@ const messages = defineMessages({
|
||||||
});
|
});
|
||||||
|
|
||||||
interface IMembershipRequest {
|
interface IMembershipRequest {
|
||||||
accountId: string
|
account: AccountEntity
|
||||||
groupId: string
|
groupId: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const MembershipRequest: React.FC<IMembershipRequest> = ({ accountId, groupId }) => {
|
const MembershipRequest: React.FC<IMembershipRequest> = ({ account, groupId }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
const getAccount = useCallback(makeGetAccount(), []);
|
|
||||||
|
|
||||||
const account = useAppSelector((state) => getAccount(state, accountId));
|
|
||||||
|
|
||||||
if (!account) return null;
|
if (!account) return null;
|
||||||
|
|
||||||
const handleAuthorize = () =>
|
const handleAuthorize = () =>
|
||||||
dispatch(authorizeGroupMembershipRequest(groupId, accountId)).then(() => {
|
dispatch(authorizeGroupMembershipRequest(groupId, account.id)).then(() => {
|
||||||
toast.success(intl.formatMessage(messages.authorized, { name: account.acct }));
|
toast.success(intl.formatMessage(messages.authorized, { name: account.acct }));
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleReject = () =>
|
const handleReject = () =>
|
||||||
dispatch(rejectGroupMembershipRequest(groupId, accountId)).then(() => {
|
dispatch(rejectGroupMembershipRequest(groupId, account.id)).then(() => {
|
||||||
toast.success(intl.formatMessage(messages.rejected, { name: account.acct }));
|
toast.success(intl.formatMessage(messages.rejected, { name: account.acct }));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -76,19 +73,13 @@ interface IGroupMembershipRequests {
|
||||||
|
|
||||||
const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params }) => {
|
const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
|
|
||||||
const id = params?.id;
|
const id = params?.id;
|
||||||
|
|
||||||
const { group } = useGroup(id);
|
const { group } = useGroup(id);
|
||||||
const { entities } = useGroupMembershipRequests(id);
|
const { entities: accounts, isLoading } = useGroupMembershipRequests(id);
|
||||||
const accountIds = entities.map(e => e.id);
|
|
||||||
|
|
||||||
useEffect(() => {
|
if (!group || !group.relationship || isLoading) {
|
||||||
dispatch(fetchGroupMembershipRequests(id));
|
|
||||||
}, [id]);
|
|
||||||
|
|
||||||
if (!group || !group.relationship || !accountIds) {
|
|
||||||
return (
|
return (
|
||||||
<Column label={intl.formatMessage(messages.heading)}>
|
<Column label={intl.formatMessage(messages.heading)}>
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
@ -108,8 +99,8 @@ const GroupMembershipRequests: React.FC<IGroupMembershipRequests> = ({ params })
|
||||||
scrollKey='group_membership_requests'
|
scrollKey='group_membership_requests'
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
>
|
>
|
||||||
{accountIds.map((accountId) =>
|
{accounts.map((account) =>
|
||||||
<MembershipRequest key={accountId} accountId={accountId} groupId={id} />,
|
<MembershipRequest key={account.id} account={account} groupId={id} />,
|
||||||
)}
|
)}
|
||||||
</ScrollableList>
|
</ScrollableList>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
|
@ -68,12 +68,6 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
|
||||||
const isBlocked = group?.relationship?.blocked_by;
|
const isBlocked = group?.relationship?.blocked_by;
|
||||||
const isPrivate = group?.locked;
|
const isPrivate = group?.locked;
|
||||||
|
|
||||||
// if ((group as any) === false) {
|
|
||||||
// return (
|
|
||||||
// <MissingIndicator />
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
text: intl.formatMessage(messages.all),
|
text: intl.formatMessage(messages.all),
|
||||||
|
|
Loading…
Reference in New Issue