Update group URLs to use slugs

app/soapbox/components/groups/popover/group-popover.tsx

@@ -80,7 +80,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
           </Stack>
 
           <div className='px-4 pb-4'>
-            <Link to={`/groups/${group.id}`}>
+            <Link to={`/group/${group.slug}`}>
               <Button type='button' theme='secondary' block>
                 {intl.formatMessage(messages.action)}
               </Button>

app/soapbox/components/status.tsx

@@ -253,7 +253,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          to={`/groups/${group.id}`}
+          to={`/group/${group.slug}`}
           icon={<Icon src={require('@tabler/icons/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <Text size='xs' theme='muted' weight='medium'>

app/soapbox/features/group/components/group-action-button.tsx

@@ -82,7 +82,7 @@ const GroupActionButton = ({ group }: IGroupActionButton) => {
     return (
       <Button
         theme='secondary'
-        to={`/groups/${group.id}/manage`}
+        to={`/group/${group.slug}/manage`}
       >
         <FormattedMessage id='group.manage' defaultMessage='Manage Group' />
       </Button>

app/soapbox/features/group/group-blocked-members.tsx

@@ -86,7 +86,7 @@ const GroupBlockedMembers: React.FC<IGroupBlockedMembers> = ({ params }) => {
   const emptyMessage = <FormattedMessage id='empty_column.group_blocks' defaultMessage="The group hasn't banned any users yet." />;
 
   return (
-    <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${id}/manage`}>
+    <Column label={intl.formatMessage(messages.heading)} backHref={`/group/${group.slug}/manage`}>
       <ScrollableList
         scrollKey='group_blocks'
         emptyMessage={emptyMessage}

app/soapbox/features/group/group-members.tsx

@@ -58,7 +58,10 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
         itemClassName='py-3 last:pb-0'
         prepend={(pendingCount > 0) && (
           <div className={clsx('py-3', { 'border-b border-gray-200 dark:border-gray-800': members.length })}>
-            <PendingItemsRow to={`/groups/${groupId}/manage/requests`} count={pendingCount} />
+            <PendingItemsRow
+              to={`/group/${group?.slug}/manage/requests`}
+              count={pendingCount}
+            />
           </div>
         )}
       >

app/soapbox/features/group/manage-group.tsx

@@ -77,12 +77,12 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
       },
     }));
 
-  const navigateToEdit = () => history.push(`/groups/${id}/manage/edit`);
+  const navigateToEdit = () => history.push(`/group/${group.slug}/manage/edit`);
-  const navigateToPending = () => history.push(`/groups/${id}/manage/requests`);
+  const navigateToPending = () => history.push(`/group/${group.slug}/manage/requests`);
-  const navigateToBlocks = () => history.push(`/groups/${id}/manage/blocks`);
+  const navigateToBlocks = () => history.push(`/group/${group.slug}/manage/blocks`);
 
   return (
-    <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${id}`}>
+    <Column label={intl.formatMessage(messages.heading)} backHref={`/group/${group.slug}`}>
       <CardBody className='space-y-4'>
         {isOwner && (
           <>

app/soapbox/features/groups/components/discover/group-grid-item.tsx

@@ -25,7 +25,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
         width,
       }}
     >
-      <Link to={`/groups/${group.id}`}>
+      <Link to={`/group/${group.slug}`}>
         <Stack
           className='aspect-h-7 aspect-w-10 h-full w-full overflow-hidden rounded-lg'
           ref={ref}

app/soapbox/features/groups/components/discover/group-list-item.tsx

@@ -21,7 +21,7 @@ const GroupListItem = (props: IGroup) => {
       alignItems='center'
       justifyContent='between'
     >
-      <Link key={group.id} to={`/groups/${group.id}`}>
+      <Link key={group.id} to={`/group/${group.slug}`}>
         <HStack alignItems='center' space={2}>
           <GroupAvatar
             group={group}

app/soapbox/features/groups/index.tsx

@@ -106,7 +106,7 @@ const Groups: React.FC = () => {
         placeholderCount={3}
       >
         {groups.map((group) => (
-          <Link key={group.id} to={`/groups/${group.id}`}>
+          <Link key={group.id} to={`/group/${group.slug}`}>
             <GroupCard group={group} />
           </Link>
         ))}

app/soapbox/features/groups/pending-requests.tsx

@@ -57,7 +57,7 @@ export default () => {
         showLoading={isLoading && groups.length === 0}
       >
         {groups.map((group) => (
-          <Link key={group.id} to={`/groups/${group.id}`}>
+          <Link key={group.id} to={`/group/${group.slug}`}>
             <GroupCard group={group} />
           </Link>
         ))}

app/soapbox/features/status/index.tsx

@@ -119,6 +119,7 @@ type DisplayMedia = 'default' | 'hide_all' | 'show_all';
 type RouteParams = {
   statusId: string
   groupId?: string
+  groupSlug?: string
 };
 
 interface IThread {
@@ -517,8 +518,10 @@ const Thread: React.FC<IThread> = (props) => {
     children.push(...renderChildren(descendantsIds).toArray());
   }
 
-  if (status.group && typeof status.group === 'object' && !props.params.groupId) {
+  if (status.group && typeof status.group === 'object') {
-    return <Redirect to={`/groups/${status.group.id}/posts/${props.params.statusId}`} />;
+    if (status.group.slug && !props.params.groupSlug) {
+      return <Redirect to={`/group/${status.group.slug}/posts/${props.params.statusId}`} />;
+    }
   }
 
   const titleMessage = () => {

app/soapbox/pages/group-page.tsx

@@ -77,19 +77,19 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
   const items = [
     {
       text: intl.formatMessage(messages.all),
-      to: group?.slug ? `/group/${group.slug}` : `/groups/${group?.id}`,
+      to: `/group/${group?.slug}`,
-      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId',
+      name: '/group/:groupSlug',
     },
     {
       text: intl.formatMessage(messages.members),
-      to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`,
+      to: `/group/${group?.slug}/members`,
-      name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members',
+      name: '/group/:groupSlug/members',
       count: pending.length,
     },
     {
       text: intl.formatMessage(messages.media),
-      to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`,
+      to: `/group/${group?.slug}/media`,
-      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media',
+      name: '/group/:groupSlug',
     },
   ];