From 5c821488dc6a4d90a1892419c55480b3edc1ab8b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 15:49:29 -0500
Subject: [PATCH] AdminTabs: get activeItem from match

---
 .../features/admin/components/admin-tabs.tsx     | 16 +++++++---------
 app/soapbox/features/admin/index.tsx             |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/admin/components/admin-tabs.tsx b/app/soapbox/features/admin/components/admin-tabs.tsx
index 5fc697463..4602cd0aa 100644
--- a/app/soapbox/features/admin/components/admin-tabs.tsx
+++ b/app/soapbox/features/admin/components/admin-tabs.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { useRouteMatch } from 'react-router-dom';
 
 import { Tabs } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
@@ -10,33 +11,30 @@ const messages = defineMessages({
   waitlist: { id: 'admin_nav.awaiting_approval', defaultMessage: 'Waitlist' },
 });
 
-interface IAdminTabs {
-  activeItem: 'dashboard' | 'reports' | 'approval',
-}
-
-const AdminTabs: React.FC<IAdminTabs> = ({ activeItem }) => {
+const AdminTabs: React.FC = () => {
   const intl = useIntl();
+  const match = useRouteMatch();
 
   const approvalCount = useAppSelector(state => state.admin.awaitingApproval.count());
   const reportsCount = useAppSelector(state => state.admin.openReports.count());
 
   const tabs = [{
-    name: 'dashboard',
+    name: '/admin',
     text: intl.formatMessage(messages.dashboard),
     to: '/admin',
   }, {
-    name: 'reports',
+    name: '/admin/reports',
     text: intl.formatMessage(messages.reports),
     to: '/admin/reports',
     count: reportsCount,
   }, {
-    name: 'approval',
+    name: '/admin/approval',
     text: intl.formatMessage(messages.waitlist),
     to: '/admin/approval',
     count: approvalCount,
   }];
 
-  return <Tabs items={tabs} activeItem={activeItem} />;
+  return <Tabs items={tabs} activeItem={match.path} />;
 };
 
 export default AdminTabs;
diff --git a/app/soapbox/features/admin/index.tsx b/app/soapbox/features/admin/index.tsx
index 13e4d0cad..92dc7077c 100644
--- a/app/soapbox/features/admin/index.tsx
+++ b/app/soapbox/features/admin/index.tsx
@@ -23,7 +23,7 @@ const Admin: React.FC = () => {
 
   return (
     <Column label={intl.formatMessage(messages.heading)} withHeader={false}>
-      <AdminTabs activeItem='dashboard' />
+      <AdminTabs />
 
       <Switch>
         <Route path='/admin' exact component={Dashboard} />