♻️ Convert common hooks to new code pattern

This commit is contained in:
Philipp Stracker 2025-02-17 13:21:56 +01:00
parent 85360ab7f1
commit 161df3a85f
No known key found for this signature in database

View file

@ -13,8 +13,32 @@ import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
import { createHooksForStore } from '../utils';
import { STORE_NAME } from './constants';
const useHooks = () => {
/**
* Single source of truth for access Redux details.
*
* This hook returns a stable API to access actions, selectors and special hooks to generate
* getter- and setters for transient or persistent properties.
*
* @return {{select, dispatch, useTransient, usePersistent}} Store data API.
*/
const useStoreData = () => {
const select = useSelect( ( selectors ) => selectors( STORE_NAME ), [] );
const dispatch = useDispatch( STORE_NAME );
const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
return useMemo(
() => ( {
select,
dispatch,
useTransient,
usePersistent,
} ),
[ select, dispatch, useTransient, usePersistent ]
);
};
const useHooks = () => {
const { useTransient, usePersistent, dispatch, select } = useStoreData();
const {
persist,
sandboxOnboardingUrl,
@ -23,7 +47,7 @@ const useHooks = () => {
authenticateWithOAuth,
startWebhookSimulation,
checkWebhookSimulationState,
} = useDispatch( STORE_NAME );
} = dispatch;
// Transient accessors.
const [ isReady ] = useTransient( 'isReady' );
@ -38,18 +62,9 @@ const useHooks = () => {
);
// Read-only properties.
const wooSettings = useSelect(
( select ) => select( STORE_NAME ).wooSettings(),
[]
);
const features = useSelect(
( select ) => select( STORE_NAME ).features(),
[]
);
const webhooks = useSelect(
( select ) => select( STORE_NAME ).webhooks(),
[]
);
const wooSettings = select.wooSettings();
const features = select.features();
const webhooks = select.webhooks();
const savePersistent = async ( setter, value ) => {
setter( value );
@ -82,6 +97,14 @@ const useHooks = () => {
};
};
export const useStore = () => {
const { dispatch, useTransient } = useStoreData();
const { persist, refresh } = dispatch;
const [ isReady ] = useTransient( 'isReady' );
return { persist, refresh, isReady };
};
export const useSandbox = () => {
const { isSandboxMode, setSandboxMode, sandboxOnboardingUrl } = useHooks();
@ -204,7 +227,9 @@ export const useActiveHighlight = () => {
return { activeHighlight, setActiveHighlight };
};
// -- Not using the `useHooks()` data provider --
/*
* Busy state management hooks
*/
export const useBusyState = () => {
const { startActivity, stopActivity } = useDispatch( STORE_NAME );