Merge branch 'my-groups-blankslate' into 'develop'

Update blankslate to allow Group Creation

See merge request soapbox-pub/soapbox!2326
environments/review-develop-3zknud/deployments/2828
Chewbacca 2023-03-13 19:10:14 +00:00
commit 879ac883aa
2 zmienionych plików z 47 dodań i 28 usunięć

Wyświetl plik

@ -52,6 +52,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
alwaysPrepend?: boolean
/** Message to display when the list is loaded but empty. */
emptyMessage?: React.ReactNode
/** Should the empty message be displayed in a Card */
emptyMessageCard?: boolean
/** Scrollable content. */
children: Iterable<React.ReactNode>
/** Callback when the list is scrolled to the top. */
@ -87,6 +89,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
children,
isLoading,
emptyMessage,
emptyMessageCard = true,
showLoading,
onRefresh,
onScroll,
@ -158,13 +161,17 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
<div className='mt-2'>
{alwaysPrepend && prepend}
<Card variant='rounded' size='lg'>
{isLoading ? (
<Spinner />
) : (
emptyMessage
)}
<>
{emptyMessageCard ? (
<Card variant='rounded' size='lg'>
{emptyMessage}
</Card>
) : emptyMessage}
</>
)}
</div>
);
};

Wyświetl plik

@ -15,8 +15,20 @@ import TabBar, { TabItems } from './components/tab-bar';
import type { Group as GroupEntity } from 'soapbox/types/entities';
const EmptyMessage = () => (
<Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
const Groups: React.FC = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
const { groups, isLoading } = useGroups();
const createGroup = () => {
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
@ -32,20 +44,19 @@ const EmptyMessage = () => (
/>
</Text>
</Stack>
{canCreateGroup && (
<Button
className='self-center'
onClick={createGroup}
theme='secondary'
>
<FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
</Button>
)}
</Stack>
);
const Groups: React.FC = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
const { groups, isLoading } = useGroups();
const createGroup = () => {
dispatch(openModal('MANAGE_GROUP'));
};
return (
<Stack space={4}>
@ -67,7 +78,8 @@ const Groups: React.FC = () => {
<ScrollableList
scrollKey='groups'
emptyMessage={<EmptyMessage />}
emptyMessage={renderBlankslate()}
emptyMessageCard={false}
itemClassName='py-3 first:pt-0 last:pb-0'
isLoading={isLoading}
showLoading={isLoading && groups.length === 0}