Updating badge for tasks that complete with no page refresh

Joel T · Joel T · commit 48bccc1fbe0b · 2022-04-25T15:13:44.000-07:00
diff --git a/plugins/woocommerce-admin/client/tasks/task.tsx b/plugins/woocommerce-admin/client/tasks/task.tsx
@@ -25,6 +25,19 @@ export const Task: React.FC< TaskProps > = ( { query, task } ) => {
 		optimisticallyCompleteTask,
 	} = useDispatch( ONBOARDING_STORE_NAME );
 
+	const updateBadge = useCallback( () => {
+		const badgeElement: HTMLElement | null = document.querySelector(
+			'.toplevel_page_woocommerce .remaining-tasks-badge'
+		);
+
+		if ( ! badgeElement ) {
+			return;
+		}
+
+		const currentBadgeCount = Number( badgeElement.innerText );
+		badgeElement.innerHTML = String( currentBadgeCount - 1 );
+	}, [] );
+
 	const onComplete = useCallback(
 		( options ) => {
 			optimisticallyCompleteTask( id );
@@ -34,6 +47,7 @@ export const Task: React.FC< TaskProps > = ( { query, task } ) => {
 					: getNewPath( {}, '/', {} )
 			);
 			invalidateResolutionForStoreSelector( 'getTaskLists' );
+			updateBadge();
 		},
 		[ id ]
 	);
diff --git a/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php b/plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php
@@ -507,7 +507,7 @@ public static function menu_task_count() {
 
 		foreach ( $submenu['woocommerce'] as $key => $menu_item ) {
 			if ( 0 === strpos( $menu_item[0], _x( 'Home', 'Admin menu name', 'woocommerce' ) ) ) {
-				$submenu['woocommerce'][ $key ][0] .= ' <span class="awaiting-mod update-plugins count-' . esc_attr( $tasks_count ) . '">' . number_format_i18n( $tasks_count ) . '</span>'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+				$submenu['woocommerce'][ $key ][0] .= ' <span class="awaiting-mod update-plugins remaining-tasks-badge count-' . esc_attr( $tasks_count ) . '">' . number_format_i18n( $tasks_count ) . '</span>'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
 				break;
 			}
 		}

Original file line number	Diff line number	Diff line change
`@@ -507,7 +507,7 @@ public static function menu_task_count() {`
`507`	`507`
`508`	`508`	`foreach ( $submenu['woocommerce'] as $key => $menu_item ) {`
`509`	`509`	`if ( 0 === strpos( $menu_item[0], _x( 'Home', 'Admin menu name', 'woocommerce' ) ) ) {`
`510`		`- $submenu['woocommerce'][ $key ][0] .= ' <span class="awaiting-mod update-plugins count-' . esc_attr( $tasks_count ) . '">' . number_format_i18n( $tasks_count ) . '</span>'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited`
	`510`	`+ $submenu['woocommerce'][ $key ][0] .= ' <span class="awaiting-mod update-plugins remaining-tasks-badge count-' . esc_attr( $tasks_count ) . '">' . number_format_i18n( $tasks_count ) . '</span>'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited`
`511`	`511`	`break;`
`512`	`512`	`}`
`513`	`513`	`}`