41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useIntl, defineMessages } from 'react-intl';
|
|
import { useRouteMatch } from 'react-router-dom';
|
|
|
|
import Tabs from 'pl-fe/components/ui/tabs';
|
|
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
|
|
|
|
const messages = defineMessages({
|
|
dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
|
|
reports: { id: 'admin_nav.reports', defaultMessage: 'Reports' },
|
|
waitlist: { id: 'admin_nav.awaiting_approval', defaultMessage: 'Waitlist' },
|
|
});
|
|
|
|
const AdminTabs: React.FC = () => {
|
|
const intl = useIntl();
|
|
const match = useRouteMatch();
|
|
|
|
const approvalCount = useAppSelector(state => state.admin.awaitingApproval.length);
|
|
const reportsCount = useAppSelector(state => state.admin.openReports.length);
|
|
|
|
const tabs = [{
|
|
name: '/pl-fe/admin',
|
|
text: intl.formatMessage(messages.dashboard),
|
|
to: '/pl-fe/admin',
|
|
}, {
|
|
name: '/pl-fe/admin/reports',
|
|
text: intl.formatMessage(messages.reports),
|
|
to: '/pl-fe/admin/reports',
|
|
count: reportsCount,
|
|
}, {
|
|
name: '/pl-fe/admin/approval',
|
|
text: intl.formatMessage(messages.waitlist),
|
|
to: '/pl-fe/admin/approval',
|
|
count: approvalCount,
|
|
}];
|
|
|
|
return <Tabs items={tabs} activeItem={match.path} />;
|
|
};
|
|
|
|
export { AdminTabs as default };
|