Convert queue_status.jsx to tsx and add missing types

[MAILPOET-4983]

mailpoet/assets/js/src/help/system_status.jsx

@@ -1,7 +1,7 @@
 import { MailPoet } from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 import { CronStatus } from './cron_status.jsx';
-import { QueueStatus } from './queue_status.jsx';
+import { QueueStatus } from './queue_status';
 import { ActionSchedulerStatus } from './action_scheduler_status';
 
 function renderStatusMessage(

mailpoet/assets/js/src/newsletters/listings/notification_history.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { Listing } from 'listing/listing.jsx';
 import { MailPoet } from 'mailpoet';
-import { QueueStatus } from 'newsletters/listings/queue_status.jsx';
+import { QueueStatus } from 'newsletters/listings/queue_status';
 import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,

mailpoet/assets/js/src/newsletters/listings/queue_status.tsx

@@ -1,34 +1,24 @@
 import { useState } from 'react';
 import { MailPoet } from 'mailpoet';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import parseDate from 'date-fns/parse';
-import { APIErrorsNotice } from 'notices/api_errors_notice.tsx';
+import { APIErrorsNotice } from 'notices/api_errors_notice';
 import { Button } from 'common/button/button';
 import { NewsletterStatus } from 'common/listings/newsletter_status';
 import { withBoundary } from '../../common';
+import { NewsLetter } from '../models';
 
-const QueuePropType = PropTypes.shape({
+type QueueSendingProps = {
-  status: PropTypes.string,
+  newsletter: NewsLetter;
-  count_processed: PropTypes.string.isRequired,
+};
-  count_total: PropTypes.string.isRequired,
-  scheduled_at: PropTypes.string,
-});
 
-const NewsletterPropType = PropTypes.shape({
+function QueueSending({ newsletter }: QueueSendingProps) {
-  id: PropTypes.number.isRequired,
-  sent_at: PropTypes.string,
-  status: PropTypes.string.isRequired,
-  queue: PropTypes.oneOfType([QueuePropType, PropTypes.bool]),
-});
-
-function QueueSending({ newsletter }) {
   const [paused, setPaused] = useState(newsletter.queue.status === 'paused');
   const [errors, setErrors] = useState([]);
 
-  const pauseSending = () => {
+  const pauseSending = async () => {
     setErrors([]);
-    MailPoet.Ajax.post({
+    await MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'sendingQueue',
       action: 'pause',
@@ -40,9 +30,9 @@ function QueueSending({ newsletter }) {
       .fail((response) => setErrors(response.errors));
   };
 
-  const resumeSending = () => {
+  const resumeSending = async () => {
     setErrors([]);
-    MailPoet.Ajax.post({
+    await MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'sendingQueue',
       action: 'resume',
@@ -71,19 +61,19 @@ function QueueSending({ newsletter }) {
   );
 }
 
-QueueSending.propTypes = {
+type QueueStatusProps = {
-  newsletter: NewsletterPropType.isRequired,
+  newsletter: NewsLetter;
+  mailerLog: {
+    status: string;
+  };
 };
 
-function QueueStatus({ newsletter, mailerLog }) {
+function QueueStatus({ newsletter, mailerLog }: QueueStatusProps) {
-  let newsletterDate = newsletter.sent_at || newsletter.queue.scheduled_at;
+  const rawNewsletterDate = newsletter.sent_at || newsletter.queue.scheduled_at;
-  if (newsletterDate) {
+  const newsletterDate = rawNewsletterDate
-    newsletterDate = parseDate(
+    ? parseDate(rawNewsletterDate, 'yyyy-MM-dd HH:mm:ss', new Date())
-      newsletterDate,
+    : undefined;
-      'yyyy-MM-dd HH:mm:ss',
+
-      new Date(),
-    );
-  }
   const isNewsletterSending =
     newsletter.queue && newsletter.queue.status !== 'scheduled';
   const isMtaPaused = mailerLog.status === 'paused';
@@ -124,12 +114,6 @@ function QueueStatus({ newsletter, mailerLog }) {
   );
 }
 
-QueueStatus.propTypes = {
-  newsletter: NewsletterPropType.isRequired,
-  mailerLog: PropTypes.shape({
-    status: PropTypes.string,
-  }).isRequired,
-};
 QueueStatus.displayName = 'QueueStatus';
 const QueueStatusWithBoundary = withBoundary(QueueStatus);
 export { QueueStatusWithBoundary as QueueStatus };

mailpoet/assets/js/src/newsletters/listings/standard.jsx

@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
 import { confirmAlert } from 'common/confirm_alert.jsx';
 import { SegmentTags } from 'common/tag/tags';
 import { Listing } from 'listing/listing.jsx';
-import { QueueStatus } from 'newsletters/listings/queue_status.jsx';
+import { QueueStatus } from 'newsletters/listings/queue_status';
 import { Statistics } from 'newsletters/listings/statistics.jsx';
 import {
   addStatsCTAAction,

mailpoet/assets/js/src/newsletters/models/newsletter.ts

@@ -15,6 +15,7 @@ export enum NewsletterStatus {
   Sending = 'sending',
   Sent = 'sent',
   Active = 'active',
+  Corrupt = 'corrupt',
 }
 
 export enum NewsletterOptionGroup {
@@ -53,7 +54,11 @@ export type NewsLetter = {
   };
   parent_id: null | string;
   preheader: string;
-  queue: Record<string, unknown>;
+  queue: Record<string, unknown> & {
+    scheduled_at: string;
+    count_processed: string;
+    count_total: string;
+  };
   reply_to_address: string;
   reply_to_name: string;
   segments: Array<{ filters: unknown[] }>;