Modularise memberships state (#42955)

* Modularise memberships state Also refactors inline selectors, moving them to dedicated modules, and removes some unused selectors. Fixes #42457. * Use consts for default values.
Automattic · Jun 18, 2020 · 1227e50 · 1227e50
1 parent 8306287
commit 1227e50
Show file tree

Hide file tree

Showing 24 changed files with 179 additions and 103 deletions.
diff --git a/client/components/data/query-memberships-connected-accounts/index.js b/client/components/data/query-memberships-connected-accounts/index.js
@@ -3,12 +3,12 @@
  */
 import { Component } from 'react';
 import { connect } from 'react-redux';
-import { get } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import { listMembershipsConnectedAccounts } from 'state/memberships/actions';
+import { isFetching } from 'state/memberships/connected-accounts/selectors';
 
 class QueryMembershipsConnectedAccounts extends Component {
 	componentDidMount() {
@@ -24,7 +24,7 @@ class QueryMembershipsConnectedAccounts extends Component {
 
 export default connect(
 	( state ) => ( {
-		isFetching: get( state, [ 'memberships', 'connectedAccounts', 'isFetching' ], false ),
+		isFetching: isFetching( state ),
 	} ),
 	{ listMembershipsConnectedAccounts }
 )( QueryMembershipsConnectedAccounts );
diff --git a/client/me/memberships/main.jsx b/client/me/memberships/main.jsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { get } from 'lodash';
 import formatCurrency from '@automattic/format-currency';
 
 /**
@@ -20,6 +19,7 @@ import SectionHeader from 'components/section-header';
 import { CompactCard } from '@automattic/components';
 import EmptyContent from 'components/empty-content';
 import { withLocalizedMoment } from 'components/localized-moment';
+import { getAllSubscriptions } from 'state/memberships/subscriptions/selectors';
 
 /**
  * Style dependencies
@@ -122,5 +122,5 @@ const MembershipsHistory = ( { translate, subscriptions, moment } ) => {
 };
 
 export default connect( ( state ) => ( {
-	subscriptions: get( state, 'memberships.subscriptions.items', [] ),
+	subscriptions: getAllSubscriptions( state ),
 } ) )( localize( withLocalizedMoment( MembershipsHistory ) ) );
diff --git a/client/me/memberships/subscription.jsx b/client/me/memberships/subscription.jsx
@@ -4,7 +4,6 @@
 import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { get } from 'lodash';
 import formatCurrency from '@automattic/format-currency';
 
 /**
@@ -23,6 +22,7 @@ import Gridicon from 'components/gridicon';
 import { requestSubscriptionStop } from 'state/memberships/subscriptions/actions';
 import Notice from 'components/notice';
 import { withLocalizedMoment } from 'components/localized-moment';
+import { getSubscription, getStoppingStatus } from 'state/memberships/subscriptions/selectors';
 
 /**
  * Style dependencies
@@ -123,19 +123,10 @@ class Subscription extends React.Component {
 	}
 }
 
-const getSubscription = ( state, subscriptionId ) =>
-	get( state, 'memberships.subscriptions.items', [] )
-		.filter( ( sub ) => sub.ID === subscriptionId )
-		.pop();
-
 export default connect(
 	( state, props ) => ( {
 		subscription: getSubscription( state, props.subscriptionId ),
-		stoppingStatus: get(
-			state,
-			[ 'memberships', 'subscriptions', 'stoppingSubscription', props.subscriptionId ],
-			false
-		),
+		stoppingStatus: getStoppingStatus( state, props.subscriptionId ),
 	} ),
 	{
 		requestSubscriptionStop,

diff --git a/client/my-sites/earn/memberships/index.jsx b/client/my-sites/earn/memberships/index.jsx
@@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { get, orderBy } from 'lodash';
+import { orderBy } from 'lodash';
 import formatCurrency from '@automattic/format-currency';
 import { saveAs } from 'browser-filesaver';
 
@@ -35,6 +35,16 @@ import PopoverMenuItem from 'components/popover/menu-item';
 import ExternalLink from 'components/external-link';
 import { withLocalizedMoment } from 'components/localized-moment';
 import { localizeUrl } from 'lib/i18n-utils';
+import { getEarningsWithDefaultsForSiteId } from 'state/memberships/earnings/selectors';
+import {
+	getTotalSubscribersForSiteId,
+	getOwnershipsForSiteId,
+} from 'state/memberships/subscribers/selectors';
+import {
+	getConnectedAccountIdForSiteId,
+	getConnectUrlForSiteId,
+} from 'state/memberships/settings/selectors';
+import { getProductsForSiteId } from 'state/memberships/product-list/selectors';
 
 /**
  * Style dependencies
@@ -574,30 +584,29 @@ class MembershipsSection extends Component {
 	}
 }
 
+const emptyArray = [];
+
 const mapStateToProps = ( state ) => {
 	const site = getSelectedSite( state );
 	const siteId = getSelectedSiteId( state );
+	const earnings = getEarningsWithDefaultsForSiteId( state, siteId );
 
 	return {
 		site,
 		siteId,
 		siteSlug: getSelectedSiteSlug( state ),
-		total: get( state, [ 'memberships', 'earnings', 'summary', siteId, 'total' ], 0 ),
-		lastMonth: get( state, [ 'memberships', 'earnings', 'summary', siteId, 'last_month' ], 0 ),
-		forecast: get( state, [ 'memberships', 'earnings', 'summary', siteId, 'forecast' ], 0 ),
-		currency: get( state, [ 'memberships', 'earnings', 'summary', siteId, 'currency' ], 'USD' ),
-		commission: get( state, [ 'memberships', 'earnings', 'summary', siteId, 'commission' ], '0.1' ),
-		totalSubscribers: get( state, [ 'memberships', 'subscribers', 'list', siteId, 'total' ], 0 ),
-		subscribers: get( state, [ 'memberships', 'subscribers', 'list', siteId, 'ownerships' ], {} ),
-		connectedAccountId: get(
-			state,
-			[ 'memberships', 'settings', siteId, 'connectedAccountId' ],
-			null
-		),
-		connectUrl: get( state, [ 'memberships', 'settings', siteId, 'connectUrl' ], '' ),
+		total: earnings.total,
+		lastMonth: earnings.last_month,
+		forecast: earnings.forecast,
+		currency: earnings.currency,
+		commission: earnings.commission,
+		totalSubscribers: getTotalSubscribersForSiteId( state, siteId ),
+		subscribers: getOwnershipsForSiteId( state, siteId ),
+		connectedAccountId: getConnectedAccountIdForSiteId( state, siteId ),
+		connectUrl: getConnectUrlForSiteId( state, siteId ),
 		paidPlan: isSiteOnPaidPlan( state, siteId ),
 		isJetpack: isJetpackSite( state, siteId ),
-		products: get( state, [ 'memberships', 'productList', 'items', siteId ], [] ),
+		products: getProductsForSiteId( state, siteId ) ?? emptyArray,
 	};
 };
 

diff --git a/client/my-sites/earn/memberships/products.jsx b/client/my-sites/earn/memberships/products.jsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
@@ -12,6 +11,7 @@ import formatCurrency from '@automattic/format-currency';
  */
 import './style.scss';
 import { getSelectedSite, getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
+import { getProductsForSiteId } from 'state/memberships/product-list/selectors';
 import HeaderCake from 'components/header-cake';
 import SectionHeader from 'components/section-header';
 import { Button, CompactCard } from '@automattic/components';
@@ -111,6 +111,6 @@ export default connect( ( state ) => {
 		site,
 		siteId,
 		siteSlug: getSelectedSiteSlug( state ),
-		products: state?.memberships?.productList?.items?.[ siteId ],
+		products: getProductsForSiteId( state, siteId ),
 	};
 } )( localize( MembershipsProductsSection ) );
diff --git a/client/state/memberships/actions.js b/client/state/memberships/actions.js
@@ -5,9 +5,10 @@ import {
 	MEMBERSHIPS_CONNECTED_ACCOUNTS_LIST,
 	MEMBERSHIPS_CONNECTED_ACCOUNTS_RECEIVE,
 } from 'state/action-types';
-
 import wpcom from 'lib/wp';
 
+import 'state/memberships/init';
+
 export function listMembershipsConnectedAccounts() {
 	return ( dispatch ) => {
 		dispatch( { type: MEMBERSHIPS_CONNECTED_ACCOUNTS_LIST } );

diff --git a/client/state/memberships/connected-accounts/actions.js b/client/state/memberships/connected-accounts/actions.js
@@ -1,11 +1,17 @@
+/**
+ * External dependencies
+ */
+import requestExternalAccess from '@automattic/request-external-access';
+import { change } from 'redux-form';
+
 /**
  * Internal dependencies
  */
 import wpcom from 'lib/wp';
-import requestExternalAccess from '@automattic/request-external-access';
 import { listMembershipsConnectedAccounts } from '../actions';
 import { MEMBERSHIPS_CONNECTED_ACCOUNTS_STRIPE_AUTHORIZE_REQUEST } from 'state/action-types';
-import { change } from 'redux-form';
+
+import 'state/memberships/init';
 
 import 'state/form/init';
 

diff --git a/client/state/memberships/connected-accounts/selectors.js b/client/state/memberships/connected-accounts/selectors.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import 'state/memberships/init';
+
+export function isFetching( state ) {
+	return get( state, [ 'memberships', 'connectedAccounts', 'isFetching' ], false );
+}
diff --git a/client/state/memberships/earnings/actions.js b/client/state/memberships/earnings/actions.js
@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-
 import { MEMBERSHIPS_EARNINGS_GET } from 'state/action-types';
 
 import 'state/data-layer/wpcom/sites/memberships';
+import 'state/memberships/init';
 
 export const requestEarnings = ( siteId ) => ( {
 	siteId,

diff --git a/client/state/memberships/earnings/selectors.js b/client/state/memberships/earnings/selectors.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import 'state/memberships/init';
+
+export function getEarningsForSiteId( state, siteId ) {
+	return get( state, [ 'memberships', 'earnings', 'summary', siteId ] );
+}
+
+export function getEarningsWithDefaultsForSiteId( state, siteId ) {
+	const earnings = getEarningsForSiteId( state, siteId ) ?? {};
+	return {
+		...earnings,
+		total: earnings.total ?? 0,
+		last_month: earnings.last_month ?? 0,
+		forecast: earnings.forecast ?? 0,
+		currency: earnings.currency ?? 'USD',
+		commission: earnings.commission ?? '0.1',
+	};
+}
diff --git a/client/state/memberships/init.js b/client/state/memberships/init.js
@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { registerReducer } from 'state/redux-store';
+import membershipsReducer from './reducer';
+
+registerReducer( [ 'memberships' ], membershipsReducer );
diff --git a/client/state/memberships/package.json b/client/state/memberships/package.json
@@ -0,0 +1,5 @@
+{
+	"sideEffects": [
+		"./init.js"
+	]
+}
diff --git a/client/state/memberships/product-list/actions.js b/client/state/memberships/product-list/actions.js
@@ -1,7 +1,6 @@
 /**
  * Internal dependencies
  */
-
 import {
 	MEMBERSHIPS_PRODUCTS_LIST,
 	MEMBERSHIPS_PRODUCT_RECEIVE,
@@ -13,10 +12,11 @@ import {
 	MEMBERSHIPS_PRODUCT_DELETE,
 	MEMBERSHIPS_PRODUCT_DELETE_FAILURE,
 } from 'state/action-types';
-
 import wpcom from 'lib/wp';
 import { membershipProductFromApi } from 'state/data-layer/wpcom/sites/memberships';
 
+import 'state/memberships/init';
+
 export const requestProducts = ( siteId ) => ( {
 	siteId,
 	type: MEMBERSHIPS_PRODUCTS_LIST,

diff --git a/client/state/memberships/product-list/selectors.js b/client/state/memberships/product-list/selectors.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import 'state/memberships/init';
+
+export function getProductsForSiteId( state, siteId ) {
+	return get( state, [ 'memberships', 'productList', 'items', siteId ] );
+}
diff --git a/client/state/memberships/reducer.js b/client/state/memberships/reducer.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { combineReducers } from 'state/utils';
+import { combineReducers, withStorageKey } from 'state/utils';
 import connectedAccounts from './connected-accounts/reducer';
 import productList from './product-list/reducer';
 import subscriptions from './subscriptions/reducer';
@@ -18,4 +18,5 @@ const reducers = {
 	productList,
 };
 
-export default combineReducers( reducers );
+const combinedReducer = combineReducers( reducers );
+export default withStorageKey( 'memberships', combinedReducer );
diff --git a/client/state/memberships/settings/actions.js b/client/state/memberships/settings/actions.js
@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-
 import {
 	MEMBERSHIPS_SETTINGS,
 	MEMBERSHIPS_CONNECTED_ACCOUNTS_STRIPE_DISCONNECT_SUCCESS,
 	NOTICE_CREATE,
 } from 'state/action-types';
+import wpcom from 'lib/wp';
 
 import 'state/data-layer/wpcom/sites/memberships';
-import wpcom from 'lib/wp';
+import 'state/memberships/init';
 
 export const requestSettings = ( siteId ) => ( {
 	siteId,

diff --git a/client/state/memberships/settings/selectors.js b/client/state/memberships/settings/selectors.js
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import 'state/memberships/init';
+
+export function getConnectedAccountIdForSiteId( state, siteId ) {
+	return get( state, [ 'memberships', 'settings', siteId, 'connectedAccountId' ], null );
+}
+
+export function getConnectUrlForSiteId( state, siteId ) {
+	return get( state, [ 'memberships', 'settings', siteId, 'connectUrl' ], '' );
+}
diff --git a/client/state/memberships/subscribers/actions.js b/client/state/memberships/subscribers/actions.js
@@ -1,17 +1,17 @@
 /**
  * Internal dependencies
  */
-
 import {
 	MEMBERSHIPS_SUBSCRIBERS_LIST,
 	MEMBERSHIPS_SUBSCRIPTION_STOP,
 	MEMBERSHIPS_SUBSCRIPTION_STOP_SUCCESS,
 	MEMBERSHIPS_SUBSCRIPTION_STOP_FAILURE,
 	NOTICE_CREATE,
 } from 'state/action-types';
+import wpcom from 'lib/wp';
 
 import 'state/data-layer/wpcom/sites/memberships';
-import wpcom from 'lib/wp';
+import 'state/memberships/init';
 
 export const requestSubscribers = ( siteId, offset ) => ( {
 	siteId,