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

Merge branch 'update-group-comps' into 'develop'

Browse source 
Update Group component with Join buttons

See merge request soapbox-pub/soapbox!2330
This commit is contained in:
Chewbacca 2023-03-14 14:13:46 +00:00
commit e173418041
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 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' />

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

@ -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' />}