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,61 +15,66 @@ 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'
     >
-      <HStack alignItems='center' space={2}>
-        <Avatar
-          className='ring-2 ring-white dark:ring-primary-900'
-          src={group.avatar}
-          size={44}
-        />
-
-        <Stack>
-          <Text
-            weight='bold'
-            dangerouslySetInnerHTML={{ __html: group.display_name_html }}
+      <Link key={group.id} to={`/groups/${group.id}`}>
+        <HStack alignItems='center' space={2}>
+          <Avatar
+            className='ring-2 ring-white dark:ring-primary-900'
+            src={group.avatar}
+            size={44}
           />
 
-          <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
-            <Icon
-              className='h-4.5 w-4.5'
-              src={group.locked ? require('@tabler/icons/lock.svg') : require('@tabler/icons/world.svg')}
+          <Stack>
+            <Text
+              weight='bold'
+              dangerouslySetInnerHTML={{ __html: group.display_name_html }}
             />
 
-            <Text theme='inherit' tag='span' size='sm' weight='medium'>
-              {group.locked ? (
-                <FormattedMessage id='group.privacy.locked' defaultMessage='Private' />
-              ) : (
-                <FormattedMessage id='group.privacy.public' defaultMessage='Public' />
-              )}
-            </Text>
+            <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
+              <Icon
+                className='h-4.5 w-4.5'
+                src={group.locked ? require('@tabler/icons/lock.svg') : require('@tabler/icons/world.svg')}
+              />
 
-            {typeof group.members_count !== 'undefined' && (
-              <>
-                <span>&bull;</span>
-                <Text theme='inherit' tag='span' size='sm' weight='medium'>
-                  {shortNumberFormat(group.members_count)}
-                  {' '}
-                  <FormattedMessage
-                    id='groups.discover.search.results.member_count'
-                    defaultMessage='{members, plural, one {member} other {members}}'
-                    values={{
-                      members: group.members_count,
-                    }}
-                  />
-                </Text>
-              </>
-            )}
-          </HStack>
-        </Stack>
-      </HStack>
+              <Text theme='inherit' tag='span' size='sm' weight='medium'>
+                {group.locked ? (
+                  <FormattedMessage id='group.privacy.locked' defaultMessage='Private' />
+                ) : (
+                  <FormattedMessage id='group.privacy.public' defaultMessage='Public' />
+                )}
+              </Text>
+
+              {typeof group.members_count !== 'undefined' && (
+                <>
+                  <span>&bull;</span>
+                  <Text theme='inherit' tag='span' size='sm' weight='medium'>
+                    {shortNumberFormat(group.members_count)}
+                    {' '}
+                    <FormattedMessage
+                      id='groups.discover.search.results.member_count'
+                      defaultMessage='{members, plural, one {member} other {members}}'
+                      values={{
+                        members: group.members_count,
+                      }}
+                    />
+                  </Text>
+                </>
+              )}
+            </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' />}