🔥 Remove isSaving; move isBusy to common store

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js

@@ -7,11 +7,11 @@ import { store as noticesStore } from '@wordpress/notices';
 import SettingsToggleBlock from '../../../ReusableComponents/SettingsToggleBlock';
 import Separator from '../../../ReusableComponents/Separator';
 import DataStoreControl from '../../../ReusableComponents/DataStoreControl';
-import { OnboardingHooks } from '../../../../data';
+import { OnboardingHooks, CommonHooks } from '../../../../data';
 
 const AdvancedOptionsForm = ( { setCompleted } ) => {
+	const { isBusy } = CommonHooks.useBusyState();
 	const {
-		isBusy,
 		isSandboxMode,
 		setSandboxMode,
 		isManualConnectionMode,

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js

@@ -22,8 +22,8 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => {
 		}
 	};
 
-	const { products, toggleProduct } = OnboardingHooks.useProducts();
-	const { isCasualSeller, setIsCasualSeller } = OnboardingHooks.useBusiness();
+	const { products } = OnboardingHooks.useProducts();
+	const { isCasualSeller } = OnboardingHooks.useBusiness();
 
 	let navigationTitle = '';
 	let disabled = false;

modules/ppcp-settings/resources/js/data/common/hooks.js

@@ -22,3 +22,13 @@ const usePersistent = ( key ) =>
 		( select ) => select( STORE_NAME ).persistentData()?.[ key ],
 		[ key ]
 	);
+
+export const useBusyState = () => {
+	const { setIsBusy } = useDispatch( STORE_NAME );
+	const isBusy = useTransient( 'isBusy' );
+
+	return {
+		isBusy,
+		setIsBusy: useCallback( ( busy ) => setIsBusy( busy ), [ setIsBusy ] ),
+	};
+};

modules/ppcp-settings/resources/js/data/common/reducer.js

@@ -14,7 +14,6 @@ import ACTION_TYPES from './action-types';
 
 const defaultTransient = {
 	isReady: false,
-	isSaving: false,
 	isBusy: false,
 };
 

modules/ppcp-settings/resources/js/data/onboarding/actions.js

@@ -36,28 +36,6 @@ export const setIsReady = ( isReady ) => ( {
 	payload: { isReady },
 } );
 
-/**
- * Transient. Changes the "saving" flag.
- *
- * @param {boolean} isSaving
- * @return {Action} The action.
- */
-export const setIsSaving = ( isSaving ) => ( {
-	type: ACTION_TYPES.SET_TRANSIENT,
-	payload: { isSaving },
-} );
-
-/**
- * Transient. Changes the "manual connection is busy" flag.
- *
- * @param {boolean} isBusy
- * @return {Action} The action.
- */
-export const setIsBusy = ( isBusy ) => ( {
-	type: ACTION_TYPES.SET_TRANSIENT,
-	payload: { isBusy },
-} );
-
 /**
  * Persistent. Set the full onboarding details, usually during app initialization.
  *
@@ -165,9 +143,7 @@ export const setProducts = ( products ) => ( {
 export const persist = function* () {
 	const data = yield select( STORE_NAME ).persistentData();
 
-	yield setIsSaving( true );
 	yield { type: ACTION_TYPES.DO_PERSIST_DATA, data };
-	yield setIsSaving( false );
 };
 
 /**
@@ -179,15 +155,12 @@ export const connectViaIdAndSecret = function* () {
 	const { clientId, clientSecret, useSandbox } =
 		yield select( STORE_NAME ).persistentData();
 
-	yield setIsBusy( true );
-
 	const result = yield {
 		type: ACTION_TYPES.DO_MANUAL_CONNECTION,
 		clientId,
 		clientSecret,
 		useSandbox,
 	};
-	yield setIsBusy( false );
 
 	return result;
 };

modules/ppcp-settings/resources/js/data/onboarding/hooks.js

@@ -41,9 +41,7 @@ const useOnboardingDetails = () => {
 	const flags = useSelect( ( select ) => select( STORE_NAME ).flags(), [] );
 
 	// Transient accessors.
-	const isSaving = useTransient( 'isSaving' );
 	const isReady = useTransient( 'isReady' );
-	const isBusy = useTransient( 'isBusy' );
 
 	// Persistent accessors.
 	const step = usePersistent( 'step' );
@@ -68,9 +66,8 @@ const useOnboardingDetails = () => {
 	};
 
 	return {
-		isSaving,
+		flags,
 		isReady,
-		isBusy,
 		step,
 		setStep: ( value ) => setDetailAndPersist( setStep, value ),
 		completed,
@@ -91,14 +88,11 @@ const useOnboardingDetails = () => {
 			setDetailAndPersist( setIsCasualSeller, value ),
 		products,
 		toggleProduct,
-		flags,
 	};
 };
 
 export const useConnection = () => {
 	const {
-		isSaving,
-		isBusy,
 		isSandboxMode,
 		setSandboxMode,
 		isManualConnectionMode,
@@ -110,8 +104,6 @@ export const useConnection = () => {
 	} = useOnboardingDetails();
 
 	return {
-		isSaving,
-		isBusy,
 		isSandboxMode,
 		setSandboxMode,
 		isManualConnectionMode,

modules/ppcp-settings/resources/js/data/onboarding/reducer.js

@@ -14,8 +14,6 @@ import ACTION_TYPES from './action-types';
 
 const defaultTransient = {
 	isReady: false,
-	isSaving: false,
-	isBusy: false,
 
 	// Read only values, provided by the server.
 	flags: {