From a49a6a6a65f2eb96ba6cd6e2d0a0ceada6552e48 Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Thu, 11 Jul 2019 18:40:15 +0100
Subject: [PATCH] Use React.useContext instead of Context.Consumer

---
 .../select_import_method.jsx                  | 113 ++++++++----------
 1 file changed, 52 insertions(+), 61 deletions(-)

diff --git a/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx b/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
index 1636a14166..19c7e0263c 100644
--- a/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
@@ -8,69 +8,60 @@ function SelectImportMethod({
   activeMethod,
   onMethodChange,
 }) {
-  const renderSelection = () => (
-    <form className="mailpoet_import_selection_form">
-      <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span>
-      <label htmlFor="import-paste-method">
-        <input
-          type="radio"
-          name="select_method"
-          data-automation-id="import-paste-method"
-          id="import-paste-method"
-          checked={activeMethod === 'paste-method'}
-          onChange={() => onMethodChange('paste-method')}
-        />
-        {MailPoet.I18n.t('methodPaste')}
-      </label>
-      <label htmlFor="import-csv-method">
-        <input
-          type="radio"
-          name="select_method"
-          data-automation-id="import-csv-method"
-          id="import-csv-method"
-          checked={activeMethod === 'file-method'}
-          onChange={() => onMethodChange('file-method')}
-        />
-        {MailPoet.I18n.t('methodUpload')}
-      </label>
-      <label htmlFor="import-mailchimp-method">
-        <input
-          type="radio"
-          name="select_method"
-          data-automation-id="import-mailchimp-method"
-          id="import-mailchimp-method"
-          checked={activeMethod === 'mailchimp-method'}
-          onChange={() => onMethodChange('mailchimp-method')}
-        />
-        {MailPoet.I18n.t('methodMailChimp')}
-      </label>
-    </form>
+  const { isNewUser } = React.useContext(ImportContext);
+  const badgeClasses = classNames(
+    'mailpoet_badge',
+    'mailpoet_badge_video',
+    { mailpoet_badge_video_grey: !isNewUser }
   );
-
   return (
-    <ImportContext.Consumer>
-      {({ isNewUser }) => {
-        const badgeClasses = classNames(
-          'mailpoet_badge',
-          'mailpoet_badge_video',
-          { mailpoet_badge_video_grey: !isNewUser }
-        );
-        return (
-          <>
-            {renderSelection()}
-            <a
-              className={badgeClasses}
-              href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="dashicons dashicons-format-video" />
-              {MailPoet.I18n.t('seeVideo')}
-            </a>
-          </>
-        );
-      }}
-    </ImportContext.Consumer>
+    <>
+      <form className="mailpoet_import_selection_form">
+        <span className="mailpoet_import_heading">{MailPoet.I18n.t('methodSelectionHead')}</span>
+        <label htmlFor="import-paste-method">
+          <input
+            type="radio"
+            name="select_method"
+            data-automation-id="import-paste-method"
+            id="import-paste-method"
+            checked={activeMethod === 'paste-method'}
+            onChange={() => onMethodChange('paste-method')}
+          />
+          {MailPoet.I18n.t('methodPaste')}
+        </label>
+        <label htmlFor="import-csv-method">
+          <input
+            type="radio"
+            name="select_method"
+            data-automation-id="import-csv-method"
+            id="import-csv-method"
+            checked={activeMethod === 'file-method'}
+            onChange={() => onMethodChange('file-method')}
+          />
+          {MailPoet.I18n.t('methodUpload')}
+        </label>
+        <label htmlFor="import-mailchimp-method">
+          <input
+            type="radio"
+            name="select_method"
+            data-automation-id="import-mailchimp-method"
+            id="import-mailchimp-method"
+            checked={activeMethod === 'mailchimp-method'}
+            onChange={() => onMethodChange('mailchimp-method')}
+          />
+          {MailPoet.I18n.t('methodMailChimp')}
+        </label>
+      </form>
+      <a
+        className={badgeClasses}
+        href="https://kb.mailpoet.com/article/242-video-guide-importing-subscribers-using-a-csv-file"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span className="dashicons dashicons-format-video" />
+        {MailPoet.I18n.t('seeVideo')}
+      </a>
+    </>
   );
 }