Update Group component with Join buttons

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

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { Avatar, Button, HStack, Stack, Text } from 'soapbox/components/ui';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import { useJoinGroup } from 'soapbox/queries/groups';
 import { Group as GroupEntity } from 'soapbox/types/entities';
 
 interface IGroup {
@@ -15,6 +16,10 @@ interface IGroup {
 const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDivElement>) => {
   const { group, width = 'auto' } = props;
 
+  const joinGroup = useJoinGroup();
+
+  const onJoinGroup = () => joinGroup.mutate(group);
+
   return (
     <div
       key={group.id}
@@ -69,6 +74,8 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
       <Button
         theme='primary'
         block
+        onClick={onJoinGroup}
+        disabled={joinGroup.isLoading}
       >
         {group.locked
           ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { useJoinGroup } from 'soapbox/queries/groups';
 import { Group as GroupEntity } from 'soapbox/types/entities';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
@@ -13,12 +15,16 @@ interface IGroup {
 const GroupListItem = (props: IGroup) => {
   const { group, withJoinAction = true } = props;
 
+  const joinGroup = useJoinGroup();
+
+  const onJoinGroup = () => joinGroup.mutate(group);
+
   return (
     <HStack
-      key={group.id}
       alignItems='center'
       justifyContent='between'
     >
+      <Link key={group.id} to={`/groups/${group.id}`}>
         <HStack alignItems='center' space={2}>
           <Avatar
             className='ring-2 ring-white dark:ring-primary-900'
@@ -65,9 +71,10 @@ const GroupListItem = (props: IGroup) => {
             </HStack>
           </Stack>
         </HStack>
+      </Link>
 
       {withJoinAction && (
-        <Button theme='primary'>
+        <Button theme='primary' onClick={onJoinGroup} disabled={joinGroup.isLoading}>
           {group.locked
             ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
             : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}