Make components use groupId param

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<IGroupLookup> = (props) => {
     const { entity: group } = useGroupLookup(props.params.groupSlug);
+
     if (!group) return (
-      <Spinner />
+      <ColumnLoading />
     );
 
     const newProps = {
@@ -31,7 +38,17 @@ function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: stri
     );
   };
 
-  return GroupLookup;
+  const MaybeGroupLookup: React.FC<IMaybeGroupLookup> = (props) => {
+    const { params } = props;
+
+    if (params?.groupId) {
+      return <Component {...props} params={{ ...params, groupId: params.groupId }} />;
+    } else {
+      return <GroupLookup {...props} params={{ ...params, groupSlug: params?.groupSlug || '' }} />;
+    }
+  };
+
+  return MaybeGroupLookup;
 }
 
 export default GroupLookupHoc;

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<IEditGroup> = ({ params: { id: groupId } }) => {
+const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
   const intl = useIntl();
   const instance = useInstance();
 

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<IGroupBlockedMembers> = ({ 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);

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);
 

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<IGroupMembers> = (props) => {
-  const groupId = props.params.id;
+  const { groupId } = props.params;
 
   const features = useFeatures();
 

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<IGroupMembershipRequests> = ({ params }) => {
-  const id = params?.id;
+  const id = params?.groupId;
   const intl = useIntl();
 
   const { group } = useGroup(id);

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<IGroupTimeline> = (props) => {
   const account = useOwnAccount();
   const dispatch = useAppDispatch();
 
-  const groupId = props.params.id;
+  const { groupId } = props.params;
 
   const { group } = useGroup(groupId);
 

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<IManageGroup> = ({ params }) => {
-  const { id } = params;
+  const { groupId: id } = params;
 
   const backend = useBackend();
   const dispatch = useAppDispatch();

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<ISwitchingColumnsArea> = ({ children }) =>
       {features.groupsDiscovery && <WrappedRoute path='/groups/popular' exact page={GroupsPendingPage} component={GroupsPopular} content={children} />}
       {features.groupsDiscovery && <WrappedRoute path='/groups/suggested' exact page={GroupsPendingPage} component={GroupsSuggested} content={children} />}
       {features.groupsPending && <WrappedRoute path='/groups/pending-requests' exact page={GroupsPendingPage} component={PendingGroupRequests} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id' exact page={GroupPage} component={GroupTimeline} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId' exact page={GroupPage} component={GroupTimeline} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/members' exact page={GroupPage} component={GroupMembers} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/members' exact page={GroupPage} component={GroupMembers} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/media' publicRoute={!authenticatedProfile} component={GroupGallery} page={GroupPage} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/media' publicRoute={!authenticatedProfile} component={GroupGallery} page={GroupPage} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage' exact page={ManageGroupsPage} component={ManageGroup} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/manage' exact page={ManageGroupsPage} component={ManageGroup} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/edit' exact page={ManageGroupsPage} component={EditGroup} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/manage/edit' exact page={ManageGroupsPage} component={EditGroup} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/blocks' exact page={ManageGroupsPage} component={GroupBlockedMembers} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/manage/blocks' exact page={ManageGroupsPage} component={GroupBlockedMembers} content={children} />}
-      {features.groups && <WrappedRoute path='/groups/:id/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequests} content={children} />}
+      {features.groups && <WrappedRoute path='/groups/:groupId/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequests} content={children} />}
       {features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
+
       {features.groups && <WrappedRoute path='/group/:groupSlug' exact page={GroupPage} component={GroupTimelineSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/members' exact page={GroupPage} component={GroupMembersSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/media' publicRoute={!authenticatedProfile} component={GroupGallerySlug} page={GroupPage} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/manage' exact page={ManageGroupsPage} component={ManageGroupSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/manage/edit' exact page={ManageGroupsPage} component={EditGroupSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/manage/blocks' exact page={ManageGroupsPage} component={GroupBlockedMembersSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequestsSlug} content={children} />}
+      {features.groups && <WrappedRoute path='/group/:groupSlug/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
 
       <WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
       <WrappedRoute path='/statuses/:statusId' exact page={StatusPage} component={Status} content={children} />

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<IGroupPage> = ({ 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<IGroupPage> = ({ params, children }) => {
   const items = [
     {
       text: intl.formatMessage(messages.all),
-      to: `/groups/${group?.id}`,
+      to: group?.slug ? `/group/${group.slug}` : `/groups/${group?.id}`,
-      name: '/groups/:id',
+      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId',
     },
     {
       text: intl.formatMessage(messages.members),
-      to: `/groups/${group?.id}/members`,
+      to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`,
-      name: '/groups/:id/members',
+      name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members',
       count: pending.length,
     },
     {
       text: intl.formatMessage(messages.media),
-      to: `/groups/${group?.id}/media`,
+      to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`,
-      name: '/groups/:id/media',
+      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media',
     },
   ];
 
@@ -141,4 +142,4 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
   );
 };
 
-export default GroupPage;
+export default GroupLookupHoc(GroupPage as any) as any;