Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

use wordpress/components tabs

Browse Source 
[MAILPOET-5088]
This commit is contained in:
David Remer
2023-06-06 14:54:42 +03:00
committed by Aschepikov
parent 2cc0a16956
commit a7637c82ca
2 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

8
mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx
View File

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