107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
|
|
|
import { useMutes, useGroupMutes } from 'soapbox/api/hooks';
|
|
import ScrollableList from 'soapbox/components/scrollable-list';
|
|
import { Column, Stack, Tabs } from 'soapbox/components/ui';
|
|
import AccountContainer from 'soapbox/containers/account-container';
|
|
import { useFeatures } from 'soapbox/hooks';
|
|
|
|
import GroupListItem from './components/group-list-item';
|
|
|
|
const messages = defineMessages({
|
|
heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
|
|
});
|
|
|
|
enum TabItems {
|
|
ACCOUNTS = 'ACCOUNTS',
|
|
GROUPS = 'GROUPS'
|
|
}
|
|
|
|
const Mutes: React.FC = () => {
|
|
const intl = useIntl();
|
|
const features = useFeatures();
|
|
|
|
const {
|
|
accounts,
|
|
hasNextPage: hasNextAccountsPage,
|
|
fetchNextPage: fetchNextAccounts,
|
|
isLoading: isLoadingAccounts,
|
|
} = useMutes();
|
|
|
|
const {
|
|
mutes: groupMutes,
|
|
isLoading: isLoadingGroups,
|
|
hasNextPage: hasNextGroupsPage,
|
|
fetchNextPage: fetchNextGroups,
|
|
fetchEntities: fetchMutedGroups,
|
|
} = useGroupMutes();
|
|
|
|
const [activeItem, setActiveItem] = useState<TabItems>(TabItems.ACCOUNTS);
|
|
const isAccountsTabSelected = activeItem === TabItems.ACCOUNTS;
|
|
|
|
const scrollableListProps = {
|
|
itemClassName: 'pb-4 last:pb-0',
|
|
scrollKey: 'mutes',
|
|
emptyMessageCard: false,
|
|
};
|
|
|
|
return (
|
|
<Column label={intl.formatMessage(messages.heading)}>
|
|
<Stack space={4}>
|
|
{features.groupsMuting && (
|
|
<Tabs
|
|
items={[
|
|
{
|
|
text: 'Users',
|
|
action: () => setActiveItem(TabItems.ACCOUNTS),
|
|
name: TabItems.ACCOUNTS,
|
|
},
|
|
{
|
|
text: 'Groups',
|
|
action: () => setActiveItem(TabItems.GROUPS),
|
|
name: TabItems.GROUPS,
|
|
},
|
|
]}
|
|
activeItem={activeItem}
|
|
/>
|
|
)}
|
|
|
|
{isAccountsTabSelected ? (
|
|
<ScrollableList
|
|
{...scrollableListProps}
|
|
isLoading={isLoadingAccounts}
|
|
onLoadMore={fetchNextAccounts}
|
|
hasMore={hasNextAccountsPage}
|
|
emptyMessage={
|
|
<FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />
|
|
}
|
|
>
|
|
{accounts.map((accounts) =>
|
|
<AccountContainer key={accounts.id} id={accounts.id} actionType='muting' />,
|
|
)}
|
|
</ScrollableList>
|
|
) : (
|
|
<ScrollableList
|
|
{...scrollableListProps}
|
|
isLoading={isLoadingGroups}
|
|
onLoadMore={fetchNextGroups}
|
|
hasMore={hasNextGroupsPage}
|
|
emptyMessage={
|
|
<FormattedMessage id='mutes.empty.groups' defaultMessage="You haven't muted any groups yet." />
|
|
}
|
|
>
|
|
{groupMutes.map((group) =>(
|
|
<GroupListItem
|
|
group={group}
|
|
onUnmute={fetchMutedGroups}
|
|
/>
|
|
))}
|
|
</ScrollableList>
|
|
)}
|
|
</Stack>
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default Mutes;
|