use wordpress/components tabs

[MAILPOET-5088]

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/index.tsx

@@ -1,6 +1,7 @@
+import { useCallback, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { TabPanel } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { RoutedTabs } from '../../../../../../common/tabs/routed_tabs';
-import { Tab } from '../../../../../../common';
 import { AutomationFlow } from './automation_flow';
 import { Emails } from './emails';
 import { Orders } from './orders';
@@ -8,54 +9,69 @@ import { Subscribers } from './subscribers';
 import { automationHasEmails } from '../../helpers/automation';
 
 export function Tabs(): JSX.Element {
+  const history = useHistory();
+  const location = useLocation();
+  const pageParams = useMemo(
+    () => new URLSearchParams(location.search),
+    [location],
+  );
+  const currentTab = pageParams.get('tab') ?? 'automation-flow';
   const tabs = [
-    <Tab
-      key="automation-flow"
-      route="automation-flow/(.*)?"
-      title={__('Automation flow', 'mailpoet')}
-      automationId="tab-automation-flow"
-    >
-      <AutomationFlow />
-    </Tab>,
+    {
+      name: 'automation-flow',
+      title: __('Automation flow', 'mailpoet'),
+    },
   ];
-
   if (automationHasEmails()) {
-    tabs.push(
-      <Tab
-        key="automation-emails"
-        route="automation-emails/(.*)?"
-        title={__('Emails', 'mailpoet')}
-        automationId="tab-automation-emails"
-      >
-        <Emails />
-      </Tab>,
-    );
-    tabs.push(
-      <Tab
-        key="automation-orders"
-        route="automation-orders/(.*)?"
-        title={_x('Orders', 'WooCommerce orders', 'mailpoet')}
-        automationId="tab-automation-orders"
-      >
-        <Orders />
-      </Tab>,
-    );
-    tabs.push(
-      <Tab
-        key="automation-subscribers"
-        route="automation-subscribers/(.*)?"
-        title={__('Subscribers', 'mailpoet')}
-        automationId="tab-automation-subscribers"
-      >
-        <Subscribers />
-      </Tab>,
-    );
+    tabs.push({
+      name: 'automation-emails',
+      title: __('Emails', 'mailpoet'),
+    });
+    tabs.push({
+      name: 'automation-orders',
+      title: _x('Orders', 'WooCommerce orders', 'mailpoet'),
+    });
+    tabs.push({
+      name: 'automation-subscribers',
+      title: __('Subscribers', 'mailpoet'),
+    });
   }
+
+  const updateUrlSearchString = useCallback(
+    (tab: string) => {
+      const newSearch = new URLSearchParams({
+        ...Object.fromEntries(pageParams.entries()),
+        ...{
+          tab,
+        },
+      });
+      history.push({ search: newSearch.toString() });
+    },
+    [pageParams, history],
+  );
+
   return (
     <div className="mailpoet-analytics-tabs">
-      <RoutedTabs activeKey="automation-flow" routerType="switch-only">
-        {tabs}
-      </RoutedTabs>
+      <TabPanel
+        onSelect={updateUrlSearchString}
+        initialTabName={currentTab}
+        tabs={tabs}
+      >
+        {(tab) => {
+          switch (tab.name) {
+            case 'automation-flow':
+              return <AutomationFlow />;
+            case 'automation-emails':
+              return <Emails />;
+            case 'automation-orders':
+              return <Orders />;
+            case 'automation-subscribers':
+              return <Subscribers />;
+            default:
+              return null;
+          }
+        }}
+      </TabPanel>
     </div>
   );
 }

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { TopBarWithBeamer } from '../../../../common/top_bar/top_bar';
 import { Notices } from '../../../listing/components/notices';
 import { Header } from './components/header';
@@ -14,18 +14,18 @@ function Analytics(): JSX.Element {
     <div className="mailpoet-automation-analytics">
       <Header />
       <Overview />
+      <Tabs />
     </div>
   );
 }
 
 function App(): JSX.Element {
   return (
-    <HashRouter>
+    <BrowserRouter>
       <TopBarWithBeamer />
       <Notices />
       <Analytics />
-      <Tabs />
-    </HashRouter>
+    </BrowserRouter>
   );
 }