46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useDispatch } from '@wordpress/data';
|
|
import { Link, useRouteMatch } from 'react-router-dom';
|
|
|
|
import { MailPoet } from 'mailpoet';
|
|
import { Background } from 'common/background/background';
|
|
import { Heading } from 'common/typography/heading/heading';
|
|
import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options';
|
|
import { Form } from './form';
|
|
|
|
import { storeName } from './store';
|
|
|
|
export function Editor(): JSX.Element {
|
|
const match = useRouteMatch<{ id: string }>();
|
|
|
|
const { pageLoaded, pageUnloaded } = useDispatch(storeName);
|
|
|
|
useEffect(() => {
|
|
void pageLoaded(match.params.id);
|
|
|
|
return () => {
|
|
void pageUnloaded();
|
|
};
|
|
}, [match.params.id, pageLoaded, pageUnloaded]);
|
|
|
|
return (
|
|
<>
|
|
<Background color="#fff" />
|
|
<HideScreenOptions />
|
|
|
|
<Heading level={1} className="mailpoet-title">
|
|
<span>{MailPoet.I18n.t('formPageTitle')}</span>
|
|
<Link
|
|
className="mailpoet-button button button-secondary button-small"
|
|
to="/segments"
|
|
>
|
|
{MailPoet.I18n.t('backToList')}
|
|
</Link>
|
|
</Heading>
|
|
|
|
<Form segmentId={Number(match.params.id)} />
|
|
</>
|
|
);
|
|
}
|
|
Editor.displayName = 'SegmentEditor';
|