From 238c30acf8434791b669507ce19fffd138b6a1e5 Mon Sep 17 00:00:00 2001 From: Chewbacca Date: Tue, 2 May 2023 13:25:32 -0400 Subject: [PATCH] Split out hooks from 'useGroups' --- app/soapbox/api/hooks/groups/useGroup.ts | 24 ++++++ .../groups/useGroupMembershipRequests.ts | 2 +- .../api/hooks/groups/useGroupRelationship.ts | 32 ++++++++ .../api/hooks/groups/useGroupRelationships.ts | 27 +++++++ .../api/hooks/groups/useGroupSearch.ts | 2 +- app/soapbox/api/hooks/groups/useGroups.ts | 73 ++----------------- .../api/hooks/groups/useGroupsFromTag.ts | 2 +- .../api/hooks/groups/usePopularGroups.ts | 2 +- .../api/hooks/groups/useSuggestedGroups.ts | 2 +- app/soapbox/api/hooks/index.ts | 5 +- .../features/ui/components/compose-button.tsx | 2 +- .../ui/components/floating-action-button.tsx | 2 +- .../ui/components/modals/compose-modal.tsx | 2 +- 13 files changed, 101 insertions(+), 76 deletions(-) create mode 100644 app/soapbox/api/hooks/groups/useGroup.ts create mode 100644 app/soapbox/api/hooks/groups/useGroupRelationship.ts create mode 100644 app/soapbox/api/hooks/groups/useGroupRelationships.ts diff --git a/app/soapbox/api/hooks/groups/useGroup.ts b/app/soapbox/api/hooks/groups/useGroup.ts new file mode 100644 index 000000000..b66c0fee7 --- /dev/null +++ b/app/soapbox/api/hooks/groups/useGroup.ts @@ -0,0 +1,24 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntity } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks'; +import { type Group, groupSchema } from 'soapbox/schemas'; + +import { useGroupRelationship } from './useGroupRelationship'; + +function useGroup(groupId: string, refetch = true) { + const api = useApi(); + + const { entity: group, ...result } = useEntity( + [Entities.GROUPS, groupId], + () => api.get(`/api/v1/groups/${groupId}`), + { schema: groupSchema, refetch }, + ); + const { entity: relationship } = useGroupRelationship(groupId); + + return { + ...result, + group: group ? { ...group, relationship: relationship || null } : undefined, + }; +} + +export { useGroup }; \ No newline at end of file diff --git a/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts b/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts index 171510338..16ff924c7 100644 --- a/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts +++ b/app/soapbox/api/hooks/groups/useGroupMembershipRequests.ts @@ -4,7 +4,7 @@ import { useApi } from 'soapbox/hooks/useApi'; import { accountSchema } from 'soapbox/schemas'; import { GroupRoles } from 'soapbox/schemas/group-member'; -import { useGroupRelationship } from './useGroups'; +import { useGroupRelationship } from './useGroupRelationship'; import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types'; diff --git a/app/soapbox/api/hooks/groups/useGroupRelationship.ts b/app/soapbox/api/hooks/groups/useGroupRelationship.ts new file mode 100644 index 000000000..6b24c463c --- /dev/null +++ b/app/soapbox/api/hooks/groups/useGroupRelationship.ts @@ -0,0 +1,32 @@ +import { useEffect } from 'react'; +import { z } from 'zod'; + +import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups'; +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntity } from 'soapbox/entity-store/hooks'; +import { useApi, useAppDispatch } from 'soapbox/hooks'; +import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas'; + +function useGroupRelationship(groupId: string) { + const api = useApi(); + const dispatch = useAppDispatch(); + + const { entity: groupRelationship, ...result } = useEntity( + [Entities.GROUP_RELATIONSHIPS, groupId], + () => api.get(`/api/v1/groups/relationships?id[]=${groupId}`), + { schema: z.array(groupRelationshipSchema).transform(arr => arr[0]) }, + ); + + useEffect(() => { + if (groupRelationship?.id) { + dispatch(fetchGroupRelationshipsSuccess([groupRelationship])); + } + }, [groupRelationship?.id]); + + return { + entity: groupRelationship, + ...result, + }; +} + +export { useGroupRelationship }; \ No newline at end of file diff --git a/app/soapbox/api/hooks/groups/useGroupRelationships.ts b/app/soapbox/api/hooks/groups/useGroupRelationships.ts new file mode 100644 index 000000000..c4106adda --- /dev/null +++ b/app/soapbox/api/hooks/groups/useGroupRelationships.ts @@ -0,0 +1,27 @@ +import { Entities } from 'soapbox/entity-store/entities'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks'; +import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas'; + +function useGroupRelationships(groupIds: string[]) { + const api = useApi(); + const q = groupIds.map(id => `id[]=${id}`).join('&'); + + const { entities, ...result } = useEntities( + [Entities.GROUP_RELATIONSHIPS, ...groupIds], + () => api.get(`/api/v1/groups/relationships?${q}`), + { schema: groupRelationshipSchema, enabled: groupIds.length > 0 }, + ); + + const relationships = entities.reduce>((map, relationship) => { + map[relationship.id] = relationship; + return map; + }, {}); + + return { + ...result, + relationships, + }; +} + +export { useGroupRelationships }; \ No newline at end of file diff --git a/app/soapbox/api/hooks/groups/useGroupSearch.ts b/app/soapbox/api/hooks/groups/useGroupSearch.ts index 508310911..d1d8acf9c 100644 --- a/app/soapbox/api/hooks/groups/useGroupSearch.ts +++ b/app/soapbox/api/hooks/groups/useGroupSearch.ts @@ -3,7 +3,7 @@ import { useEntities } from 'soapbox/entity-store/hooks'; import { useApi, useFeatures } from 'soapbox/hooks'; import { groupSchema } from 'soapbox/schemas'; -import { useGroupRelationships } from './useGroups'; +import { useGroupRelationships } from './useGroupRelationships'; import type { Group } from 'soapbox/schemas'; diff --git a/app/soapbox/api/hooks/groups/useGroups.ts b/app/soapbox/api/hooks/groups/useGroups.ts index 42904c142..13ca45713 100644 --- a/app/soapbox/api/hooks/groups/useGroups.ts +++ b/app/soapbox/api/hooks/groups/useGroups.ts @@ -1,13 +1,10 @@ -import { useEffect } from 'react'; -import { z } from 'zod'; - -import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups'; import { Entities } from 'soapbox/entity-store/entities'; -import { useEntities, useEntity } from 'soapbox/entity-store/hooks'; -import { useApi, useAppDispatch } from 'soapbox/hooks'; +import { useEntities } from 'soapbox/entity-store/hooks'; +import { useApi } from 'soapbox/hooks'; import { useFeatures } from 'soapbox/hooks/useFeatures'; -import { groupSchema, Group } from 'soapbox/schemas/group'; -import { groupRelationshipSchema, GroupRelationship } from 'soapbox/schemas/group-relationship'; +import { groupSchema, type Group } from 'soapbox/schemas/group'; + +import { useGroupRelationships } from './useGroupRelationships'; function useGroups(q: string = '') { const api = useApi(); @@ -31,62 +28,4 @@ function useGroups(q: string = '') { }; } -function useGroup(groupId: string, refetch = true) { - const api = useApi(); - - const { entity: group, ...result } = useEntity( - [Entities.GROUPS, groupId], - () => api.get(`/api/v1/groups/${groupId}`), - { schema: groupSchema, refetch }, - ); - const { entity: relationship } = useGroupRelationship(groupId); - - return { - ...result, - group: group ? { ...group, relationship: relationship || null } : undefined, - }; -} - -function useGroupRelationship(groupId: string) { - const api = useApi(); - const dispatch = useAppDispatch(); - - const { entity: groupRelationship, ...result } = useEntity( - [Entities.GROUP_RELATIONSHIPS, groupId], - () => api.get(`/api/v1/groups/relationships?id[]=${groupId}`), - { schema: z.array(groupRelationshipSchema).transform(arr => arr[0]) }, - ); - - useEffect(() => { - if (groupRelationship?.id) { - dispatch(fetchGroupRelationshipsSuccess([groupRelationship])); - } - }, [groupRelationship?.id]); - - return { - entity: groupRelationship, - ...result, - }; -} - -function useGroupRelationships(groupIds: string[]) { - const api = useApi(); - const q = groupIds.map(id => `id[]=${id}`).join('&'); - const { entities, ...result } = useEntities( - [Entities.GROUP_RELATIONSHIPS, ...groupIds], - () => api.get(`/api/v1/groups/relationships?${q}`), - { schema: groupRelationshipSchema, enabled: groupIds.length > 0 }, - ); - - const relationships = entities.reduce>((map, relationship) => { - map[relationship.id] = relationship; - return map; - }, {}); - - return { - ...result, - relationships, - }; -} - -export { useGroup, useGroups, useGroupRelationship, useGroupRelationships }; +export { useGroups }; diff --git a/app/soapbox/api/hooks/groups/useGroupsFromTag.ts b/app/soapbox/api/hooks/groups/useGroupsFromTag.ts index f579c719e..2c7e5a94f 100644 --- a/app/soapbox/api/hooks/groups/useGroupsFromTag.ts +++ b/app/soapbox/api/hooks/groups/useGroupsFromTag.ts @@ -3,7 +3,7 @@ import { useEntities } from 'soapbox/entity-store/hooks'; import { useApi, useFeatures } from 'soapbox/hooks'; import { groupSchema } from 'soapbox/schemas'; -import { useGroupRelationships } from './useGroups'; +import { useGroupRelationships } from './useGroupRelationships'; import type { Group } from 'soapbox/schemas'; diff --git a/app/soapbox/api/hooks/groups/usePopularGroups.ts b/app/soapbox/api/hooks/groups/usePopularGroups.ts index ead72a79b..b5959a335 100644 --- a/app/soapbox/api/hooks/groups/usePopularGroups.ts +++ b/app/soapbox/api/hooks/groups/usePopularGroups.ts @@ -5,7 +5,7 @@ import { Group, groupSchema } from 'soapbox/schemas'; import { useApi } from '../../../hooks/useApi'; import { useFeatures } from '../../../hooks/useFeatures'; -import { useGroupRelationships } from './useGroups'; +import { useGroupRelationships } from './useGroupRelationships'; function usePopularGroups() { const api = useApi(); diff --git a/app/soapbox/api/hooks/groups/useSuggestedGroups.ts b/app/soapbox/api/hooks/groups/useSuggestedGroups.ts index 78b1ddb79..be9b5a78e 100644 --- a/app/soapbox/api/hooks/groups/useSuggestedGroups.ts +++ b/app/soapbox/api/hooks/groups/useSuggestedGroups.ts @@ -3,7 +3,7 @@ import { useEntities } from 'soapbox/entity-store/hooks'; import { useApi, useFeatures } from 'soapbox/hooks'; import { type Group, groupSchema } from 'soapbox/schemas'; -import { useGroupRelationships } from './useGroups'; +import { useGroupRelationships } from './useGroupRelationships'; function useSuggestedGroups() { const api = useApi(); diff --git a/app/soapbox/api/hooks/index.ts b/app/soapbox/api/hooks/index.ts index eba4f0d84..ade03f799 100644 --- a/app/soapbox/api/hooks/index.ts +++ b/app/soapbox/api/hooks/index.ts @@ -12,15 +12,18 @@ export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest' export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup'; export { useDeleteGroup } from './groups/useDeleteGroup'; export { useDemoteGroupMember } from './groups/useDemoteGroupMember'; -export { useGroup, useGroups } from './groups/useGroups'; +export { useGroup } from './groups/useGroup'; export { useGroupLookup } from './groups/useGroupLookup'; export { useGroupMedia } from './groups/useGroupMedia'; export { useGroupMembers } from './groups/useGroupMembers'; export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests'; +export { useGroupRelationship } from './groups/useGroupRelationship'; +export { useGroupRelationships } from './groups/useGroupRelationships'; export { useGroupSearch } from './groups/useGroupSearch'; export { useGroupTag } from './groups/useGroupTag'; export { useGroupTags } from './groups/useGroupTags'; export { useGroupValidation } from './groups/useGroupValidation'; +export { useGroups } from './groups/useGroups'; export { useGroupsFromTag } from './groups/useGroupsFromTag'; export { useJoinGroup } from './groups/useJoinGroup'; export { useLeaveGroup } from './groups/useLeaveGroup'; diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx index a2944f699..b862d83fb 100644 --- a/app/soapbox/features/ui/components/compose-button.tsx +++ b/app/soapbox/features/ui/components/compose-button.tsx @@ -4,9 +4,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom'; import { groupComposeModal } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; +import { useGroupLookup } from 'soapbox/api/hooks'; import { Avatar, Button, HStack } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; -import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; const ComposeButton = () => { const location = useLocation(); diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx index 0e972ef40..ea6bd64ee 100644 --- a/app/soapbox/features/ui/components/floating-action-button.tsx +++ b/app/soapbox/features/ui/components/floating-action-button.tsx @@ -5,9 +5,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom'; import { groupComposeModal } from 'soapbox/actions/compose'; import { openModal } from 'soapbox/actions/modals'; +import { useGroupLookup } from 'soapbox/api/hooks'; import { Avatar, HStack, Icon } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; -import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; const messages = defineMessages({ publish: { id: 'compose_form.publish', defaultMessage: 'Publish' }, diff --git a/app/soapbox/features/ui/components/modals/compose-modal.tsx b/app/soapbox/features/ui/components/modals/compose-modal.tsx index 358a6d648..2bbdb4a2e 100644 --- a/app/soapbox/features/ui/components/modals/compose-modal.tsx +++ b/app/soapbox/features/ui/components/modals/compose-modal.tsx @@ -4,10 +4,10 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose'; import { openModal, closeModal } from 'soapbox/actions/modals'; +import { useGroup } from 'soapbox/api/hooks'; import { checkComposeContent } from 'soapbox/components/modal-root'; import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks'; -import { useGroup } from 'soapbox/hooks/api'; import ComposeForm from '../../../compose/components/compose-form';