From f2d5b2eaefafcf58eb6ace34c61edc5b6ec0d2a4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 Apr 2023 15:42:08 -0400
Subject: [PATCH] Update group URLs to use slugs

---
 .../components/groups/popover/group-popover.tsx      |  2 +-
 app/soapbox/components/status.tsx                    |  2 +-
 .../group/components/group-action-button.tsx         |  2 +-
 app/soapbox/features/group/group-blocked-members.tsx |  2 +-
 app/soapbox/features/group/group-members.tsx         |  5 ++++-
 app/soapbox/features/group/manage-group.tsx          |  8 ++++----
 .../groups/components/discover/group-grid-item.tsx   |  2 +-
 .../groups/components/discover/group-list-item.tsx   |  2 +-
 app/soapbox/features/groups/index.tsx                |  2 +-
 app/soapbox/features/groups/pending-requests.tsx     |  2 +-
 app/soapbox/features/status/index.tsx                |  7 +++++--
 app/soapbox/pages/group-page.tsx                     | 12 ++++++------
 12 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/soapbox/components/groups/popover/group-popover.tsx b/app/soapbox/components/groups/popover/group-popover.tsx
index 752deeb8af..ba2457fb30 100644
--- a/app/soapbox/components/groups/popover/group-popover.tsx
+++ b/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>
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 752e73636b..24131159dd 100644
--- a/app/soapbox/components/status.tsx
+++ b/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'>
diff --git a/app/soapbox/features/group/components/group-action-button.tsx b/app/soapbox/features/group/components/group-action-button.tsx
index 96f807f9dc..96653f97e0 100644
--- a/app/soapbox/features/group/components/group-action-button.tsx
+++ b/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>
diff --git a/app/soapbox/features/group/group-blocked-members.tsx b/app/soapbox/features/group/group-blocked-members.tsx
index 94b0338374..988b90b1be 100644
--- a/app/soapbox/features/group/group-blocked-members.tsx
+++ b/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}
diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index fc04e3d29b..36ccd05b72 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/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>
         )}
       >
diff --git a/app/soapbox/features/group/manage-group.tsx b/app/soapbox/features/group/manage-group.tsx
index 38b90e34b3..dd3efe9cde 100644
--- a/app/soapbox/features/group/manage-group.tsx
+++ b/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 navigateToPending = () => history.push(`/groups/${id}/manage/requests`);
-  const navigateToBlocks = () => history.push(`/groups/${id}/manage/blocks`);
+  const navigateToEdit = () => history.push(`/group/${group.slug}/manage/edit`);
+  const navigateToPending = () => history.push(`/group/${group.slug}/manage/requests`);
+  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 && (
           <>
diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx
index 17d53225ed..fd1168f4ed 100644
--- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx
+++ b/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}
diff --git a/app/soapbox/features/groups/components/discover/group-list-item.tsx b/app/soapbox/features/groups/components/discover/group-list-item.tsx
index cb492503f8..9747eb8b75 100644
--- a/app/soapbox/features/groups/components/discover/group-list-item.tsx
+++ b/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}
diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx
index 2f6436cd50..0407ff8e06 100644
--- a/app/soapbox/features/groups/index.tsx
+++ b/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>
         ))}
diff --git a/app/soapbox/features/groups/pending-requests.tsx b/app/soapbox/features/groups/pending-requests.tsx
index cc9ceed1d4..1233ff3a7d 100644
--- a/app/soapbox/features/groups/pending-requests.tsx
+++ b/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>
         ))}
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 818d837209..aaae4b9c7f 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/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) {
-    return <Redirect to={`/groups/${status.group.id}/posts/${props.params.statusId}`} />;
+  if (status.group && typeof status.group === 'object') {
+    if (status.group.slug && !props.params.groupSlug) {
+      return <Redirect to={`/group/${status.group.slug}/posts/${props.params.statusId}`} />;
+    }
   }
 
   const titleMessage = () => {
diff --git a/app/soapbox/pages/group-page.tsx b/app/soapbox/pages/group-page.tsx
index 61e41ad25b..13dda54679 100644
--- a/app/soapbox/pages/group-page.tsx
+++ b/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}`,
-      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId',
+      to: `/group/${group?.slug}`,
+      name: '/group/:groupSlug',
     },
     {
       text: intl.formatMessage(messages.members),
-      to: group?.slug ? `/group/${group.slug}/members` : `/groups/${group?.id}/members`,
-      name: group?.slug ? '/group/:groupSlug/members' : '/groups/:groupId/members',
+      to: `/group/${group?.slug}/members`,
+      name: '/group/:groupSlug/members',
       count: pending.length,
     },
     {
       text: intl.formatMessage(messages.media),
-      to: group?.slug ? `/group/${group.slug}/media` : `/groups/${group?.id}/media`,
-      name: group?.slug ? '/group/:groupSlug' : '/groups/:groupId/media',
+      to: `/group/${group?.slug}/media`,
+      name: '/group/:groupSlug',
     },
   ];