From 1bce61182cea1a4f12984e389a510735fec56943 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 Apr 2023 15:28:20 -0400 Subject: [PATCH] Make components use groupId param --- .../components/hoc/group-lookup-hoc.tsx | 25 ++++++++++++++--- app/soapbox/features/group/edit-group.tsx | 4 +-- .../features/group/group-blocked-members.tsx | 4 +-- app/soapbox/features/group/group-gallery.tsx | 2 +- app/soapbox/features/group/group-members.tsx | 4 +-- .../group/group-membership-requests.tsx | 4 +-- app/soapbox/features/group/group-timeline.tsx | 4 +-- app/soapbox/features/group/manage-group.tsx | 4 +-- app/soapbox/features/ui/index.tsx | 28 ++++++++++++++----- app/soapbox/pages/group-page.tsx | 19 +++++++------ 10 files changed, 65 insertions(+), 33 deletions(-) diff --git a/app/soapbox/components/hoc/group-lookup-hoc.tsx b/app/soapbox/components/hoc/group-lookup-hoc.tsx index 5c5f43c0c..b6a125eed 100644 --- a/app/soapbox/components/hoc/group-lookup-hoc.tsx +++ b/app/soapbox/components/hoc/group-lookup-hoc.tsx @@ -1,20 +1,27 @@ import React from 'react'; +import ColumnLoading from 'soapbox/features/ui/components/column-loading'; import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup'; -import { Spinner } from '../ui'; - interface IGroupLookup { params: { groupSlug: string } } +interface IMaybeGroupLookup { + params?: { + groupSlug?: string + groupId?: string + } +} + function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) { const GroupLookup: React.FC = (props) => { const { entity: group } = useGroupLookup(props.params.groupSlug); + if (!group) return ( - + ); const newProps = { @@ -31,7 +38,17 @@ function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: stri ); }; - return GroupLookup; + const MaybeGroupLookup: React.FC = (props) => { + const { params } = props; + + if (params?.groupId) { + return ; + } else { + return ; + } + }; + + return MaybeGroupLookup; } export default GroupLookupHoc; \ No newline at end of file diff --git a/app/soapbox/features/group/edit-group.tsx b/app/soapbox/features/group/edit-group.tsx index 1e8024f6f..296c39e7e 100644 --- a/app/soapbox/features/group/edit-group.tsx +++ b/app/soapbox/features/group/edit-group.tsx @@ -25,11 +25,11 @@ const messages = defineMessages({ interface IEditGroup { params: { - id: string + groupId: string } } -const EditGroup: React.FC = ({ params: { id: groupId } }) => { +const EditGroup: React.FC = ({ params: { groupId } }) => { const intl = useIntl(); const instance = useInstance(); diff --git a/app/soapbox/features/group/group-blocked-members.tsx b/app/soapbox/features/group/group-blocked-members.tsx index a82f889c1..94b033837 100644 --- a/app/soapbox/features/group/group-blocked-members.tsx +++ b/app/soapbox/features/group/group-blocked-members.tsx @@ -12,7 +12,7 @@ import toast from 'soapbox/toast'; import ColumnForbidden from '../ui/components/column-forbidden'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.group_blocked_members', defaultMessage: 'Banned Members' }, @@ -62,7 +62,7 @@ const GroupBlockedMembers: React.FC = ({ params }) => { const intl = useIntl(); const dispatch = useAppDispatch(); - const id = params?.id; + const id = params?.groupId; const { group } = useGroup(id); const accountIds = useAppSelector((state) => state.user_lists.group_blocks.get(id)?.items); diff --git a/app/soapbox/features/group/group-gallery.tsx b/app/soapbox/features/group/group-gallery.tsx index 139be5bf3..f8a259e50 100644 --- a/app/soapbox/features/group/group-gallery.tsx +++ b/app/soapbox/features/group/group-gallery.tsx @@ -16,7 +16,7 @@ import type { Attachment, Status } from 'soapbox/types/entities'; const GroupGallery = () => { const dispatch = useAppDispatch(); - const { id: groupId } = useParams<{ id: string }>(); + const { groupId } = useParams<{ groupId: string }>(); const { group, isLoading: groupIsLoading } = useGroup(groupId); diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx index a3a790a62..fc04e3d29 100644 --- a/app/soapbox/features/group/group-members.tsx +++ b/app/soapbox/features/group/group-members.tsx @@ -16,13 +16,13 @@ import GroupMemberListItem from './components/group-member-list-item'; import type { Group } from 'soapbox/types/entities'; interface IGroupMembers { - params: { id: string } + params: { groupId: string } } export const MAX_ADMIN_COUNT = 5; const GroupMembers: React.FC = (props) => { - const groupId = props.params.id; + const { groupId } = props.params; const features = useFeatures(); diff --git a/app/soapbox/features/group/group-membership-requests.tsx b/app/soapbox/features/group/group-membership-requests.tsx index dc1190bbf..c83d45b06 100644 --- a/app/soapbox/features/group/group-membership-requests.tsx +++ b/app/soapbox/features/group/group-membership-requests.tsx @@ -14,7 +14,7 @@ import ColumnForbidden from '../ui/components/column-forbidden'; import type { Account as AccountEntity } from 'soapbox/schemas'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.group_pending_requests', defaultMessage: 'Pending requests' }, @@ -54,7 +54,7 @@ interface IGroupMembershipRequests { } const GroupMembershipRequests: React.FC = ({ params }) => { - const id = params?.id; + const id = params?.groupId; const intl = useIntl(); const { group } = useGroup(id); diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx index f19da1777..53f570280 100644 --- a/app/soapbox/features/group/group-timeline.tsx +++ b/app/soapbox/features/group/group-timeline.tsx @@ -12,7 +12,7 @@ import { useGroup } from 'soapbox/hooks/api'; import Timeline from '../ui/components/timeline'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; interface IGroupTimeline { params: RouteParams @@ -22,7 +22,7 @@ const GroupTimeline: React.FC = (props) => { const account = useOwnAccount(); const dispatch = useAppDispatch(); - const groupId = props.params.id; + const { groupId } = props.params; const { group } = useGroup(groupId); diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx index 12dc0b11b..38b90e34b 100644 --- a/app/soapbox/features/group/manage-group.tsx +++ b/app/soapbox/features/group/manage-group.tsx @@ -14,7 +14,7 @@ import { TRUTHSOCIAL } from 'soapbox/utils/features'; import ColumnForbidden from '../ui/components/column-forbidden'; -type RouteParams = { id: string }; +type RouteParams = { groupId: string }; const messages = defineMessages({ heading: { id: 'column.manage_group', defaultMessage: 'Manage group' }, @@ -35,7 +35,7 @@ interface IManageGroup { } const ManageGroup: React.FC = ({ params }) => { - const { id } = params; + const { groupId: id } = params; const backend = useBackend(); const dispatch = useAppDispatch(); diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 142db1047..c315591ac 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -140,6 +140,12 @@ import { WrappedRoute } from './util/react-router-helpers'; import 'soapbox/components/status'; const GroupTimelineSlug = withHoc(GroupTimeline as any, GroupLookupHoc); +const GroupMembersSlug = withHoc(GroupMembers as any, GroupLookupHoc); +const GroupGallerySlug = withHoc(GroupGallery as any, GroupLookupHoc); +const ManageGroupSlug = withHoc(ManageGroup as any, GroupLookupHoc); +const EditGroupSlug = withHoc(EditGroup as any, GroupLookupHoc); +const GroupBlockedMembersSlug = withHoc(GroupBlockedMembers as any, GroupLookupHoc); +const GroupMembershipRequestsSlug = withHoc(GroupMembershipRequests as any, GroupLookupHoc); const EmptyPage = HomePage; @@ -301,15 +307,23 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.groupsDiscovery && } {features.groupsDiscovery && } {features.groupsPending && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } + {features.groups && } diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx index 449e250f3..61e41ad25 100644 --- a/app/soapbox/pages/group-page.tsx +++ b/app/soapbox/pages/group-page.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useRouteMatch } from 'react-router-dom'; +import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc'; import { Column, Icon, Layout, Stack, Text } from 'soapbox/components/ui'; import GroupHeader from 'soapbox/features/group/components/group-header'; import LinkFooter from 'soapbox/features/ui/components/link-footer'; @@ -27,7 +28,7 @@ const messages = defineMessages({ interface IGroupPage { params?: { - id?: string + groupId?: string } children: React.ReactNode } @@ -64,7 +65,7 @@ const GroupPage: React.FC = ({ params, children }) => { const match = useRouteMatch(); const me = useOwnAccount(); - const id = params?.id || ''; + const id = params?.groupId || ''; const { group } = useGroup(id); const { accounts: pending } = useGroupMembershipRequests(id); @@ -76,19 +77,19 @@ const GroupPage: React.FC = ({ params, children }) => { const items = [ { text: intl.formatMessage(messages.all), - to: `/groups/${group?.id}`, - name: '/groups/:id', + to: group?.slug ? `/group/${group.slug}` : `/groups/${group?.id}`, + name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId', }, { text: intl.formatMessage(messages.members), - to: `/groups/${group?.id}/members`, - name: '/groups/:id/members', + to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`, + name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members', count: pending.length, }, { text: intl.formatMessage(messages.media), - to: `/groups/${group?.id}/media`, - name: '/groups/:id/media', + to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`, + name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media', }, ]; @@ -141,4 +142,4 @@ const GroupPage: React.FC = ({ params, children }) => { ); }; -export default GroupPage; +export default GroupLookupHoc(GroupPage as any) as any;