bd247f26a35052d669a0ea62eafb073750740386

Committed 27 Nov 2025 11:26AM UTC coverage: 53.39% (+0.02%) from 53.366%

Build # bd247f26a35052d669a0ea62eafb073750740386

Build Type

Pull #22759

github

Committed by

web-flow

Commit Message

Merge pull request #22754 from Yoast/876-task-list-error-handling

876 task list error handling

Pull Request Pull Request #22759: Feature/task list

Run Details

8697 of 16037 branches covered (54.23%)

Branch coverage included in aggregate %.

92 of 168 new or added lines in 22 files covered. (54.76%)

201 existing lines in 5 files now uncovered.

32406 of 60950 relevant lines covered (53.17%)

47307.97 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.0

/packages/js/src/general/components/task.js

import { TaskRow, TaskModal } from "@yoast/dashboard-frontend";
import { useToggleState } from "@yoast/ui-library";
import { useCallback } from "@wordpress/element";
import { useDispatch, useSelect } from "@wordpress/data";
import { STORE_NAME } from "../constants";
import { ASYNC_ACTION_STATUS } from "../../shared-admin/constants";

/**
 * The Task component to display a task row and modal.
 *
 * @param {string} title The title of the task.
 * @param {string} id The ID of the task.
 * @param {string} how The how copy.
 * @param {string} why The why copy.
 * @param {number} duration The duration in minutes.
 * @param {string} priority The priority: 'low', 'medium', 'high'.
 * @param {boolean} isCompleted Whether the task is completed.
 * @param {Function} onClick Function to call when the row is clicked.
 * @param {Object} callToAction The call-to-action props object.
 * @param {string} [badge] An optional badge to display next to the task title: `premium`, `woo`, `ai`.
 *
 * @returns {JSX.Element} The Task component.
 */
export const Task = ( { title, id, how, why, duration, priority, isCompleted, callToAction, badge } ) => {
        const [ isOpen, toggleOpen ] = useToggleState( false );
        const { completeTask } = useDispatch( STORE_NAME );
        const { status, completeTaskEndpoint, nonce, errorMessage } = useSelect( ( select ) => {
                const state = select( STORE_NAME );
                return {
                        status: state.selectTaskStatus( id ),
                        errorMessage: state.selectTaskError( id ),
                        completeTaskEndpoint: state.selectTasksEndpoints().completeTask,
                        nonce: state.selectNonce(),
                };
        }, [] );

        const handleCompleteTask = useCallback( async() => {
                completeTask( id, completeTaskEndpoint, nonce );
        }, [ nonce ] );

        const callToActionProps = {
                onClick: handleCompleteTask,
                ...callToAction,
        };
        return <TaskRow
                title={ title }
                duration={ duration }
                priority={ priority }
                isCompleted={ isCompleted }
                onClick={ toggleOpen }
                badge={ badge }
        >
                <TaskModal
                        isOpen={ isOpen }
                        onClose={ toggleOpen }
                        title={ title }
                        duration={ duration }
                        priority={ priority }
                        why={ why }
                        how={ how }
                        isCompleted={ isCompleted }
                        taskId={ id }
                        callToAction={ callToActionProps }
                        isLoading={ status === ASYNC_ACTION_STATUS.loading }
                        isError={ status === ASYNC_ACTION_STATUS.error }
                        errorMessage={ errorMessage }
                />
        </TaskRow>;
};

1	import { TaskRow, TaskModal } from "@yoast/dashboard-frontend";
2	import { useToggleState } from "@yoast/ui-library";
3	import { useCallback } from "@wordpress/element";
4	import { useDispatch, useSelect } from "@wordpress/data";
5	import { STORE_NAME } from "../constants";
6	import { ASYNC_ACTION_STATUS } from "../../shared-admin/constants";
7
8	/**
9	* The Task component to display a task row and modal.
10	*
11	* @param {string} title The title of the task.
12	* @param {string} id The ID of the task.
13	* @param {string} how The how copy.
14	* @param {string} why The why copy.
15	* @param {number} duration The duration in minutes.
16	* @param {string} priority The priority: 'low', 'medium', 'high'.
17	* @param {boolean} isCompleted Whether the task is completed.
18	* @param {Function} onClick Function to call when the row is clicked.
19	* @param {Object} callToAction The call-to-action props object.
20	* @param {string} [badge] An optional badge to display next to the task title: `premium`, `woo`, `ai`.
21	*
22	* @returns {JSX.Element} The Task component.
23	*/
24	export const Task = ( { title, id, how, why, duration, priority, isCompleted, callToAction, badge } ) => {	2✔
NEW 25	const [ isOpen, toggleOpen ] = useToggleState( false );	×
NEW 26	const { completeTask } = useDispatch( STORE_NAME );	×
NEW 27	const { status, completeTaskEndpoint, nonce, errorMessage } = useSelect( ( select ) => {	×
NEW 28	const state = select( STORE_NAME );	×
NEW 29	return {	×
30	status: state.selectTaskStatus( id ),
31	errorMessage: state.selectTaskError( id ),
32	completeTaskEndpoint: state.selectTasksEndpoints().completeTask,
33	nonce: state.selectNonce(),
34	};
35	}, [] );
36
NEW 37	const handleCompleteTask = useCallback( async() => {	×
NEW 38	completeTask( id, completeTaskEndpoint, nonce );	×
39	}, [ nonce ] );
40
NEW 41	const callToActionProps = {	×
42	onClick: handleCompleteTask,
43	...callToAction,
44	};
NEW 45	return <TaskRow	×
46	title={ title }
47	duration={ duration }
48	priority={ priority }
49	isCompleted={ isCompleted }
50	onClick={ toggleOpen }
51	badge={ badge }
52	>
53	<TaskModal
54	isOpen={ isOpen }
55	onClose={ toggleOpen }
56	title={ title }
57	duration={ duration }
58	priority={ priority }
59	why={ why }
60	how={ how }
61	isCompleted={ isCompleted }
62	taskId={ id }
63	callToAction={ callToActionProps }
64	isLoading={ status === ASYNC_ACTION_STATUS.loading }
65	isError={ status === ASYNC_ACTION_STATUS.error }
66	errorMessage={ errorMessage }
67	/>
68	</TaskRow>;
69	};

Yoast / wordpress-seo / bd247f26a35052d669a0ea62eafb073750740386

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous