Refactor APIErrorsNotice to Typescript

[MAILPOET-2658]

assets/js/src/newsletters/listings/queue_status.jsx

@@ -3,7 +3,7 @@ import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
-import APIErrorsNotice from 'notices/api_errors_notice.jsx';
+import APIErrorsNotice from 'notices/api_errors_notice.tsx';
 
 const QueuePropType = PropTypes.shape({
   status: PropTypes.string,

assets/js/src/notices/api_errors_notice.tsx

@@ -1,15 +1,18 @@
-import React from 'react';
+import React, { FC } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 import Notice from 'notices/notice.tsx';
 
-const APIErrorsNotice = ({ errors }) => {
+const propTypes = {
-  if (errors.length < 1) return null;
-  return <Notice type="error" closable={false}>{errors.map((err) => <p key={err.message}>{err.message}</p>)}</Notice>;
-};
-APIErrorsNotice.propTypes = {
   errors: PropTypes.arrayOf(PropTypes.shape({
     message: PropTypes.string.isRequired,
   })).isRequired,
 };
 
+const APIErrorsNotice: FC<InferProps<typeof propTypes>> = ({ errors }) => {
+  if (errors.length < 1) return null;
+  return <Notice type="error" closable={false}>{errors.map((err) => <p key={err.message}>{err.message}</p>)}</Notice>;
+};
+
+APIErrorsNotice.propTypes = propTypes;
+
 export default APIErrorsNotice;