kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'my-groups-blankslate' into 'develop'
Update blankslate to allow Group Creation See merge request soapbox-pub/soapbox!2326environments/review-develop-3zknud/deployments/2828
commit
879ac883aa
|
@ -52,6 +52,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
|
||||||
alwaysPrepend?: boolean
|
alwaysPrepend?: boolean
|
||||||
/** Message to display when the list is loaded but empty. */
|
/** Message to display when the list is loaded but empty. */
|
||||||
emptyMessage?: React.ReactNode
|
emptyMessage?: React.ReactNode
|
||||||
|
/** Should the empty message be displayed in a Card */
|
||||||
|
emptyMessageCard?: boolean
|
||||||
/** Scrollable content. */
|
/** Scrollable content. */
|
||||||
children: Iterable<React.ReactNode>
|
children: Iterable<React.ReactNode>
|
||||||
/** Callback when the list is scrolled to the top. */
|
/** Callback when the list is scrolled to the top. */
|
||||||
|
@ -87,6 +89,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
|
||||||
children,
|
children,
|
||||||
isLoading,
|
isLoading,
|
||||||
emptyMessage,
|
emptyMessage,
|
||||||
|
emptyMessageCard = true,
|
||||||
showLoading,
|
showLoading,
|
||||||
onRefresh,
|
onRefresh,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
@ -158,13 +161,17 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
|
||||||
<div className='mt-2'>
|
<div className='mt-2'>
|
||||||
{alwaysPrepend && prepend}
|
{alwaysPrepend && prepend}
|
||||||
|
|
||||||
<Card variant='rounded' size='lg'>
|
{isLoading ? (
|
||||||
{isLoading ? (
|
<Spinner />
|
||||||
<Spinner />
|
) : (
|
||||||
) : (
|
<>
|
||||||
emptyMessage
|
{emptyMessageCard ? (
|
||||||
)}
|
<Card variant='rounded' size='lg'>
|
||||||
</Card>
|
{emptyMessage}
|
||||||
|
</Card>
|
||||||
|
) : emptyMessage}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -15,26 +15,6 @@ import TabBar, { TabItems } from './components/tab-bar';
|
||||||
|
|
||||||
import type { Group as GroupEntity } from 'soapbox/types/entities';
|
import type { Group as GroupEntity } from 'soapbox/types/entities';
|
||||||
|
|
||||||
const EmptyMessage = () => (
|
|
||||||
<Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
|
|
||||||
<Stack space={2} className='max-w-sm'>
|
|
||||||
<Text size='2xl' weight='bold' tag='h2' align='center'>
|
|
||||||
<FormattedMessage
|
|
||||||
id='groups.empty.title'
|
|
||||||
defaultMessage='No Groups yet'
|
|
||||||
/>
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Text size='sm' theme='muted' align='center'>
|
|
||||||
<FormattedMessage
|
|
||||||
id='groups.empty.subtitle'
|
|
||||||
defaultMessage='Start discovering groups to join or create your own.'
|
|
||||||
/>
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
|
|
||||||
const Groups: React.FC = () => {
|
const Groups: React.FC = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const features = useFeatures();
|
const features = useFeatures();
|
||||||
|
@ -47,6 +27,37 @@ const Groups: React.FC = () => {
|
||||||
dispatch(openModal('MANAGE_GROUP'));
|
dispatch(openModal('MANAGE_GROUP'));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const renderBlankslate = () => (
|
||||||
|
<Stack space={4} alignItems='center' justifyContent='center' className='py-6'>
|
||||||
|
<Stack space={2} className='max-w-sm'>
|
||||||
|
<Text size='2xl' weight='bold' tag='h2' align='center'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='groups.empty.title'
|
||||||
|
defaultMessage='No Groups yet'
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Text size='sm' theme='muted' align='center'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='groups.empty.subtitle'
|
||||||
|
defaultMessage='Start discovering groups to join or create your own.'
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
{canCreateGroup && (
|
||||||
|
<Button
|
||||||
|
className='self-center'
|
||||||
|
onClick={createGroup}
|
||||||
|
theme='secondary'
|
||||||
|
>
|
||||||
|
<FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack space={4}>
|
<Stack space={4}>
|
||||||
{canCreateGroup && (
|
{canCreateGroup && (
|
||||||
|
@ -67,7 +78,8 @@ const Groups: React.FC = () => {
|
||||||
|
|
||||||
<ScrollableList
|
<ScrollableList
|
||||||
scrollKey='groups'
|
scrollKey='groups'
|
||||||
emptyMessage={<EmptyMessage />}
|
emptyMessage={renderBlankslate()}
|
||||||
|
emptyMessageCard={false}
|
||||||
itemClassName='py-3 first:pt-0 last:pb-0'
|
itemClassName='py-3 first:pt-0 last:pb-0'
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
showLoading={isLoading && groups.length === 0}
|
showLoading={isLoading && groups.length === 0}
|
||||||
|
|
Ładowanie…
Reference in New Issue