From e5f83756ab7b71d8219e256317bacfcb4fa5013a Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 17 Feb 2025 13:33:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Convert=20todo-store=20hoo?=
 =?UTF-8?q?ks=20to=20new=20code=20pattern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/todos/hooks.js          | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/todos/hooks.js b/modules/ppcp-settings/resources/js/data/todos/hooks.js
index 7fc5da5c1..79fc2e19a 100644
--- a/modules/ppcp-settings/resources/js/data/todos/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/todos/hooks.js
@@ -10,6 +10,31 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { STORE_NAME } from './constants';
 import { createHooksForStore } from '../utils';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * 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 ensureArray = ( value ) => {
 	if ( ! value ) {
@@ -19,12 +44,8 @@ const ensureArray = ( value ) => {
 };
 
 const useHooks = () => {
-	const { useTransient } = createHooksForStore( STORE_NAME );
-	const { fetchTodos, setDismissedTodos, setCompletedTodos, persist } =
-		useDispatch( STORE_NAME );
-
-	// Read-only flags and derived state.
-	const [ isReady ] = useTransient( 'isReady' );
+	const { dispatch } = useStoreData();
+	const { fetchTodos, setDismissedTodos, setCompletedTodos } = dispatch;
 
 	// Get todos data from store
 	const { todos, dismissedTodos, completedTodos } = useSelect( ( select ) => {
@@ -62,8 +83,6 @@ const useHooks = () => {
 	);
 
 	return {
-		persist,
-		isReady,
 		todos: filteredTodos,
 		dismissedTodos,
 		completedTodos,
@@ -74,8 +93,11 @@ const useHooks = () => {
 };
 
 export const useStore = () => {
-	const { persist, isReady } = useHooks();
-	return { persist, isReady };
+	const { dispatch, useTransient } = useStoreData();
+	const { persist, refresh } = dispatch;
+	const [ isReady ] = useTransient( 'isReady' );
+
+	return { persist, refresh, isReady };
 };
 
 export const useTodos = () => {