From 25aec60bc989e797161db30222ffd0ff8e40b762 Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Wed, 26 Feb 2020 14:26:09 +0100
Subject: [PATCH] Refactor Notice component to Typescript

[MAILPOET-2658]
---
 assets/js/src/notices/api_errors_notice.jsx   |  2 +-
 .../js/src/notices/mailer_status_notice.jsx   |  2 +-
 .../js/src/notices/{notice.jsx => notice.tsx} | 38 ++++++++++---------
 assets/js/src/notices/notices.jsx             |  2 +-
 .../src/notices/subscribers_limit_notice.jsx  |  2 +-
 5 files changed, 24 insertions(+), 22 deletions(-)
 rename assets/js/src/notices/{notice.jsx => notice.tsx} (88%)

diff --git a/assets/js/src/notices/api_errors_notice.jsx b/assets/js/src/notices/api_errors_notice.jsx
index 9d3a6ccc6b..f014a28e17 100644
--- a/assets/js/src/notices/api_errors_notice.jsx
+++ b/assets/js/src/notices/api_errors_notice.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const APIErrorsNotice = ({ errors }) => {
   if (errors.length < 1) return null;
diff --git a/assets/js/src/notices/mailer_status_notice.jsx b/assets/js/src/notices/mailer_status_notice.jsx
index 7bf7e0eeae..ddcb56c081 100644
--- a/assets/js/src/notices/mailer_status_notice.jsx
+++ b/assets/js/src/notices/mailer_status_notice.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const MailerStatusNotice = ({ error }) => {
   if (!error || error.operation !== 'authorization') return null;
diff --git a/assets/js/src/notices/notice.jsx b/assets/js/src/notices/notice.tsx
similarity index 88%
rename from assets/js/src/notices/notice.jsx
rename to assets/js/src/notices/notice.tsx
index 426d23402f..db1271a046 100644
--- a/assets/js/src/notices/notice.jsx
+++ b/assets/js/src/notices/notice.tsx
@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 import MailPoet from 'mailpoet';
 
-const Notice = ({
+const propTypes = {
+  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
+  scroll: PropTypes.bool,
+  closable: PropTypes.bool,
+  renderInPlace: PropTypes.bool,
+  onDisplay: PropTypes.func,
+  onClose: PropTypes.func,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+};
+
+const Notice: FC<InferProps<typeof propTypes>> = ({
   onClose,
   onDisplay,
   renderInPlace,
@@ -24,7 +39,7 @@ const Notice = ({
 
   React.useEffect(() => {
     if (timeout) {
-      timeoutRef.current = setTimeout(close, timeout);
+      timeoutRef.current = setTimeout(close, timeout as number);
     }
     return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null);
   }, [close, timeout]);
@@ -61,20 +76,7 @@ const Notice = ({
     document.getElementById('mailpoet_notices')
   );
 };
-Notice.propTypes = {
-  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
-  scroll: PropTypes.bool,
-  closable: PropTypes.bool,
-  renderInPlace: PropTypes.bool,
-  onDisplay: PropTypes.func,
-  onClose: PropTypes.func,
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
-};
+Notice.propTypes = propTypes;
 Notice.defaultProps = {
   timeout: 10000,
   scroll: false,
diff --git a/assets/js/src/notices/notices.jsx b/assets/js/src/notices/notices.jsx
index 8707394749..19578661cf 100644
--- a/assets/js/src/notices/notices.jsx
+++ b/assets/js/src/notices/notices.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { GlobalContext } from 'context/index.jsx';
-import Notice from './notice.jsx';
+import Notice from './notice.tsx';
 
 export default () => {
   const { notices } = React.useContext(GlobalContext);
diff --git a/assets/js/src/notices/subscribers_limit_notice.jsx b/assets/js/src/notices/subscribers_limit_notice.jsx
index 50d646cc03..4f4e6fc118 100644
--- a/assets/js/src/notices/subscribers_limit_notice.jsx
+++ b/assets/js/src/notices/subscribers_limit_notice.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const SubscribersLimitNotice = () => {
   if (!window.mailpoet_subscribers_limit_reached) return null;