fix emptyspam/emptytrash buttons not clearing up the counts

Author: CGastrell

projects/packages/forms/src/dashboard/components/empty-spam-button/index.tsx

@@ -15,6 +15,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import useInboxData from '../../hooks/use-inbox-data';
+import { store as dashboardStore } from '../../store';
 
 type CoreStore = typeof coreStore & {
 	invalidateResolution: ( selector: string, args: unknown[] ) => void;
@@ -42,6 +43,7 @@ const EmptySpamButton = ( {
 	const [ isEmpty, setIsEmpty ] = useState( true );
 	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
 	const { invalidateResolution } = useDispatch( coreStore ) as unknown as CoreStore;
+	const { invalidateCounts } = useDispatch( dashboardStore );
 
 	// Use props if provided, otherwise use hook
 	const hookData = useInboxData();
@@ -103,12 +105,15 @@ const EmptySpamButton = ( {
 					'feedback',
 					{ ...currentQuery, per_page: 1, _fields: 'id' },
 				] );
+				// invalidate counts to refresh the counts across all status tabs
+				invalidateCounts();
 			} );
 	}, [
 		closeConfirmDialog,
 		createErrorNotice,
 		createSuccessNotice,
 		invalidateResolution,
+		invalidateCounts,
 		isEmpty,
 		isEmptying,
 		currentQuery,

projects/packages/forms/src/dashboard/components/empty-trash-button/index.tsx

@@ -15,6 +15,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import useInboxData from '../../hooks/use-inbox-data';
+import { store as dashboardStore } from '../../store';
 
 type CoreStore = typeof coreStore & {
 	invalidateResolution: ( selector: string, args: unknown[] ) => void;
@@ -42,6 +43,7 @@ const EmptyTrashButton = ( {
 	const [ isEmpty, setIsEmpty ] = useState( true );
 	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
 	const { invalidateResolution } = useDispatch( coreStore ) as unknown as CoreStore;
+	const { invalidateCounts } = useDispatch( dashboardStore );
 
 	// Use props if provided, otherwise use hook
 	const hookData = useInboxData();
@@ -103,12 +105,15 @@ const EmptyTrashButton = ( {
 					'feedback',
 					{ ...currentQuery, per_page: 1, _fields: 'id' },
 				] );
+				// invalidate counts to refresh the counts across all status tabs
+				invalidateCounts();
 			} );
 	}, [
 		closeConfirmDialog,
 		createErrorNotice,
 		createSuccessNotice,
 		invalidateResolution,
+		invalidateCounts,
 		isEmpty,
 		isEmptying,
 		currentQuery,

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

@@ -4,3 +4,4 @@ export const SET_CURRENT_QUERY = 'SET_CURRENT_QUERY';
 export const SET_SELECTED_RESPONSES = 'SET_SELECTED_RESPONSES';
 export const SET_COUNTS = 'SET_COUNTS';
 export const UPDATE_COUNTS_OPTIMISTICALLY = 'UPDATE_COUNTS_OPTIMISTICALLY';
+export const INVALIDATE_COUNTS = 'INVALIDATE_COUNTS';

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

@@ -9,6 +9,7 @@ import {
 	INVALIDATE_FILTERS,
 	SET_COUNTS,
 	UPDATE_COUNTS_OPTIMISTICALLY,
+	INVALIDATE_COUNTS,
 } from './action-types';
 
 /**
@@ -30,6 +31,15 @@ export const invalidateFilters = () => {
 	return { type: INVALIDATE_FILTERS };
 };
 
+/**
+ * Invalidate the counts when responses are deleted.
+ *
+ * @return {object} Action object.
+ */
+export const invalidateCounts = () => {
+	return { type: INVALIDATE_COUNTS };
+};
+
 /**
  * Set the selected responses from current data set.
  *

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

@@ -1,6 +1,6 @@
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { INVALIDATE_FILTERS } from './action-types';
+import { INVALIDATE_FILTERS, INVALIDATE_COUNTS } from './action-types';
 
 export const getFilters =
 	() =>
@@ -39,3 +39,5 @@ export const getCounts =
 		const response = await apiFetch( { path } );
 		dispatch.setCounts( response );
 	};
+
+getCounts.shouldInvalidate = action => action.type === INVALIDATE_COUNTS;