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

Merge branch 'group-improvements' into 'develop' 

Group improvements

See merge request soapbox-pub/soapbox!2525
This commit is contained in:
Chewbacca 2023-05-30 13:12:21 +00:00
parent 4a29fcce02 c8ff9db879
commit 02479efc35
5 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/soapbox/features/group/components/group-member-count.tsx
View File

@ -1,5 +1,6 @@
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 { Text } from 'soapbox/components/ui'; import { Text } from 'soapbox/components/ui';
import { Group } from 'soapbox/types/entities'; import { Group } from 'soapbox/types/entities';
@ -11,17 +12,19 @@ interface IGroupMemberCount {
const GroupMemberCount = ({ group }: IGroupMemberCount) => { const GroupMemberCount = ({ group }: IGroupMemberCount) => {
return ( return (
<Text theme='inherit' tag='span' size='sm' weight='medium' data-testid='group-member-count'> <Link to={`/group/${group.slug}/members`} className='hover:underline'>
{shortNumberFormat(group.members_count)} <Text theme='inherit' tag='span' size='sm' weight='medium' data-testid='group-member-count'>
{' '} {shortNumberFormat(group.members_count)}
<FormattedMessage {' '}
id='groups.discover.search.results.member_count' <FormattedMessage
defaultMessage='{members, plural, one {member} other {members}}' id='groups.discover.search.results.member_count'
values={{ defaultMessage='{members, plural, one {member} other {members}}'
members: group.members_count, values={{
}} members: group.members_count,
/> }}
</Text> />
</Text>
</Link>
); );
}; };

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

@ -22,17 +22,18 @@ const GroupListItem = (props: IGroup) => {
justifyContent='between' justifyContent='between'
data-testid='group-list-item' data-testid='group-list-item'
> >
<Link key={group.id} to={`/group/${group.slug}`}> <Link key={group.id} to={`/group/${group.slug}`} className='overflow-hidden'>
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<GroupAvatar <GroupAvatar
group={group} group={group}
size={44} size={44}
/> />
<Stack> <Stack className='overflow-hidden'>
<Text <Text
weight='bold' weight='bold'
dangerouslySetInnerHTML={{ __html: group.display_name_html }} dangerouslySetInnerHTML={{ __html: group.display_name_html }}
truncate
/> />
<HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'> <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>

8
app/soapbox/features/placeholder/components/placeholder-group-search.tsx
View File

@ -4,7 +4,7 @@ import { HStack, Stack, Text } from 'soapbox/components/ui';
import { generateText, randomIntFromInterval } from '../utils'; import { generateText, randomIntFromInterval } from '../utils';
export default () => { export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
const groupNameLength = randomIntFromInterval(12, 20); const groupNameLength = randomIntFromInterval(12, 20);
return ( return (
@ -13,7 +13,7 @@ export default () => {
justifyContent='between' justifyContent='between'
className='animate-pulse' className='animate-pulse'
> >
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2} className='overflow-hidden'>
{/* Group Avatar */} {/* Group Avatar */}
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' /> <div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
@ -37,7 +37,9 @@ export default () => {
</HStack> </HStack>
{/* Join Group Button */} {/* Join Group Button */}
<div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' /> {withJoinAction && (
<div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' />
)}
</HStack> </HStack>
); );
}; };

2
app/soapbox/features/ui/components/panels/my-groups-panel.tsx
View File

@ -19,7 +19,7 @@ const MyGroupsPanel = () => {
> >
{isFetching ? ( {isFetching ? (
new Array(3).fill(0).map((_, idx) => ( new Array(3).fill(0).map((_, idx) => (
<PlaceholderGroupSearch key={idx} /> <PlaceholderGroupSearch key={idx} withJoinAction={false} />
)) ))
) : ( ) : (
groups.slice(0, 3).map((group) => ( groups.slice(0, 3).map((group) => (

2
app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx
View File

@ -19,7 +19,7 @@ const SuggestedGroupsPanel = () => {
> >
{isFetching ? ( {isFetching ? (
new Array(3).fill(0).map((_, idx) => ( new Array(3).fill(0).map((_, idx) => (
<PlaceholderGroupSearch key={idx} /> <PlaceholderGroupSearch key={idx} withJoinAction={false} />
)) ))
) : ( ) : (
groups.slice(0, 3).map((group) => ( groups.slice(0, 3).map((group) => (