Re-use GroupActionButton component

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

@@ -1,26 +1,22 @@
 import React, { forwardRef } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
-import { useJoinGroup } from 'soapbox/hooks/api';
-import { Group as GroupEntity } from 'soapbox/types/entities';
+
+import type { Group } from 'soapbox/schemas';
 
 interface IGroup {
-  group: GroupEntity
+  group: Group
   width?: number
 }
 
 const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDivElement>) => {
   const { group, width = 'auto' } = props;
 
-  const joinGroup = useJoinGroup(group);
-
-  const onJoinGroup = () => joinGroup.mutate(group);
-
   return (
     <div
       key={group.id}
@@ -71,16 +67,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
         </Stack>
       </Link>
 
-      <Button
-        theme='primary'
-        block
-        onClick={onJoinGroup}
-        disabled={joinGroup.isLoading}
-      >
-        {group.locked
-          ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
-          : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}
-      </Button>
+      <GroupActionButton group={group} />
     </div>
   );
 });

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

@@ -3,8 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useJoinGroup } from 'soapbox/hooks/api';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button';
 import { Group as GroupEntity } from 'soapbox/types/entities';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
@@ -16,10 +16,6 @@ interface IGroup {
 const GroupListItem = (props: IGroup) => {
   const { group, withJoinAction = true } = props;
 
-  const joinGroup = useJoinGroup(group);
-
-  const onJoinGroup = () => joinGroup.mutate(group);
-
   return (
     <HStack
       alignItems='center'
@@ -74,11 +70,7 @@ const GroupListItem = (props: IGroup) => {
       </Link>
 
       {withJoinAction && (
-        <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' />}
-        </Button>
+        <GroupActionButton group={group} />
       )}
     </HStack>
   );