|
|
@ -1,8 +1,9 @@
|
|
|
|
import React, { useMemo } from 'react';
|
|
|
|
import React, { useMemo } from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
|
|
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
|
|
|
|
|
|
|
import { useGroup } from 'soapbox/hooks';
|
|
|
|
|
|
|
|
import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
|
|
|
|
import { useGroupMembers } from 'soapbox/hooks/api/useGroupMembers';
|
|
|
|
import { useGroupMembers } from 'soapbox/hooks/api/useGroupMembers';
|
|
|
|
import { useGroup } from 'soapbox/queries/groups';
|
|
|
|
|
|
|
|
import { GroupRoles } from 'soapbox/schemas/group-member';
|
|
|
|
import { GroupRoles } from 'soapbox/schemas/group-member';
|
|
|
|
|
|
|
|
|
|
|
|
import PlaceholderAccount from '../placeholder/components/placeholder-account';
|
|
|
|
import PlaceholderAccount from '../placeholder/components/placeholder-account';
|
|
|
@ -22,8 +23,9 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
|
|
|
|
const { groupMembers: owners, isFetching: isFetchingOwners } = useGroupMembers(groupId, GroupRoles.OWNER);
|
|
|
|
const { groupMembers: owners, isFetching: isFetchingOwners } = useGroupMembers(groupId, GroupRoles.OWNER);
|
|
|
|
const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, GroupRoles.ADMIN);
|
|
|
|
const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, GroupRoles.ADMIN);
|
|
|
|
const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, GroupRoles.USER);
|
|
|
|
const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, GroupRoles.USER);
|
|
|
|
|
|
|
|
const { entities: pending, isFetching: isFetchingPending } = useGroupMembershipRequests(groupId);
|
|
|
|
|
|
|
|
|
|
|
|
const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers;
|
|
|
|
const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers || isFetchingPending;
|
|
|
|
|
|
|
|
|
|
|
|
const members = useMemo(() => [
|
|
|
|
const members = useMemo(() => [
|
|
|
|
...owners,
|
|
|
|
...owners,
|
|
|
@ -44,6 +46,9 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
|
|
|
|
className='divide-y divide-solid divide-gray-300'
|
|
|
|
className='divide-y divide-solid divide-gray-300'
|
|
|
|
itemClassName='py-3 last:pb-0'
|
|
|
|
itemClassName='py-3 last:pb-0'
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
{(pending.length > 0) && (
|
|
|
|
|
|
|
|
<div>{pending.length} pending members</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
{members.map((member) => (
|
|
|
|
{members.map((member) => (
|
|
|
|
<GroupMemberListItem
|
|
|
|
<GroupMemberListItem
|
|
|
|
group={group as Group}
|
|
|
|
group={group as Group}
|
|
|
|