diff --git a/assets/js/src/subscribers/stats.tsx b/assets/js/src/subscribers/stats.tsx new file mode 100644 index 0000000000..e35d6fb90f --- /dev/null +++ b/assets/js/src/subscribers/stats.tsx @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from 'react'; +import { + useRouteMatch, +} from 'react-router-dom'; +import MailPoet from 'mailpoet'; +import Loading from 'common/loading'; +import { useGlobalContextValue } from 'context'; + +export type StatsType = { + email: string + total_sent: number + open: number + click: number +} + +export const SubscriberStats = () => { + const match = useRouteMatch<{id: string}>(); + const [stats, setStats] = useState(null); + const [loading, setLoading] = useState(true); + const contextValue = useGlobalContextValue(window); + const showError = contextValue.notices.error; + + useEffect(() => { + MailPoet.Ajax.post({ + api_version: (window as any).mailpoet_api_version, + endpoint: 'subscriberStats', + action: 'get', + data: { + subscriber_id: match.params.id, + }, + }).done((response) => { + setStats(response.data); + setLoading(false); + }).fail((response) => { + setLoading(false); + if (response.errors.length > 0) { + showError( + <>{response.errors.map((error) =>

{error.message}

)}, + { scroll: true } + ); + } + }); + }, [match.params.id]); + + if (loading) { + return (); + } + + return ( +
+ xyz +
+ ); +}; diff --git a/assets/js/src/subscribers/subscribers.jsx b/assets/js/src/subscribers/subscribers.jsx index 863bf29e04..1e227f5526 100644 --- a/assets/js/src/subscribers/subscribers.jsx +++ b/assets/js/src/subscribers/subscribers.jsx @@ -4,6 +4,7 @@ import { HashRouter, Switch, Route } from 'react-router-dom'; import SubscriberList from 'subscribers/list.jsx'; import SubscriberForm from 'subscribers/form.jsx'; +import { SubscriberStats } from 'subscribers/stats'; import { GlobalContext, useGlobalContextValue } from 'context/index.jsx'; import Notices from 'notices/notices.jsx'; @@ -14,6 +15,7 @@ const App = () => ( +