soapbox/app/soapbox/queries/groups/members.ts

import { useQuery } from '@tanstack/react-query';

import { useApi } from 'soapbox/hooks';
import { normalizeAccount } from 'soapbox/normalizers';
import { GroupRoles } from 'soapbox/schemas/group-member';

const GroupMemberKeys = {
  members: (id: string, role: string) => ['group', id, role] as const,
};

const useGroupMembers = (groupId: string, role: GroupRoles) => {
  const api = useApi();

  const getQuery = async () => {
    const { data } = await api.get(`/api/v1/groups/${groupId}/memberships`, {
      params: {
        role,
      },
    });

    const result = data.map((member: any) => {
      return {
        ...member,
        account: normalizeAccount(member.account),
      };
    });

    return result;
  };

  return useQuery(
    GroupMemberKeys.members(groupId, role),
    getQuery,
    {
      placeholderData: [],
    },
  );
};

export { useGroupMembers };