@automattic/jetpack-shared-extension-utils 0.13.4 → 0.13.6

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.13.6] - 2024-01-02
+### Added
+- Added prefilling for jetpack modules data during store initialization. [#34794]
+
+### Changed
+- Made module updates more precise inside the modules store. [#34801]
+
+## [0.13.5] - 2023-12-19
+### Changed
+- Updated package dependencies. [#34694]
+
 ## [0.13.4] - 2023-12-06
 ### Changed
 - Updated package dependencies. [#34416]
@@ -298,6 +309,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.13.6]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.13.5...0.13.6
+[0.13.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.13.4...0.13.5
 [0.13.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.13.3...0.13.4
 [0.13.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.13.2...0.13.3
 [0.13.2]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.13.1...0.13.2

package/README.md

@@ -51,11 +51,11 @@ const SampleComponent = props => {
 // Jetpack modules will be pulled after first selection `isModuleActive`.
 export default compose( [
 	withSelect( ( select, props ) => {
-		const { isModuleActive, areModulesLoading, areModulesUpdating } = select( 'jetpack-modules' );
+		const { isModuleActive, areModulesLoading, isModuleUpdating } = select( 'jetpack-modules' );
 		return {
 			isModuleActive: isModuleActive( 'contact-form' ),
 			isLoadingModules: areModulesLoading(),
-			isChangingStatus: areModulesUpdating(),
+			isChangingStatus: isModuleUpdating( 'contact-form' ),
 		};
 	} ),
 	withDispatch( dispatch => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.13.4",
+	"version": "0.13.6",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {
@@ -18,8 +18,8 @@
 	},
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.29",
-		"@automattic/jetpack-components": "^0.45.5",
-		"@automattic/jetpack-connection": "^0.30.10",
+		"@automattic/jetpack-components": "^0.45.9",
+		"@automattic/jetpack-connection": "^0.30.11",
 		"@wordpress/api-fetch": "6.44.0",
 		"@wordpress/compose": "6.24.0",
 		"@wordpress/data": "9.17.0",
@@ -39,8 +39,8 @@
 		"react-dom": "18.2.0",
 		"jetpack-js-tools": "workspace:*",
 		"@automattic/jetpack-webpack-config": "workspace:*",
-		"@testing-library/dom": "8.20.1",
-		"@testing-library/react": "13.4.0",
+		"@testing-library/dom": "9.3.3",
+		"@testing-library/react": "14.1.2",
 		"@testing-library/user-event": "14.5.1",
 		"@babel/plugin-transform-react-jsx": "7.23.4",
 		"@wordpress/babel-plugin-import-jsx-pragma": "4.30.0"

package/src/modules-state/actions.js

@@ -7,6 +7,7 @@ import {
 import { JETPACK_MODULES_STORE_ID } from '.';
 
 export const SET_JETPACK_MODULES = 'SET_JETPACK_MODULES';
+export const SET_MODULE_UPDATING = 'SET_MODULE_UPDATING';
 
 /**
  * Yield actions to update module status
@@ -20,7 +21,7 @@ export const SET_JETPACK_MODULES = 'SET_JETPACK_MODULES';
 export function* updateJetpackModuleStatus( settings ) {
 	try {
 		const originalData = select( JETPACK_MODULES_STORE_ID ).getJetpackModules();
-		yield setIsUpdating( true );
+		yield setIsUpdating( settings.name, true );
 		if ( originalData.data?.[ settings.name ]?.activated !== settings.active ) {
 			yield setJetpackModules( originalData );
 		}
@@ -33,7 +34,7 @@ export function* updateJetpackModuleStatus( settings ) {
 		yield setJetpackModules( oldSettings );
 		return false;
 	} finally {
-		yield setIsUpdating( false );
+		yield setIsUpdating( settings.name, false );
 	}
 }
 
@@ -74,11 +75,12 @@ function setIsLoading( isLoading ) {
 /**
  * Set modules as updating action
  *
+ * @param {string} name - Name of the module.
  * @param {boolean} isUpdating - If the modules are updating or not.
  * @returns {object} - an action object.
  */
-function setIsUpdating( isUpdating ) {
-	return setJetpackModules( { isUpdating } );
+function setIsUpdating( name, isUpdating ) {
+	return { type: SET_MODULE_UPDATING, name, isUpdating };
 }
 
 /**

package/src/modules-state/index.js

@@ -1,4 +1,4 @@
-import { createReduxStore, register } from '@wordpress/data';
+import { createReduxStore, register, dispatch } from '@wordpress/data';
 import actions from './actions';
 import controls from './controls';
 import reducer from './reducer';
@@ -6,7 +6,6 @@ import resolvers from './resolvers';
 import selectors from './selectors';
 
 export const JETPACK_MODULES_STORE_ID = 'jetpack-modules';
-
 const store = createReduxStore( JETPACK_MODULES_STORE_ID, {
 	reducer,
 	actions,
@@ -14,4 +13,18 @@ const store = createReduxStore( JETPACK_MODULES_STORE_ID, {
 	resolvers,
 	selectors,
 } );
+
 register( store );
+
+const initialData =
+	window?.Initial_State?.getModules || // Jetpack Dashboard
+	window?.Jetpack_Editor_Initial_State?.modules || // Gutenberg
+	null;
+
+// This is a temporary fix to have store filled properly.
+// TODO: Create a proper solution after fixing initial issue (https://github.com/Automattic/jetpack/issues/34793).
+if ( initialData !== null ) {
+	dispatch( JETPACK_MODULES_STORE_ID ).setJetpackModules( {
+		data: { ...initialData },
+	} );
+}

package/src/modules-state/reducer.js

@@ -1,6 +1,6 @@
 const defaultState = {
 	isLoading: false,
-	isUpdating: false,
+	isUpdating: {},
 	data: {},
 };
 
@@ -11,6 +11,16 @@ const setModulesData = ( state = defaultState, action ) => {
 				...state,
 				...action.options,
 			};
+		case 'SET_MODULE_UPDATING':
+			return {
+				...state,
+				...{
+					isUpdating: {
+						...state.isUpdating,
+						[ action.name ]: action.isUpdating,
+					},
+				},
+			};
 	}
 	return state;
 };

package/src/modules-state/resolvers.js

@@ -1,4 +1,4 @@
-import { setJetpackModules, fetchModules } from './actions';
+import { setJetpackModules } from './actions';
 import { fetchJetpackModules } from './controls';
 
 /**
@@ -18,13 +18,4 @@ export function* getJetpackModules() {
 	}
 }
 
-/**
- * When requesting data on particular module
- * we want to make sure to have the latest state
- * @returns {boolean} - if action was completed successfully.
- */
-export function isModuleActive() {
-	return fetchModules();
-}
-
-export default { getJetpackModules, isModuleActive };
+export default { getJetpackModules };

package/src/modules-state/selectors.js

@@ -7,7 +7,7 @@ const jetpackModulesSelectors = {
 	isModuleActive: ( state, moduleName ) =>
 		isSimpleSite() || ( state?.data?.[ moduleName ]?.activated ?? false ),
 	areModulesLoading: state => state.isLoading ?? false,
-	areModulesUpdating: state => state.isUpdating ?? false,
+	isModuleUpdating: ( state, moduleName ) => state?.isUpdating?.[ moduleName ] ?? false,
 };
 
 export default jetpackModulesSelectors;