Add a component for stats

[MAILPOET-3069]

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<StatsType|null>(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) => <p key={error.message}>{error.message}</p>)}</>,
+          { scroll: true }
+        );
+      }
+    });
+  }, [match.params.id]);
+
+  if (loading) {
+    return (<Loading />);
+  }
+
+  return (
+    <div>
+      xyz
+    </div>
+  );
+};

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 = () => (
       <Switch>
         <Route path="/new" component={SubscriberForm} />
         <Route path="/edit/:id" component={SubscriberForm} />
+        <Route path="/stats/:id" component={SubscriberStats} />
         <Route path="*" component={SubscriberList} />
       </Switch>
     </HashRouter>