moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-use GroupActionButton component

This commit is contained in:
Chewbacca 2023-03-28 11:52:25 -04:00
parent 9fe2d4f92c
commit a916056367
2 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);
});

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

@ -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>
);