diff --git a/app/soapbox/hooks/useGroups.ts b/app/soapbox/hooks/useGroups.ts index 3d12e1be8..1a69da120 100644 --- a/app/soapbox/hooks/useGroups.ts +++ b/app/soapbox/hooks/useGroups.ts @@ -1,13 +1,14 @@ import { useEffect } from 'react'; import { useEntities, useEntity } from 'soapbox/entity-store/hooks'; -import { normalizeGroup } from 'soapbox/normalizers'; +import { normalizeGroup, normalizeGroupRelationship } from 'soapbox/normalizers'; -import type { Group } from 'soapbox/types/entities'; +import type { Group, GroupRelationship } from 'soapbox/types/entities'; function useGroups() { const result = useEntities(['Group', ''], '/api/v1/groups'); const { entities, isLoading, fetchEntities } = result; + const { entities: relationships } = useGroupRelationships(entities.map(entity => entity.id)); // Note: we have to fetch them in the hook right now because I haven't implemented // max-age or cache expiry in the entity store yet. It's planned. @@ -17,9 +18,19 @@ function useGroups() { } }, []); + const groups = entities.map((entity) => { + const group = normalizeGroup(entity); + // TODO: a generalistic useRelationships() hook that returns a map of values (would be faster). + const relationship = relationships.find(r => r.id === group.id); + if (relationship) { + return group.set('relationship', relationship); + } + return group; + }); + return { ...result, - groups: entities.map(normalizeGroup), + groups, }; } @@ -39,4 +50,21 @@ function useGroup(groupId: string) { }; } +function useGroupRelationships(groupIds: string[]) { + const q = groupIds.map(id => `id[]=${id}`).join('&'); + const result = useEntities(['GroupRelationship', ''], `/api/v1/groups/relationships?${q}`); + const { entities, isLoading, fetchEntities } = result; + + useEffect(() => { + if (!isLoading) { + fetchEntities(); + } + }, groupIds); + + return { + ...result, + relationships: entities.map(normalizeGroupRelationship), + }; +} + export { useGroup, useGroups }; \ No newline at end of file