diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx index 183d74369..4bd13ecab 100644 --- a/app/soapbox/components/ui/tabs/tabs.tsx +++ b/app/soapbox/components/ui/tabs/tabs.tsx @@ -95,6 +95,7 @@ type Item = { href?: string, to?: string, action?: () => void, + count?: number, name: string } interface ITabs { @@ -118,7 +119,7 @@ const Tabs = ({ items, activeItem }: ITabs) => { }; const renderItem = (item: Item, idx: number) => { - const { name, text, title } = item; + const { name, text, title, count } = item; return ( { title={title} index={idx} > - {text} +
+ {count ? ( + + {count} + + ) : null} + + {text} +
); }; diff --git a/app/soapbox/features/admin/components/admin-tabs.tsx b/app/soapbox/features/admin/components/admin-tabs.tsx index e51d48a41..89bd229e8 100644 --- a/app/soapbox/features/admin/components/admin-tabs.tsx +++ b/app/soapbox/features/admin/components/admin-tabs.tsx @@ -3,6 +3,7 @@ import { useIntl, defineMessages } from 'react-intl'; import { useHistory } from 'react-router-dom'; import { Tabs } from 'soapbox/components/ui'; +import { useAppSelector } from 'soapbox/hooks'; const messages = defineMessages({ dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' }, @@ -18,6 +19,9 @@ const AdminTabs: React.FC = ({ activeItem }) => { const intl = useIntl(); const history = useHistory(); + const approvalCount = useAppSelector(state => state.admin.awaitingApproval.count()); + const reportsCount = useAppSelector(state => state.admin.openReports.count()); + const tabs = [{ name: 'dashboard', text: intl.formatMessage(messages.dashboard), @@ -26,10 +30,12 @@ const AdminTabs: React.FC = ({ activeItem }) => { name: 'reports', text: intl.formatMessage(messages.reports), action: () => history.push('/admin/reports'), + count: reportsCount, }, { name: 'approval', text: intl.formatMessage(messages.waitlist), action: () => history.push('/admin/approval'), + count: approvalCount, }]; return ;