From f1b2f01fee303f694eaf15dbaef556d53934dceb Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Wed, 3 Mar 2021 09:14:19 +0100
Subject: [PATCH] Refactor logs to javascript

[MAILPOET-3135]
---
 assets/js/src/logs/list.tsx           | 47 +++++++++++++++++++++++++++
 assets/js/src/logs/logs.tsx           | 19 +++++++++++
 assets/js/src/webpack_admin_index.jsx |  1 +
 lib/AdminPages/Pages/Logs.php         | 18 ++--------
 views/logs.html                       | 33 ++++++++++---------
 5 files changed, 87 insertions(+), 31 deletions(-)
 create mode 100644 assets/js/src/logs/list.tsx
 create mode 100644 assets/js/src/logs/logs.tsx

diff --git a/assets/js/src/logs/list.tsx b/assets/js/src/logs/list.tsx
new file mode 100644
index 0000000000..baae181779
--- /dev/null
+++ b/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>
+);
diff --git a/assets/js/src/logs/logs.tsx b/assets/js/src/logs/logs.tsx
new file mode 100644
index 0000000000..85729f2725
--- /dev/null
+++ b/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
+  );
+}
diff --git a/assets/js/src/webpack_admin_index.jsx b/assets/js/src/webpack_admin_index.jsx
index 0d4d23f1d4..13ae37bbcc 100644
--- a/assets/js/src/webpack_admin_index.jsx
+++ b/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
diff --git a/lib/AdminPages/Pages/Logs.php b/lib/AdminPages/Pages/Logs.php
index 732642fa96..d3d678c8ac 100644
--- a/lib/AdminPages/Pages/Logs.php
+++ b/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) {
-      $created = wp_date(
-        (get_option('date_format') ?: 'F j, Y')
-        . ' '
-        . (get_option('time_format') ?: 'g:i a'),
-        (new Carbon($log->getCreatedAt()))->getTimestamp()
-      );
+    foreach ($logs as $log) {
       $data['logs'][] = [
+        'id' => $log->getId(),
         'name' => $log->getName(),
         'message' => $log->getMessage(),
-        'short_message' => substr($log->getMessage(), 0, 150),
-        'created_at' => $created,
+        'created_at' => $log->getCreatedAt()->format('Y-m-d H:i:s'),
       ];
     }
     $this->pageRenderer->displayPage('logs.html', $data);
diff --git a/views/logs.html b/views/logs.html
index 7d2b212aba..c5a048ec6e 100644
--- a/views/logs.html
+++ b/views/logs.html
@@ -5,22 +5,23 @@
 <div class="wrap">
   <h1 class="mailpoet-h1">Logs</h1>
 
-  <table class="mailpoet-listing-table widefat striped">
-    <thead>
-      <tr>
-        <th><%= __('Name') %></th>
-        <th><%= __('Message') %></th>
-        <th><%= __('Created On') %></th>
-      </tr>
-    </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 id="mailpoet_logs_container"></div>
+
+  <script type="text/javascript">
+    <% autoescape 'js' %>
+      var mailpoet_logs = <%= json_encode(logs) %>;
+    <% endautoescape %>
+  </script>
 </div>
 
 <% endblock %>
+
+<% block translations %>
+  <%= localize({
+    'pageTitle': __('Logs'),
+    'tableHeaderName': __('Name'),
+    'tableHeaderMessage': __('Message'),
+    'tableHeaderCreatedOn': __('Created On'),
+  }) %>
+<% endblock %>
+