|
|
|
@ -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>
|
|
|
|
|
</Stack>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const Groups: React.FC = () => {
|
|
|
|
|
const dispatch = useAppDispatch();
|
|
|
|
|
const features = useFeatures();
|
|
|
|
|
|
|
|
|
|
const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
|
|
|
|
|
|
|
|
|
|
const { groups, isLoading } = useGroups();
|
|
|
|
|
{canCreateGroup && (
|
|
|
|
|
<Button
|
|
|
|
|
className='self-center'
|
|
|
|
|
onClick={createGroup}
|
|
|
|
|
theme='secondary'
|
|
|
|
|
>
|
|
|
|
|
<FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
|
|
|
|
|
</Button>
|
|
|
|
|
)}
|
|
|
|
|
</Stack>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
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}
|
|
|
|
|