Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Use React.useContext instead of Context.Consumer

Browse Source
This commit is contained in:
Amine Ben hammou
2019-07-11 18:40:15 +01:00
committed by M. Shull
parent a327d7f80a
commit a49a6a6a65
1 changed files with 52 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
assets/js/src/subscribers/importExport/import/step_method_selection/select_import_method.jsx
View File

@@ -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>
</>
);
}