Refactor logs to javascript

[MAILPOET-3135]

assets/js/src/logs/list.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+type Log = {
+  id: number;
+  name: string;
+  message: string;
+  created_at: string;
+}
+
+export type Logs = Log[];
+
+type LogProps = {
+  log: Log;
+}
+
+type ListProps = {
+  logs: Logs;
+}
+
+const Log: React.FunctionComponent<LogProps> = ({ log }: LogProps) => {
+  return (
+    <tr key={`log-row-${log.id}`}>
+      <td>{log.name}</td>
+      <td>
+        {log.message.substr(0, 150)}
+        …
+      </td>
+      <td>{MailPoet.Date.full(log.created_at)}</td>
+    </tr>
+  );
+}
+
+export const List: React.FunctionComponent<ListProps> = ({ logs }: ListProps) => (
+  <table className="mailpoet-listing-table widefat striped">
+    <thead>
+      <tr>
+        <th>{MailPoet.I18n.t('tableHeaderName')}</th>
+        <th>{MailPoet.I18n.t('tableHeaderMessage')}</th>
+        <th>{MailPoet.I18n.t('tableHeaderCreatedOn')}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {logs.map((log) => <Log log={log} />)}
+    </tbody>
+  </table>
+);

assets/js/src/logs/logs.tsx

@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+import { List, Logs } from './list';
+
+interface LogsWindow extends Window {
+  mailpoet_logs: Logs;
+}
+
+declare let window: LogsWindow;
+
+const logsContainer = document.getElementById('mailpoet_logs_container');
+
+if (logsContainer) {
+  ReactDOM.render(
+    <List logs={window.mailpoet_logs} />,
+    logsContainer
+  );
+}

assets/js/src/webpack_admin_index.jsx

@@ -13,4 +13,5 @@ import 'subscribers/importExport/import.jsx'; // side effect - executes on doc r
 import 'subscribers/importExport/export.ts'; // side effect - executes on doc ready
 import 'wizard/wizard.jsx'; // side effect - renders ReactDOM to document
 import 'experimental_features/experimental_features.jsx'; // side effect - renders ReactDOM to document
+import 'logs/logs'; // side effect - renders ReactDOM to document
 import 'sending-paused-notices-fix-button.tsx'; // side effect - renders ReactDOM to document

lib/AdminPages/Pages/Logs.php

@@ -4,7 +4,6 @@ namespace MailPoet\AdminPages\Pages;
 
 use MailPoet\AdminPages\PageRenderer;
 use MailPoet\Logging\LogRepository;
-use MailPoet\WP\Functions as WPFunctions;
 use MailPoetVendor\Carbon\Carbon;
 
 class Logs {
@@ -14,16 +13,11 @@ class Logs {
   /** @var LogRepository */
   private $logRepository;
 
-  /** @var WPFunctions */
-  private $wp;
-
   public function __construct(
     LogRepository $logRepository,
-    WPFunctions $wp,
     PageRenderer $pageRenderer
   ) {
     $this->pageRenderer = $pageRenderer;
-    $this->wp = $wp;
     $this->logRepository = $logRepository;
   }
 
@@ -32,18 +26,12 @@ class Logs {
     $dateTo = new Carbon();
     $logs = $this->logRepository->getLogs($dateFrom, $dateTo);
     $data = ['logs' => []];
-    foreach($logs as $log) {
+    foreach ($logs as $log) {
-      $created = wp_date(
-        (get_option('date_format') ?: 'F j, Y')
-        . ' '
-        . (get_option('time_format') ?: 'g:i a'),
-        (new Carbon($log->getCreatedAt()))->getTimestamp()
-      );
       $data['logs'][] = [
+        'id' => $log->getId(),
         'name' => $log->getName(),
         'message' => $log->getMessage(),
-        'short_message' => substr($log->getMessage(), 0, 150),
+        'created_at' => $log->getCreatedAt()->format('Y-m-d H:i:s'),
-        'created_at' => $created,
       ];
     }
     $this->pageRenderer->displayPage('logs.html', $data);

views/logs.html

@@ -5,22 +5,23 @@
 <div class="wrap">
   <h1 class="mailpoet-h1">Logs</h1>
 
-  <table class="mailpoet-listing-table widefat striped">
+  <div id="mailpoet_logs_container"></div>
-    <thead>
+
-      <tr>
+  <script type="text/javascript">
-        <th><%= __('Name') %></th>
+    <% autoescape 'js' %>
-        <th><%= __('Message') %></th>
+      var mailpoet_logs = <%= json_encode(logs) %>;
-        <th><%= __('Created On') %></th>
+    <% endautoescape %>
-      </tr>
+  </script>
-    </thead>
-    <% for log in logs %>
-      <tr>
-        <td><%= log.name %></td>
-        <td data-message="<%= log.message %>"><%= log.short_message %>…</td>
-        <td><%= log.created_at %></td>
-      </tr>
-    <% endfor %>
-  </table>
 </div>
 
 <% endblock %>
+
+<% block translations %>
+  <%= localize({
+    'pageTitle': __('Logs'),
+    'tableHeaderName': __('Name'),
+    'tableHeaderMessage': __('Message'),
+    'tableHeaderCreatedOn': __('Created On'),
+  }) %>
+<% endblock %>
+