Forms: Optimize counts with caching and shared state

Author: lezama

projects/packages/forms/src/contact-form/class-contact-form-endpoint.php

@@ -341,6 +341,22 @@ static function ( $post_id ) {
 	 * @param WP_REST_Request $request Full data about the request.
 	 * @return WP_REST_Response Response object on success.
 	 */
+	/**
+	 * Clears the cached status counts for the default view.
+	 * Called when feedback items are created, updated, or deleted.
+	 */
+	private function clear_status_counts_cache() {
+		delete_transient( 'jetpack_forms_status_counts_default' );
+	}
+
+	/**
+	 * Get status counts for feedback items.
+	 * Returns inbox, spam, and trash counts with optional filtering.
+	 * Only caches the default view (no filters) for performance.
+	 *
+	 * @param WP_REST_Request $request Full data about the request.
+	 * @return WP_REST_Response Response object on success.
+	 */
 	public function get_status_counts( $request ) {
 		global $wpdb;
 
@@ -349,10 +365,12 @@ public function get_status_counts( $request ) {
 		$before = $request->get_param( 'before' );
 		$after  = $request->get_param( 'after' );
 
-		$cache_key     = 'jetpack_forms_status_counts_' . md5( wp_json_encode( compact( 'search', 'parent', 'before', 'after' ) ) );
-		$cached_result = get_transient( $cache_key );
-		if ( false !== $cached_result ) {
-			return rest_ensure_response( $cached_result );
+		$is_default_view = empty( $search ) && empty( $parent ) && empty( $before ) && empty( $after );
+		if ( $is_default_view ) {
+			$cached_result = get_transient( 'jetpack_forms_status_counts_default' );
+			if ( false !== $cached_result ) {
+				return rest_ensure_response( $cached_result );
+			}
 		}
 
 		$where_conditions = array( $wpdb->prepare( 'post_type = %s', 'feedback' ) );
@@ -399,7 +417,9 @@ public function get_status_counts( $request ) {
 			'trash' => (int) ( $counts['trash'] ?? 0 ),
 		);
 
-		set_transient( $cache_key, $result, 30 );
+		if ( $is_default_view ) {
+			set_transient( 'jetpack_forms_status_counts_default', $result, 30 );
+		}
 
 		return rest_ensure_response( $result );
 	}
@@ -595,6 +615,21 @@ public function get_item_schema() {
 		return $this->add_additional_fields_schema( $this->schema );
 	}
 
+	/**
+	 * Deletes the item.
+	 * Overrides the parent method to clear cached counts when an item is deleted.
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function delete_item( $request ) {
+		$result = parent::delete_item( $request );
+		if ( ! is_wp_error( $result ) ) {
+			$this->clear_status_counts_cache();
+		}
+		return $result;
+	}
+
 	/**
 	 * Updates the item.
 	 * Overrides the parent method to resend the email when the item is updated from spam to publish.
@@ -620,6 +655,8 @@ public function update_item( $request ) {
 				do_action( 'contact_form_akismet', 'ham', $akismet_values );
 				$this->resend_email( $post_id );
 			}
+			// Clear cached counts when status changes
+			$this->clear_status_counts_cache();
 		}
 		return $updated_item;
 	}
@@ -837,6 +874,10 @@ public function delete_posts_by_status( $request ) { //phpcs:ignore VariableAnal
 			++$deleted;
 		}
 
+		if ( $deleted > 0 ) {
+			$this->clear_status_counts_cache();
+		}
+
 		return new WP_REST_Response( array( 'deleted' => $deleted ), 200 );
 	}
 
@@ -855,6 +896,7 @@ private function bulk_action_mark_as_spam( $post_ids ) {
 				get_post_meta( $post_id, '_feedback_akismet_values', true )
 			);
 		}
+		$this->clear_status_counts_cache();
 		return new WP_REST_Response( array(), 200 );
 	}
 
@@ -873,6 +915,7 @@ private function bulk_action_mark_as_not_spam( $post_ids ) {
 				get_post_meta( $post_id, '_feedback_akismet_values', true )
 			);
 		}
+		$this->clear_status_counts_cache();
 		return new WP_REST_Response( array(), 200 );
 	}
 

projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts

@@ -49,6 +49,7 @@ interface UseInboxDataReturn {
 	currentQuery: Record< string, unknown >;
 	setCurrentQuery: ( query: Record< string, unknown > ) => void;
 	filterOptions: Record< string, unknown >;
+	updateCountsOptimistically: ( fromStatus: string, toStatus: string, count?: number ) => void;
 }
 
 const RESPONSE_FIELDS = [
@@ -74,16 +75,28 @@ const RESPONSE_FIELDS = [
  */
 export default function useInboxData(): UseInboxDataReturn {
 	const [ searchParams ] = useSearchParams();
-	const { setCurrentQuery, setSelectedResponses } = useDispatch( dashboardStore );
+	const { setCurrentQuery, setSelectedResponses, setCounts, updateCountsOptimistically } =
+		useDispatch( dashboardStore );
 	const urlStatus = searchParams.get( 'status' );
 	const statusFilter = getStatusFilter( urlStatus );
 
-	const { selectedResponsesCount, currentStatus, currentQuery, filterOptions } = useSelect(
+	const {
+		selectedResponsesCount,
+		currentStatus,
+		currentQuery,
+		filterOptions,
+		totalItemsInbox,
+		totalItemsSpam,
+		totalItemsTrash,
+	} = useSelect(
 		select => ( {
 			selectedResponsesCount: select( dashboardStore ).getSelectedResponsesCount(),
 			currentStatus: select( dashboardStore ).getCurrentStatus(),
 			currentQuery: select( dashboardStore ).getCurrentQuery(),
 			filterOptions: select( dashboardStore ).getFilters(),
+			totalItemsInbox: select( dashboardStore ).getInboxCount(),
+			totalItemsSpam: select( dashboardStore ).getSpamCount(),
+			totalItemsTrash: select( dashboardStore ).getTrashCount(),
 		} ),
 		[]
 	);
@@ -100,7 +113,6 @@ export default function useInboxData(): UseInboxDataReturn {
 
 	const records = ( rawRecords || [] ) as FormResponse[];
 
-	const [ counts, setCounts ] = useState( { inbox: 0, spam: 0, trash: 0 } );
 	const [ isLoadingCounts, setIsLoadingCounts ] = useState( false );
 
 	useEffect( () => {
@@ -128,12 +140,18 @@ export default function useInboxData(): UseInboxDataReturn {
 		};
 
 		fetchCounts();
-	}, [ currentQuery?.search, currentQuery?.parent, currentQuery?.before, currentQuery?.after ] );
+	}, [
+		currentQuery?.search,
+		currentQuery?.parent,
+		currentQuery?.before,
+		currentQuery?.after,
+		setCounts,
+	] );
 
 	return {
-		totalItemsInbox: counts.inbox,
-		totalItemsSpam: counts.spam,
-		totalItemsTrash: counts.trash,
+		totalItemsInbox,
+		totalItemsSpam,
+		totalItemsTrash,
 		records,
 		isLoadingData: isLoadingRecordsData,
 		isLoadingCounts,
@@ -146,5 +164,6 @@ export default function useInboxData(): UseInboxDataReturn {
 		currentQuery,
 		setCurrentQuery,
 		filterOptions,
+		updateCountsOptimistically,
 	};
 }

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -118,6 +118,7 @@ export default function InboxView() {
 		isLoadingData,
 		totalItems,
 		totalPages,
+		updateCountsOptimistically,
 	} = useInboxData();
 
 	const queryArgs = useMemo( () => {
@@ -301,12 +302,34 @@ export default function InboxView() {
 	);
 
 	const actions = useMemo( () => {
+		// Wrap actions with optimistic updates
+		const wrapActionWithOptimisticUpdate = ( action, toStatus ) => ( {
+			...action,
+			async callback( items, context ) {
+				// statusFilter represents the current view: 'draft,publish' (inbox), 'spam', or 'trash'
+				// For inbox, we need to map to individual status from items
+				const fromStatus = statusFilter === 'draft,publish' ? items[ 0 ]?.status : statusFilter;
+				// Optimistically update counts
+				updateCountsOptimistically( fromStatus, toStatus, items.length );
+				// Call original action
+				return action.callback( items, context );
+			},
+		} );
+
 		const _actions = [
-			markAsSpamAction,
-			markAsNotSpamAction,
-			moveToTrashAction,
-			restoreAction,
-			deleteAction,
+			wrapActionWithOptimisticUpdate( markAsSpamAction, 'spam' ),
+			wrapActionWithOptimisticUpdate( markAsNotSpamAction, 'publish' ),
+			wrapActionWithOptimisticUpdate( moveToTrashAction, 'trash' ),
+			wrapActionWithOptimisticUpdate( restoreAction, 'publish' ),
+			{
+				...deleteAction,
+				async callback( items, context ) {
+					const fromStatus = statusFilter === 'draft,publish' ? items[ 0 ]?.status : statusFilter;
+					// Optimistically update counts (permanent delete, no toStatus)
+					updateCountsOptimistically( fromStatus, 'deleted', items.length );
+					return deleteAction.callback( items, context );
+				},
+			},
 		];
 		if ( isMobile ) {
 			_actions.unshift( viewActionModal );
@@ -322,7 +345,7 @@ export default function InboxView() {
 			} );
 		}
 		return _actions;
-	}, [ isMobile, onChangeSelection, selection ] );
+	}, [ isMobile, onChangeSelection, selection, updateCountsOptimistically, statusFilter ] );
 
 	const resetPage = useCallback( () => {
 		view.page = 1;

projects/packages/forms/src/dashboard/store/action-types.js

@@ -2,3 +2,4 @@ export const RECEIVE_FILTERS = 'RECEIVE_FILTERS';
 export const INVALIDATE_FILTERS = 'INVALIDATE_FILTERS';
 export const SET_CURRENT_QUERY = 'SET_CURRENT_QUERY';
 export const SET_SELECTED_RESPONSES = 'SET_SELECTED_RESPONSES';
+export const SET_COUNTS = 'SET_COUNTS';

projects/packages/forms/src/dashboard/store/actions.js

@@ -7,6 +7,7 @@ import {
 	RECEIVE_FILTERS,
 	SET_CURRENT_QUERY,
 	INVALIDATE_FILTERS,
+	SET_COUNTS,
 } from './action-types';
 
 /**
@@ -52,6 +53,19 @@ export function setCurrentQuery( currentQuery ) {
 	};
 }
 
+/**
+ * Set the status counts.
+ *
+ * @param {object} counts - The counts object with inbox, spam, and trash.
+ * @return {object} Action object.
+ */
+export function setCounts( counts ) {
+	return {
+		type: SET_COUNTS,
+		counts,
+	};
+}
+
 /**
  * Performs a bulk action on responses.
  *

projects/packages/forms/src/dashboard/store/reducer.js

@@ -6,7 +6,12 @@ import { isEqual } from 'lodash';
 /**
  * Internal dependencies
  */
-import { SET_SELECTED_RESPONSES, RECEIVE_FILTERS, SET_CURRENT_QUERY } from './action-types';
+import {
+	SET_SELECTED_RESPONSES,
+	RECEIVE_FILTERS,
+	SET_CURRENT_QUERY,
+	SET_COUNTS,
+} from './action-types';
 
 const filters = ( state = {}, action ) => {
 	if ( action.type === RECEIVE_FILTERS ) {
@@ -29,8 +34,16 @@ const selectedResponsesFromCurrentDataset = ( state = [], action ) => {
 	return state;
 };
 
+const counts = ( state = { inbox: 0, spam: 0, trash: 0 }, action ) => {
+	if ( action.type === SET_COUNTS ) {
+		return action.counts;
+	}
+	return state;
+};
+
 export default combineReducers( {
 	selectedResponsesFromCurrentDataset,
 	filters,
 	currentQuery,
+	counts,
 } );

projects/packages/forms/src/dashboard/store/selectors.js

@@ -4,3 +4,7 @@ export const getCurrentStatus = state => state.currentQuery?.status ?? 'draft,pu
 export const getSelectedResponsesFromCurrentDataset = state =>
 	state.selectedResponsesFromCurrentDataset;
 export const getSelectedResponsesCount = state => state.selectedResponsesFromCurrentDataset.length;
+export const getCounts = state => state.counts;
+export const getInboxCount = state => state.counts.inbox;
+export const getSpamCount = state => state.counts.spam;
+export const getTrashCount = state => state.counts.trash;