Update dependency react-redux to v7.2.8 (#24306)

Notably, this update's Jetpack's dep from 6.0.1 (a major bump). Jetpack's Banner subclasses are changed to work with the fact that we can no longer just extend wrapped classes connected with react-redux v7. Not sure this is the greatest pattern (versus HOC), but it works. Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Brad Jorsch <[email protected]>
Automattic · May 13, 2022 · 11e2bc2 · 11e2bc2
1 parent ca9ee6a
commit 11e2bc2
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 68 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/search/changelog/renovate-react-redux-7.x b/projects/packages/search/changelog/renovate-react-redux-7.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
@@ -61,7 +61,7 @@
 		"qss": "2.0.3",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
-		"react-redux": "7.2.6",
+		"react-redux": "7.2.8",
 		"redux": "4.1.1",
 		"refx": "3.1.1",
 		"strip": "3.0.0",

diff --git a/projects/packages/wordads/changelog/renovate-react-redux-7.x b/projects/packages/wordads/changelog/renovate-react-redux-7.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies
diff --git a/projects/packages/wordads/package.json b/projects/packages/wordads/package.json
@@ -52,7 +52,7 @@
 		"qss": "2.0.3",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
-		"react-redux": "7.2.6",
+		"react-redux": "7.2.8",
 		"redux": "4.1.1",
 		"refx": "3.1.1",
 		"strip": "3.0.0",

diff --git a/projects/plugins/jetpack/_inc/client/components/banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
@@ -3,7 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import { connect as reduxConnect } from 'react-redux';
 import classNames from 'classnames';
 import { noop, size } from 'lodash';
 
@@ -26,7 +26,7 @@ import { isCurrentUserLinked, isConnectionOwner } from 'state/connection';
 
 import './style.scss';
 
-class Banner extends Component {
+export class Banner extends Component {
 	static propTypes = {
 		callToAction: PropTypes.string,
 		className: PropTypes.string,
@@ -181,8 +181,18 @@ class Banner extends Component {
 	}
 }
 
-export default connect( state => ( {
-	currentVersion: getCurrentVersion( state ),
-	isCurrentUserLinked: isCurrentUserLinked( state ),
-	isConnectionOwner: isConnectionOwner( state ),
-} ) )( Banner );
+/**
+ * Redux-connect a Banner or subclass.
+ *
+ * @param {Banner} BannerComponent - Component to connect.
+ * @returns {Component} Wrapped component.
+ */
+export function connect( BannerComponent ) {
+	return reduxConnect( state => ( {
+		currentVersion: getCurrentVersion( state ),
+		isCurrentUserLinked: isCurrentUserLinked( state ),
+		isConnectionOwner: isConnectionOwner( state ),
+	} ) )( BannerComponent );
+}
+
+export default connect( Banner );
diff --git a/projects/plugins/jetpack/_inc/client/components/connection-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/connection-banner/index.jsx
@@ -8,12 +8,12 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import Banner from 'components/banner';
+import { Banner, connect as bannerConnect } from 'components/banner';
 import Card from 'components/card';
 import ConnectButton from 'components/connect-button';
 import Gridicon from 'components/gridicon';
 
-class ConnectionBanner extends Banner {
+export class ConnectionBanner extends Banner {
 	static propTypes = {
 		title: PropTypes.string.isRequired,
 		className: PropTypes.string,
@@ -78,4 +78,4 @@ class ConnectionBanner extends Banner {
 	}
 }
 
-export default ConnectionBanner;
+export default bannerConnect( ConnectionBanner );
diff --git a/projects/plugins/jetpack/_inc/client/components/connection-banner/test/component.js b/projects/plugins/jetpack/_inc/client/components/connection-banner/test/component.js
@@ -8,7 +8,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import ConnectionBanner from '../index';
+import { ConnectionBanner } from '../index';
 import ConnectButton from 'components/connect-button';
 
 describe( 'ConnectionBanner', () => {

diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-banner/index.jsx
@@ -3,16 +3,16 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect as reduxConnect } from 'react-redux';
 import { noop } from 'lodash';
-import Banner from 'components/banner';
+import { Banner, connect as bannerConnect } from 'components/banner';
 
 /**
  * Internal dependencies
  */
 import { arePromotionsActive, userCanManageModules } from 'state/initial-state';
 
-class JetpackBanner extends Banner {
+export class JetpackBanner extends Banner {
 	static propTypes = {
 		callToAction: PropTypes.string,
 		className: PropTypes.string,
@@ -54,12 +54,22 @@ class JetpackBanner extends Banner {
 	}
 }
 
-export default connect( ( state, ownProps ) => {
-	const userCanPurchasePlan = userCanManageModules( state );
+/**
+ * Redux-connect a JetpackBanner or subclass.
+ *
+ * @param {JetpackBanner} Component - Component to connect.
+ * @returns {Component} Wrapped component.
+ */
+export function connect( Component ) {
+	return reduxConnect( ( state, ownProps ) => {
+		const userCanPurchasePlan = userCanManageModules( state );
 
-	return {
-		arePromotionsActive: arePromotionsActive( state ),
-		userCanPurchasePlan: userCanPurchasePlan,
-		hidePromotionBanner: !! ownProps.plan && ! userCanPurchasePlan,
-	};
-} )( JetpackBanner );
+		return {
+			arePromotionsActive: arePromotionsActive( state ),
+			userCanPurchasePlan: userCanPurchasePlan,
+			hidePromotionBanner: !! ownProps.plan && ! userCanPurchasePlan,
+		};
+	} )( bannerConnect( Component ) );
+}
+
+export default connect( JetpackBanner );
diff --git a/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/module-overridden-banner/index.jsx
@@ -15,7 +15,7 @@ import { getRedirectUrl } from '@automattic/jetpack-components';
 /**
  * Internal dependencies
  */
-import JetpackBanner from 'components/jetpack-banner';
+import { JetpackBanner, connect as bannerConnect } from 'components/jetpack-banner';
 
 import './style.scss';
 
@@ -64,4 +64,4 @@ class ModuleOverridenBanner extends JetpackBanner {
 	}
 }
 
-export default ModuleOverridenBanner;
+export default bannerConnect( ModuleOverridenBanner );
diff --git a/projects/plugins/jetpack/changelog/renovate-react-redux-7.x b/projects/plugins/jetpack/changelog/renovate-react-redux-7.x
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
@@ -101,7 +101,7 @@
 		"qss": "2.0.3",
 		"query-string": "7.0.0",
 		"react-page-visibility": "6.4.0",
-		"react-redux": "6.0.1",
+		"react-redux": "7.2.8",
 		"react-router-dom": "5.2.0",
 		"redux": "4.0.5",
 		"redux-thunk": "2.3.0",
@@ -143,7 +143,7 @@
 		"@testing-library/react-hooks": "8.0.0",
 		"@testing-library/user-event": "14.1.1",
 		"@types/react": "17.0.44",
-		"@types/react-redux": "7.1.23",
+		"@types/react-redux": "7.1.24",
 		"@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
 		"@wordpress/api-fetch": "6.5.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "3.1.2",

diff --git a/projects/plugins/jetpack/tools/webpack.config.js b/projects/plugins/jetpack/tools/webpack.config.js
@@ -170,6 +170,13 @@ module.exports = [
 			...sharedWebpackConfig.output,
 			libraryTarget: 'commonjs2',
 		},
+		resolve: {
+			...sharedWebpackConfig.resolve,
+			alias: {
+				...sharedWebpackConfig.resolve.alias,
+				'react-redux': require.resolve( 'react-redux/lib/alternate-renderers' ),
+			},
+		},
 		plugins: [
 			...jetpackWebpackConfig.StandardPlugins( {
 				DependencyExtractionPlugin: false,