From 77ed657394ff35a6275faa0c4769c131e401279f Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 17 Jan 2025 19:25:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Apple=20new=20code=20style?=
 =?UTF-8?q?=20to=20common=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/common/actions.js       | 58 ++++++++++---------
 .../resources/js/data/common/hooks.js         | 28 +++------
 2 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js
index 8f2b14812..cf7837d54 100644
--- a/modules/ppcp-settings/resources/js/data/common/actions.js
+++ b/modules/ppcp-settings/resources/js/data/common/actions.js
@@ -36,16 +36,37 @@ export const hydrate = ( payload ) => ( {
 	payload,
 } );
 
+/**
+ * Generic transient-data updater.
+ *
+ * @param {string} prop  Name of the property to update.
+ * @param {any}    value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setTransient = ( prop, value ) => ( {
+	type: ACTION_TYPES.SET_TRANSIENT,
+	payload: { [ prop ]: value },
+} );
+
+/**
+ * Generic persistent-data updater.
+ *
+ * @param {string} prop  Name of the property to update.
+ * @param {any}    value The new value of the property.
+ * @return {Action} The action.
+ */
+export const setPersistent = ( prop, value ) => ( {
+	type: ACTION_TYPES.SET_PERSISTENT,
+	payload: { [ prop ]: value },
+} );
+
 /**
  * Transient. Marks the onboarding details as "ready", i.e., fully initialized.
  *
  * @param {boolean} isReady
  * @return {Action} The action.
  */
-export const setIsReady = ( isReady ) => ( {
-	type: ACTION_TYPES.SET_TRANSIENT,
-	payload: { isReady },
-} );
+export const setIsReady = ( isReady ) => setTransient( 'isReady', isReady );
 
 /**
  * Transient. Sets the active settings tab.
@@ -53,21 +74,8 @@ export const setIsReady = ( isReady ) => ( {
  * @param {string} activeModal
  * @return {Action} The action.
  */
-export const setActiveModal = ( activeModal ) => ( {
-	type: ACTION_TYPES.SET_TRANSIENT,
-	payload: { activeModal },
-} );
-
-/**
- * Transient. Changes the "saving" flag.
- *
- * @param {boolean} isSaving
- * @return {Action} The action.
- */
-export const setIsSaving = ( isSaving ) => ( {
-	type: ACTION_TYPES.SET_TRANSIENT,
-	payload: { isSaving },
-} );
+export const setActiveModal = ( activeModal ) =>
+	setTransient( 'activeModal', activeModal );
 
 /**
  * Transient (Activity): Marks the start of an async activity
@@ -107,10 +115,8 @@ export const stopActivity = ( id ) => ( {
  * @param {boolean} useSandbox
  * @return {Action} The action.
  */
-export const setSandboxMode = ( useSandbox ) => ( {
-	type: ACTION_TYPES.SET_PERSISTENT,
-	payload: { useSandbox },
-} );
+export const setSandboxMode = ( useSandbox ) =>
+	setPersistent( 'useSandbox', useSandbox );
 
 /**
  * Persistent. Toggles the "Manual Connection" mode on or off.
@@ -118,10 +124,8 @@ export const setSandboxMode = ( useSandbox ) => ( {
  * @param {boolean} useManualConnection
  * @return {Action} The action.
  */
-export const setManualConnectionMode = ( useManualConnection ) => ( {
-	type: ACTION_TYPES.SET_PERSISTENT,
-	payload: { useManualConnection },
-} );
+export const setManualConnectionMode = ( useManualConnection ) =>
+	setPersistent( 'useManualConnection', useManualConnection );
 
 /**
  * Side effect. Saves the persistent details to the WP database.
diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js
index 8fcf3f6a9..796d1c50c 100644
--- a/modules/ppcp-settings/resources/js/data/common/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/common/hooks.js
@@ -9,41 +9,31 @@
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
+
+import { createHooksForStore } from '../utils';
 import { STORE_NAME } from './constants';
 
-const useTransient = ( key ) =>
-	useSelect(
-		( select ) => select( STORE_NAME ).transientData()?.[ key ],
-		[ key ]
-	);
-
-const usePersistent = ( key ) =>
-	useSelect(
-		( select ) => select( STORE_NAME ).persistentData()?.[ key ],
-		[ key ]
-	);
-
 const useHooks = () => {
+	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
 	const {
 		persist,
-		setSandboxMode,
-		setManualConnectionMode,
 		sandboxOnboardingUrl,
 		productionOnboardingUrl,
 		authenticateWithCredentials,
 		authenticateWithOAuth,
-		setActiveModal,
 		startWebhookSimulation,
 		checkWebhookSimulationState,
 	} = useDispatch( STORE_NAME );
 
 	// Transient accessors.
-	const isReady = useTransient( 'isReady' );
-	const activeModal = useTransient( 'activeModal' );
+	const [ isReady ] = useTransient( 'isReady' );
+	const [ activeModal, setActiveModal ] = useTransient( 'activeModal' );
 
 	// Persistent accessors.
-	const isSandboxMode = usePersistent( 'useSandbox' );
-	const isManualConnectionMode = usePersistent( 'useManualConnection' );
+	const [ isSandboxMode, setSandboxMode ] = usePersistent( 'useSandbox' );
+	const [ isManualConnectionMode, setManualConnectionMode ] = usePersistent(
+		'useManualConnection'
+	);
 	const merchant = useSelect(
 		( select ) => select( STORE_NAME ).merchant(),
 		[]