Groups fixes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/api/hooks/groups/useGroupRelationships.ts

@@ -8,7 +8,7 @@ const useGroupRelationships = (listKey: string[], ids: string[]) => {
   const { isLoggedIn } = useLoggedIn();
 
   const fetchGroupRelationships = (ids: string[]) =>
-    api('/api/v1/groups/relationships', { params: { ids } });
+    api('/api/v1/groups/relationships', { params: { id: ids } });
 
   const { entityMap: relationships, ...result } = useBatchedEntities<GroupRelationship>(
     [Entities.RELATIONSHIPS, ...listKey],

src/components/groups/popover/group-popover.tsx

@@ -30,7 +30,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
 
   const path = history.location.pathname;
   const shouldHideAction = matchPath(path, {
-    path: ['/group/:groupId'],
+    path: ['/groups/:groupId'],
     exact: true,
   });
 
@@ -88,7 +88,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
 
           {!shouldHideAction && (
             <div className='px-4'>
-              <Link to={`/group/${group.id}`}>
+              <Link to={`/groups/${group.id}`}>
                 <Button type='button' theme='secondary' block>
                   {intl.formatMessage(messages.action)}
                 </Button>

src/components/status-action-bar.tsx

@@ -119,7 +119,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const intl = useIntl();
   const history = useHistory();
   const dispatch = useAppDispatch();
-  const match = useRouteMatch<{ groupId: string }>('/group/:groupId');
+  const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
 
   const { group } = useGroup((status.group as Group)?.id as string);
   const deleteGroupStatus = useDeleteGroupStatus(group as Group, status.id);

src/components/status.tsx

@@ -223,7 +223,7 @@ const Status: React.FC<IStatus> = (props) => {
                   </Link>
                 ),
                 group: (
-                  <Link to={`/group/${group.id}`} className='hover:underline'>
+                  <Link to={`/groups/${group.id}`} className='hover:underline'>
                     <strong
                       className='text-gray-800 dark:text-gray-200'
                       dangerouslySetInnerHTML={{
@@ -300,7 +300,7 @@ const Status: React.FC<IStatus> = (props) => {
               defaultMessage='Posted in {group}'
               values={{
                 group: (
-                  <Link to={`/group/${group.id}`} className='hover:underline'>
+                  <Link to={`/groups/${group.id}`} className='hover:underline'>
                     <bdi className='truncate'>
                       <strong className='text-gray-800 dark:text-gray-200'>
                         <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />

src/features/compose/components/reply-group-indicator.tsx

@@ -30,7 +30,7 @@ const ReplyGroupIndicator = (props: IReplyGroupIndicator) => {
         defaultMessage='Posting to {groupLink}'
         values={{
           groupLink: <Link
-            to={`/group/${group.id}`}
+            to={`/groups/${group.id}`}
             dangerouslySetInnerHTML={{ __html: group.display_name_html }}
           />,
         }}

src/features/group/components/group-action-button.tsx

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

src/features/group/components/group-header.tsx

@@ -143,7 +143,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         <Stack data-testid='group-meta' space={1} alignItems='center'>
           <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
             <GroupRelationship group={group} />
-            <GroupPrivacy group={group} />4
+            <GroupPrivacy group={group} />
             <GroupMemberCount group={group} />
           </HStack>
 

src/features/group/components/group-member-count.tsx

@@ -11,7 +11,7 @@ interface IGroupMemberCount {
 }
 
 const GroupMemberCount = ({ group }: IGroupMemberCount) => (
-  <Link to={`/group/${group.id}/members`} className='hover:underline'>
+  <Link to={`/groups/${group.id}/members`} className='hover:underline'>
     <Text theme='inherit' tag='span' size='sm' weight='medium' data-testid='group-member-count'>
       {shortNumberFormat(group.members_count)}
       {' '}

src/features/group/group-blocked-members.tsx

@@ -82,7 +82,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={`/group/${group.id}/manage`}>
+    <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${group.id}/manage`}>
       <ScrollableList
         scrollKey='group_blocks'
         emptyMessage={emptyMessage}

src/features/group/group-members.tsx

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

src/features/group/manage-group.tsx

@@ -74,7 +74,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
     }));
 
   return (
-    <Column label={intl.formatMessage(messages.heading)} backHref={`/group/${group.id}`}>
+    <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${group.id}`}>
       <CardBody className='space-y-4'>
         {isOwner && (
           <>
@@ -83,7 +83,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
             </CardHeader>
 
             <List>
-              <ListItem label={intl.formatMessage(messages.editGroup)} to={`/group/${group.id}/manage/edit`}>
+              <ListItem label={intl.formatMessage(messages.editGroup)} to={`/groups/${group.id}/manage/edit`}>
                 <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
               </ListItem>
             </List>
@@ -95,9 +95,9 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
         </CardHeader>
 
         <List>
-          <ListItem label={intl.formatMessage(messages.pendingRequests)} to={`/group/${group.id}/manage/requests`} />
+          <ListItem label={intl.formatMessage(messages.pendingRequests)} to={`/groups/${group.id}/manage/requests`} />
 
-          <ListItem label={intl.formatMessage(messages.blockedMembers)} to={`/group/${group.id}/manage/blocks`} />
+          <ListItem label={intl.formatMessage(messages.blockedMembers)} to={`/groups/${group.id}/manage/blocks`} />
         </List>
 
         {isOwner && (

src/features/groups/components/discover/group-list-item.tsx

@@ -22,7 +22,7 @@ const GroupListItem = (props: IGroupListItem) => {
       justifyContent='between'
       data-testid='group-list-item'
     >
-      <Link key={group.id} to={`/group/${group.id}`} className='overflow-hidden'>
+      <Link key={group.id} to={`/groups/${group.id}`} className='overflow-hidden'>
         <HStack alignItems='center' space={2}>
           <GroupAvatar
             group={group}

src/features/groups/index.tsx

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

src/features/status/components/detailed-status.tsx

@@ -64,7 +64,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
                 defaultMessage='Posted in {group}'
                 values={{
                   group: (
-                    <Link to={`/group/${status.group.id}`} className='hover:underline'>
+                    <Link to={`/groups/${status.group.id}`} className='hover:underline'>
                       <bdi className='truncate'>
                         <strong className='text-gray-800 dark:text-gray-200'>
                           <span dangerouslySetInnerHTML={{ __html: (status.group as Group).display_name_html }} />

src/features/status/index.tsx

@@ -88,7 +88,7 @@ const StatusDetails: React.FC<IStatusDetails> = (props) => {
 
   if (status.group && typeof status.group === 'object') {
     if (status.group.id && !props.params.groupId) {
-      return <Redirect to={`/group/${status.group.id}/posts/${props.params.statusId}`} />;
+      return <Redirect to={`/groups/${status.group.id}/posts/${props.params.statusId}`} />;
     }
   }
 

src/features/ui/components/compose-button.tsx

@@ -11,7 +11,7 @@ import { useAppDispatch } from 'soapbox/hooks';
 const ComposeButton = () => {
   const location = useLocation();
   const isOnGroupPage = location.pathname.startsWith('/group/');
-  const match = useRouteMatch<{ groupId: string }>('/group/:groupId');
+  const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
   const { group } = useGroup(match?.params.groupId || '');
   const isGroupMember = !!group?.relationship?.member;
 
@@ -40,7 +40,7 @@ const HomeComposeButton = () => {
 
 const GroupComposeButton = () => {
   const dispatch = useAppDispatch();
-  const match = useRouteMatch<{ groupId: string }>('/group/:groupId');
+  const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
   const { group } = useGroup(match?.params.groupId || '');
 
   if (!group) return null;

src/features/ui/components/floating-action-button.tsx

@@ -53,7 +53,7 @@ const GroupFAB: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const match = useRouteMatch<{ groupId: string }>('/group/:groupId');
+  const match = useRouteMatch<{ groupId: string }>('/groups/:groupId');
   const { group } = useGroup(match?.params.groupId || '');
 
   if (!group) return null;

src/pages/group-page.tsx

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