woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

✨ New “isReady” flag to avoid invalid page content

Browse source 
Before this change, the onboarding wizard was briefly displayed on every page load
This commit is contained in:
Philipp Stracker 2024-10-28 18:57:39 +01:00
parent 6a80a016cf
commit 3d05c65f50
No known key found for this signature in database
6 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-settings/resources/js/Components/Screens/Settings.js
View file

@ -6,6 +6,11 @@ import Onboarding from './Onboarding/Onboarding';
const Settings = () => {
const onboardingProgress = useOnboardingStep();
if ( ! onboardingProgress.isReady ) {
// TODO: Use better loading state indicator.
return <div>Loading...</div>;
}
if ( ! onboardingProgress.completed ) {
return <Onboarding />;
}

1
modules/ppcp-settings/resources/js/data/onboarding/action-types.js
View file

@ -1,5 +1,6 @@
export default {
// Transient data.
SET_ONBOARDING_IS_READY: 'SET_ONBOARDING_IS_READY',
SET_IS_SAVING_ONBOARDING: 'SET_IS_SAVING_ONBOARDING',
// Persistent data.

13
modules/ppcp-settings/resources/js/data/onboarding/actions.js
View file

@ -3,6 +3,19 @@ import { apiFetch } from '@wordpress/data-controls';
import ACTION_TYPES from './action-types';
import { NAMESPACE, STORE_NAME } from '../constants';
/**
* Non-persistent. Marks the onboarding details as "ready", i.e., fully initialized.
*
* @param {boolean} isReady
* @return {{type: string, isReady}} The action.
*/
export const setIsReady = ( isReady ) => {
return {
type: ACTION_TYPES.SET_ONBOARDING_IS_READY,
isReady,
};
};
/**
* Non-persistent. Changes the "saving" flag.
*

5
modules/ppcp-settings/resources/js/data/onboarding/hooks.js
View file

@ -57,6 +57,10 @@ export const useOnboardingStep = () => {
const { persist, setOnboardingStep, setCompleted } =
useDispatch( STORE_NAME );
const isReady = useSelect( ( select ) => {
return select( STORE_NAME ).getTransientData().isReady;
} );
const step = useSelect( ( select ) => {
return select( STORE_NAME ).getPersistentData().step || 0;
} );
@ -71,6 +75,7 @@ export const useOnboardingStep = () => {
};
return {
isReady,
step,
setStep: ( value ) => setDetailAndPersist( setOnboardingStep, value ),
completed,

4
modules/ppcp-settings/resources/js/data/onboarding/reducer.js
View file

@ -1,6 +1,7 @@
import ACTION_TYPES from './action-types';
const defaultState = {
isReady: false,
isSaving: false,
data: {
completed: false,
@ -40,6 +41,9 @@ export const onboardingReducer = (
switch ( type ) {
// Transient data.
case ACTION_TYPES.SET_ONBOARDING_IS_READY:
return setTransient( { isReady: action.isReady } );
case ACTION_TYPES.SET_IS_SAVING_ONBOARDING:
return setTransient( { isSaving: action.isSaving } );

3
modules/ppcp-settings/resources/js/data/onboarding/resolvers.js
View file

@ -2,7 +2,7 @@ import { dispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { apiFetch } from '@wordpress/data-controls';
import { NAMESPACE } from '../constants';
import { setOnboardingDetails } from './actions';
import { setIsReady, setOnboardingDetails } from './actions';
/**
* Retrieve settings from the site's REST API.
@ -13,6 +13,7 @@ export function* getPersistentData() {
try {
const result = yield apiFetch( { path } );
yield setOnboardingDetails( result );
yield setIsReady( true );
} catch ( e ) {
yield dispatch( 'core/notices' ).createErrorNotice(
__(