Modularise media state (#47917)

Fixes #42456.

client/state/media/actions.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-
 import { castArray } from 'lodash';
 
 /**
@@ -31,6 +30,7 @@ import {
 } from 'calypso/state/action-types';
 
 import 'calypso/state/data-layer/wpcom/sites/media';
+import 'calypso/state/media/init';
 
 /**
  * Returns an action object used in signalling that media item(s) for the site

client/state/media/init.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { registerReducer } from 'calypso/state/redux-store';
+import reducer from './reducer';
+
+registerReducer( [ 'media' ], reducer );

client/state/media/package.json

@@ -0,0 +1,5 @@
+{
+	"sideEffects": [
+		"./init.js"
+	]
+}

client/state/media/reducer.js

@@ -26,7 +26,7 @@ import {
 	MEDIA_CLEAR_SITE,
 	MEDIA_ITEM_EDIT,
 } from 'calypso/state/action-types';
-import { combineReducers, withoutPersistence } from 'calypso/state/utils';
+import { combineReducers, withoutPersistence, withStorageKey } from 'calypso/state/utils';
 import MediaQueryManager from 'calypso/lib/query-manager/media';
 import { ValidationErrors as MediaValidationErrors } from 'calypso/lib/media/constants';
 import { transformSite as transformSiteTransientItems } from 'calypso/state/media/utils/transientItems';
@@ -527,11 +527,13 @@ export const fetching = withoutPersistence( ( state = {}, action ) => {
 	return state;
 } );
 
-export default combineReducers( {
+const combinedReducer = combineReducers( {
 	errors,
 	queries,
 	queryRequests,
 	selectedItems,
 	transientItems,
 	fetching,
 } );
+
+export default withStorageKey( 'media', combinedReducer );

client/state/reducer.js

@@ -23,7 +23,6 @@ import i18n from './i18n/reducer';
 import importerNux from './importer-nux/reducer';
 import inlineSupportArticle from './inline-support-article/reducer';
 import jitm from './jitm/reducer';
-import media from './media/reducer';
 import mySites from './my-sites/reducer';
 import notices from './notices/reducer';
 import { unseenCount as notificationsUnseenCount } from './notifications';
@@ -47,7 +46,6 @@ const reducers = {
 	importerNux,
 	inlineSupportArticle,
 	jitm,
-	media,
 	mySites,
 	notices,
 	notificationsUnseenCount,

client/state/selectors/get-current-media-query.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Retrieves the current query for media items for a given site.
  *

client/state/selectors/get-media-errors.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Retrieves all media validation errors for a specified site.
  *

client/state/selectors/get-media-item-errors.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Retrieves all media validation errors for a certain media item of a specified site.
  *

client/state/selectors/get-media-item-server-id-from-transient-id.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Retrieves the server ID for a given transient ID and site ID.
  *

client/state/selectors/get-media-library-selected-items.js

@@ -3,6 +3,8 @@
  */
 import getMediaItem from 'calypso/state/selectors/get-media-item';
 
+import 'calypso/state/media/init';
+
 /**
  * Retrieves the currently selected media library items for a specified site.
  *

client/state/selectors/get-media-query-manager.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Gets the MediaQueryManager for the site
  *

client/state/selectors/get-media-sorted-by-date.js

@@ -9,6 +9,8 @@ import { values } from 'lodash';
 import getMediaQueryManager from './get-media-query-manager';
 import { sortItemsByDate } from 'calypso/lib/media/utils/sort-items-by-date';
 
+import 'calypso/state/media/init';
+
 /**
  * Returns media for a specified site ID and query.
  *

client/state/selectors/get-media.js

@@ -1,11 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Returns media for a specified site ID and query.
  *
- *
- * @param {object}  query  Query object
+ * @param {any} state the global state
+ * @param {string} siteId the site ID
+ * @param {object} query  Query object
  * @returns {?Array}         Media
  */
-
 export default function getMedia( state, siteId, query ) {
 	const queries = state.media.queries[ siteId ];
 

client/state/selectors/get-next-page-handle.js

@@ -3,6 +3,11 @@
  */
 import { get } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Get the next page handle for the sites current media request
  *

client/state/selectors/get-next-page-query.js

@@ -9,6 +9,8 @@ import { isString, isNumber } from 'lodash';
 import getNextPageHandle from 'calypso/state/selectors/get-next-page-handle';
 import getCurrentMediaQuery from 'calypso/state/selectors/get-current-media-query';
 
+import 'calypso/state/media/init';
+
 const DEFAULT_QUERY = Object.freeze( { number: 20 } );
 
 /**

client/state/selectors/get-transient-media-item.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Retrieves a transient media item by ID for a given site.
  *

client/state/selectors/has-next-media-page.js

@@ -3,6 +3,8 @@
  */
 import getNextPageHandle from 'calypso/state/selectors/get-next-page-handle';
 
+import 'calypso/state/media/init';
+
 export default function hasNextMediaPage( state, siteId ) {
 	if (
 		! ( siteId in state.media.fetching ) ||

client/state/selectors/is-fetching-next-page.js

@@ -2,8 +2,14 @@
  * External dependencies
  */
 import { get } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
 import createSelector from 'calypso/lib/create-selector';
 
+import 'calypso/state/media/init';
+
 export default createSelector(
 	/**
 	 * Returns true if media is being requested for a specified site ID and query.

client/state/selectors/is-requesting-media-item.js

@@ -1,9 +1,13 @@
 /**
  * External dependencies
  */
-
 import { get } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import 'calypso/state/media/init';
+
 /**
  * Returns true if the media is being requested for a specified site ID and media ID.
  *

client/state/selectors/is-requesting-media.js

@@ -1,16 +1,17 @@
 /**
  * Internal dependencies
  */
-
 import MediaQueryManager from 'calypso/lib/query-manager/media';
 
+import 'calypso/state/media/init';
+
 /**
  * Returns true if media is being requested for a specified site ID and query.
  *
  * @param  {object}  state  Global state tree
  * @param  {number}  siteId Site ID
  * @param  {object}  query  Query object
- * @returns {bool}           True if media is being requested
+ * @returns {boolean}           True if media is being requested
  */
 export default function isRequestingMedia( state, siteId, query ) {
 	const queryRequests = state.media.queryRequests[ siteId ];