From 42d9c3ea4d761a951db6dda294555d7463093eca Mon Sep 17 00:00:00 2001
From: Daniel Lockyer <hi@daniellockyer.com>
Date: Wed, 15 Mar 2023 08:44:45 +0100
Subject: [PATCH] Reorganised React imports
- we use ES6 `import` for all other imports so this standardizes the
React package to also use import vs require
- merged with other imports from the react package if present
---
ghost/portal/src/App.js | 3 +--
ghost/portal/src/AppContext.js | 2 +-
ghost/portal/src/components/Notification.js | 3 +--
ghost/portal/src/components/PopupModal.js | 3 +--
ghost/portal/src/components/TriggerButton.js | 3 +--
ghost/portal/src/components/common/NewsletterManagement.js | 4 +---
ghost/portal/src/components/pages/AccountEmailPage.js | 4 +---
ghost/portal/src/components/pages/AccountPlanPage.js | 4 +---
ghost/portal/src/components/pages/AccountProfilePage.js | 3 +--
ghost/portal/src/components/pages/FeedbackPage.js | 4 +---
ghost/portal/src/components/pages/LoadingPage.js | 3 ++-
ghost/portal/src/components/pages/MagicLinkPage.js | 3 +--
ghost/portal/src/components/pages/NewsletterSelectionPage.js | 4 +---
ghost/portal/src/components/pages/OfferPage.js | 2 +-
ghost/portal/src/components/pages/SigninPage.js | 3 +--
ghost/portal/src/components/pages/SignupPage.js | 3 +--
ghost/portal/src/components/pages/UnsubscribePage.js | 4 +---
17 files changed, 18 insertions(+), 37 deletions(-)
diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index a058648176..c59b58ea06 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -1,3 +1,4 @@
+import React from 'react';
import * as Sentry from '@sentry/react';
import TriggerButton from './components/TriggerButton';
import Notification from './components/Notification';
@@ -13,8 +14,6 @@ import NotificationParser from './utils/notifications';
import {allowCompMemberUpgrade, createPopupNotification, getCurrencySymbol, getFirstpromoterId, getPriceIdFromPageQuery, getProductCadenceFromPrice, getProductFromId, getQueryPrice, getSiteDomain, isActiveOffer, isComplimentaryMember, isInviteOnlySite, isPaidMember, isSentryEventAllowed, removePortalLinkFromUrl} from './utils/helpers';
import {handleDataAttributes} from './data-attributes';
-const React = require('react');
-
const DEV_MODE_DATA = {
showPopup: true,
site: Fixtures.site,
diff --git a/ghost/portal/src/AppContext.js b/ghost/portal/src/AppContext.js
index f402b7d5d7..73555c60bb 100644
--- a/ghost/portal/src/AppContext.js
+++ b/ghost/portal/src/AppContext.js
@@ -1,5 +1,5 @@
// Ref: https://reactjs.org/docs/context.html
-const React = require('react');
+import React from 'react';
const AppContext = React.createContext({
site: {},
diff --git a/ghost/portal/src/components/Notification.js b/ghost/portal/src/components/Notification.js
index c125f26ca8..0ba6a3f440 100644
--- a/ghost/portal/src/components/Notification.js
+++ b/ghost/portal/src/components/Notification.js
@@ -1,3 +1,4 @@
+import React from 'react';
import Frame from './Frame';
import AppContext from '../AppContext';
import NotificationStyle from './Notification.styles';
@@ -7,8 +8,6 @@ import {ReactComponent as WarningIcon} from '../images/icons/warning-fill.svg';
import NotificationParser, {clearURLParams} from '../utils/notifications';
import {getPortalLink} from '../utils/helpers';
-const React = require('react');
-
const Styles = () => {
return {
frame: {
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 1c47241020..77b6b85ecb 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -1,3 +1,4 @@
+import React from 'react';
import Frame from './Frame';
import {hasMode} from '../utils/check-mode';
import AppContext from '../AppContext';
@@ -7,8 +8,6 @@ import PopupNotification from './common/PopupNotification';
import PoweredBy from './common/PoweredBy';
import {getSiteProducts, isInviteOnlySite, isCookiesDisabled, hasFreeProductPrice} from '../utils/helpers';
-const React = require('react');
-
const StylesWrapper = ({member}) => {
return {
modalContainer: {
diff --git a/ghost/portal/src/components/TriggerButton.js b/ghost/portal/src/components/TriggerButton.js
index da49d2fc73..ce6d05a798 100644
--- a/ghost/portal/src/components/TriggerButton.js
+++ b/ghost/portal/src/components/TriggerButton.js
@@ -1,3 +1,4 @@
+import React from 'react';
import Frame from './Frame';
import MemberGravatar from './common/MemberGravatar';
import AppContext from '../AppContext';
@@ -11,8 +12,6 @@ import TriggerButtonStyle from './TriggerButton.styles';
import {isInviteOnlySite} from '../utils/helpers';
import {hasMode} from '../utils/check-mode';
-const React = require('react');
-
const ICON_MAPPING = {
'icon-1': ButtonIcon1,
'icon-2': ButtonIcon2,
diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index 5278f806bd..b1245e9b31 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -1,14 +1,12 @@
import AppContext from '../../AppContext';
import CloseButton from '../common/CloseButton';
import BackButton from '../common/BackButton';
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
import Switch from '../common/Switch';
import {getSiteNewsletters, hasMemberGotEmailSuppression} from '../../utils/helpers';
import ActionButton from '../common/ActionButton';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.svg';
-const React = require('react');
-
function AccountHeader() {
const {brandColor, lastPage, onAction, t} = useContext(AppContext);
return (
diff --git a/ghost/portal/src/components/pages/AccountEmailPage.js b/ghost/portal/src/components/pages/AccountEmailPage.js
index e5b482de5a..4e31ba34a2 100644
--- a/ghost/portal/src/components/pages/AccountEmailPage.js
+++ b/ghost/portal/src/components/pages/AccountEmailPage.js
@@ -1,10 +1,8 @@
import AppContext from '../../AppContext';
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
import {isPaidMember} from '../../utils/helpers';
import NewsletterManagement from '../common/NewsletterManagement';
-const React = require('react');
-
export default function AccountEmailPage() {
const {member, onAction, site, t} = useContext(AppContext);
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 215b894504..ac0ae60bda 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -1,4 +1,4 @@
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
@@ -38,8 +38,6 @@ export const AccountPlanPageStyles = `
}
`;
-const React = require('react');
-
function getConfirmationPageTitle({confirmationType}) {
if (confirmationType === 'changePlan') {
return 'Confirm subscription';
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index dad30ee304..5a298c26a9 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -1,3 +1,4 @@
+import React from 'react';
import AppContext from '../../AppContext';
import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton';
@@ -6,8 +7,6 @@ import BackButton from '../common/BackButton';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
-const React = require('react');
-
export default class AccountProfilePage extends React.Component {
static contextType = AppContext;
diff --git a/ghost/portal/src/components/pages/FeedbackPage.js b/ghost/portal/src/components/pages/FeedbackPage.js
index 241ee6cdd0..22ee61f7fd 100644
--- a/ghost/portal/src/components/pages/FeedbackPage.js
+++ b/ghost/portal/src/components/pages/FeedbackPage.js
@@ -1,4 +1,4 @@
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
import AppContext from '../../AppContext';
import {ReactComponent as ThumbDownIcon} from '../../images/icons/thumbs-down.svg';
import {ReactComponent as ThumbUpIcon} from '../../images/icons/thumbs-up.svg';
@@ -9,8 +9,6 @@ import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
import LoadingPage from './LoadingPage';
-const React = require('react');
-
export const FeedbackPageStyles = `
.gh-portal-feedback {
diff --git a/ghost/portal/src/components/pages/LoadingPage.js b/ghost/portal/src/components/pages/LoadingPage.js
index 2034812df0..40778ef3c8 100644
--- a/ghost/portal/src/components/pages/LoadingPage.js
+++ b/ghost/portal/src/components/pages/LoadingPage.js
@@ -1,5 +1,6 @@
+import React from 'react';
import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
-const React = require('react');
+
export default class LoadingPage extends React.Component {
render() {
return (
diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/ghost/portal/src/components/pages/MagicLinkPage.js
index 1c47b9a5d9..9b9008323f 100644
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@@ -1,10 +1,9 @@
+import React from 'react';
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
import AppContext from '../../AppContext';
import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
-const React = require('react');
-
export const MagicLinkStyles = `
.gh-portal-icon-envelope {
width: 44px;
diff --git a/ghost/portal/src/components/pages/NewsletterSelectionPage.js b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
index 51b82e2a5c..a0e84b8d5b 100644
--- a/ghost/portal/src/components/pages/NewsletterSelectionPage.js
+++ b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
@@ -1,12 +1,10 @@
import AppContext from '../../AppContext';
-import {useContext, useState} from 'react';
+import React, {useContext, useState} from 'react';
import Switch from '../common/Switch';
import {getSiteNewsletters} from '../../utils/helpers';
import ActionButton from '../common/ActionButton';
import {ReactComponent as LockIcon} from '../../images/icons/lock.svg';
-const React = require('react');
-
function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribedNewsletters}) {
const isChecked = subscribedNewsletters.some((d) => {
return d.id === newsletter?.id;
diff --git a/ghost/portal/src/components/pages/OfferPage.js b/ghost/portal/src/components/pages/OfferPage.js
index c494b15e13..e84ee0808a 100644
--- a/ghost/portal/src/components/pages/OfferPage.js
+++ b/ghost/portal/src/components/pages/OfferPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
import ActionButton from '../common/ActionButton';
import AppContext from '../../AppContext';
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
@@ -6,7 +7,6 @@ import InputForm from '../common/InputForm';
import {getCurrencySymbol, getProductFromId, hasMultipleProductsFeature, isSameCurrency, formatNumber, hasMultipleNewsletters} from '../../utils/helpers';
import {ValidateInputForm} from '../../utils/form';
import NewsletterSelectionPage from './NewsletterSelectionPage';
-const React = require('react');
export const OfferPageStyles = ({site}) => {
return `
diff --git a/ghost/portal/src/components/pages/SigninPage.js b/ghost/portal/src/components/pages/SigninPage.js
index a03e219f98..15b2bc4886 100644
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton';
// import SiteTitleBackButton from '../common/SiteTitleBackButton';
@@ -5,8 +6,6 @@ import AppContext from '../../AppContext';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
-const React = require('react');
-
export default class SigninPage extends React.Component {
static contextType = AppContext;
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index e0c55589f5..6fefaf900c 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -1,3 +1,4 @@
+import React from 'react';
import ActionButton from '../common/ActionButton';
import AppContext from '../../AppContext';
import CloseButton from '../common/CloseButton';
@@ -9,8 +10,6 @@ import {ValidateInputForm} from '../../utils/form';
import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasFreeProductPrice, hasMultipleNewsletters, hasFreeTrialTier} from '../../utils/helpers';
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
-const React = require('react');
-
export const SignupPageStyles = `
.gh-portal-back-sitetitle {
position: absolute;
diff --git a/ghost/portal/src/components/pages/UnsubscribePage.js b/ghost/portal/src/components/pages/UnsubscribePage.js
index dbcb441008..fa21ee433e 100644
--- a/ghost/portal/src/components/pages/UnsubscribePage.js
+++ b/ghost/portal/src/components/pages/UnsubscribePage.js
@@ -1,14 +1,12 @@
import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton';
-import {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
import {getSiteNewsletters} from '../../utils/helpers';
import setupGhostApi from '../../utils/api';
import NewsletterManagement from '../common/NewsletterManagement';
import CloseButton from '../common/CloseButton';
import {ReactComponent as WarningIcon} from '../../images/icons/warning-fill.svg';
-const React = require('react');
-
function SiteLogo() {
const {site} = useContext(AppContext);
const siteLogo = site.icon;