Use EntityStore for pending group requests

This commit is contained in:
Alex Gleason 2023-03-20 16:41:12 -05:00
parent 143a9eda44
commit ca9a41f102
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 13 additions and 28 deletions

View File

@ -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>

View File

@ -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),