bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Group component with Join buttons

Browse source
This commit is contained in:
Chewbacca 2023-03-09 11:55:35 -05:00
parent 737c43d847
commit 58527b0656
2 changed files with 57 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; 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 { Group as GroupEntity } from 'soapbox/types/entities';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import { shortNumberFormat } from 'soapbox/utils/numbers';
@ -13,61 +15,66 @@ interface IGroup {
const GroupListItem = (props: IGroup) => { const GroupListItem = (props: IGroup) => {
const { group, withJoinAction = true } = props; const { group, withJoinAction = true } = props;
const joinGroup = useJoinGroup();
const onJoinGroup = () => joinGroup.mutate(group);
return ( return (
<HStack <HStack
key={group.id}
alignItems='center' alignItems='center'
justifyContent='between' justifyContent='between'
> >
<HStack alignItems='center' space={2}> <Link key={group.id} to={`/groups/${group.id}`}>
<Avatar <HStack alignItems='center' space={2}>
className='ring-2 ring-white dark:ring-primary-900' <Avatar
src={group.avatar} className='ring-2 ring-white dark:ring-primary-900'
size={44} src={group.avatar}
/> size={44}
<Stack>
<Text
weight='bold'
dangerouslySetInnerHTML={{ __html: group.display_name_html }}
/> />
<HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'> <Stack>
<Icon <Text
className='h-4.5 w-4.5' weight='bold'
src={group.locked ? require('@tabler/icons/lock.svg') : require('@tabler/icons/world.svg')} dangerouslySetInnerHTML={{ __html: group.display_name_html }}
/> />
<Text theme='inherit' tag='span' size='sm' weight='medium'> <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
{group.locked ? ( <Icon
<FormattedMessage id='group.privacy.locked' defaultMessage='Private' /> className='h-4.5 w-4.5'
) : ( src={group.locked ? require('@tabler/icons/lock.svg') : require('@tabler/icons/world.svg')}
<FormattedMessage id='group.privacy.public' defaultMessage='Public' /> />
)}
</Text>
{typeof group.members_count !== 'undefined' && ( <Text theme='inherit' tag='span' size='sm' weight='medium'>
<> {group.locked ? (
<span>&bull;</span> <FormattedMessage id='group.privacy.locked' defaultMessage='Private' />
<Text theme='inherit' tag='span' size='sm' weight='medium'> ) : (
{shortNumberFormat(group.members_count)} <FormattedMessage id='group.privacy.public' defaultMessage='Public' />
{' '} )}
<FormattedMessage </Text>
id='groups.discover.search.results.member_count'
defaultMessage='{members, plural, one {member} other {members}}' {typeof group.members_count !== 'undefined' && (
values={{ <>
members: group.members_count, <span>&bull;</span>
}} <Text theme='inherit' tag='span' size='sm' weight='medium'>
/> {shortNumberFormat(group.members_count)}
</Text> {' '}
</> <FormattedMessage
)} id='groups.discover.search.results.member_count'
</HStack> defaultMessage='{members, plural, one {member} other {members}}'
</Stack> values={{
</HStack> members: group.members_count,
}}
/>
</Text>
</>
)}
</HStack>
</Stack>
</HStack>
</Link>
{withJoinAction && ( {withJoinAction && (
<Button theme='primary'> <Button theme='primary' onClick={onJoinGroup} disabled={joinGroup.isLoading}>
{group.locked {group.locked
? <FormattedMessage id='group.join.private' defaultMessage='Request Access' /> ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
: <FormattedMessage id='group.join.public' defaultMessage='Join Group' />} : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}