miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Re-use GroupActionButton component

develop^2
Chewbacca 2023-03-28 11:52:25 -04:00
rodzic 9fe2d4f92c
commit a916056367
2 zmienionych plików z 9 dodań i 30 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

25
app/soapbox/features/groups/components/discover/group-grid-item.tsx
Wyświetl plik

@ -1,26 +1,22 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import GroupAvatar from 'soapbox/components/groups/group-avatar'; 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 GroupMemberCount from 'soapbox/features/group/components/group-member-count';
import GroupPrivacy from 'soapbox/features/group/components/group-privacy'; 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 { interface IGroup {
group: GroupEntity group: Group
width?: number width?: number
} }
const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDivElement>) => { const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDivElement>) => {
const { group, width = 'auto' } = props; const { group, width = 'auto' } = props;
const joinGroup = useJoinGroup(group);
const onJoinGroup = () => joinGroup.mutate(group);
return ( return (
<div <div
key={group.id} key={group.id}
@ -71,16 +67,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
</Stack> </Stack>
</Link> </Link>
<Button <GroupActionButton group={group} />
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>
</div> </div>
); );
}); });

14
app/soapbox/features/groups/components/discover/group-list-item.tsx
Wyświetl plik

@ -3,8 +3,8 @@ import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import GroupAvatar from 'soapbox/components/groups/group-avatar'; import GroupAvatar from 'soapbox/components/groups/group-avatar';
import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
import { useJoinGroup } from 'soapbox/hooks/api'; import GroupActionButton from 'soapbox/features/group/components/group-action-button';
import { Group as GroupEntity } from 'soapbox/types/entities'; import { Group as GroupEntity } from 'soapbox/types/entities';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import { shortNumberFormat } from 'soapbox/utils/numbers';
@ -16,10 +16,6 @@ interface IGroup {
const GroupListItem = (props: IGroup) => { const GroupListItem = (props: IGroup) => {
const { group, withJoinAction = true } = props; const { group, withJoinAction = true } = props;
const joinGroup = useJoinGroup(group);
const onJoinGroup = () => joinGroup.mutate(group);
return ( return (
<HStack <HStack
alignItems='center' alignItems='center'
@ -74,11 +70,7 @@ const GroupListItem = (props: IGroup) => {
</Link> </Link>
{withJoinAction && ( {withJoinAction && (
<Button theme='primary' onClick={onJoinGroup} disabled={joinGroup.isLoading}> <GroupActionButton group={group} />
{group.locked
? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
: <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}
</Button>
)} )}
</HStack> </HStack>
); );