8218b111533b92ec47f94130a94bcd0102263a45

Committed 01 Dec 2025 09:48AM UTC coverage: 53.092%. First build

Build # 8218b111533b92ec47f94130a94bcd0102263a45

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #22759 from Yoast/feature/task-list

Feature/task list

Run Details

8697 of 16050 branches covered (54.19%)

Branch coverage included in aggregate %.

98 of 605 new or added lines in 51 files covered. (16.2%)

32413 of 61381 relevant lines covered (52.81%)

46976.02 hits per line

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

7.69

/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, resetTaskError } = 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,
        };

        const handleOnOpen = useCallback( () => {
                resetTaskError( id );
                toggleOpen();
        }, [ toggleOpen ] );

        return <TaskRow
                title={ title }
                duration={ duration }
                priority={ priority }
                isCompleted={ isCompleted }
                onClick={ handleOnOpen }
                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, resetTaskError } = 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	};
45
NEW 46	const handleOnOpen = useCallback( () => {	×
NEW 47	resetTaskError( id );	×
NEW 48	toggleOpen();	×
49	}, [ toggleOpen ] );
50
NEW 51	return <TaskRow	×
52	title={ title }
53	duration={ duration }
54	priority={ priority }
55	isCompleted={ isCompleted }
56	onClick={ handleOnOpen }
57	badge={ badge }
58	>
59	<TaskModal
60	isOpen={ isOpen }
61	onClose={ toggleOpen }
62	title={ title }
63	duration={ duration }
64	priority={ priority }
65	why={ why }
66	how={ how }
67	isCompleted={ isCompleted }
68	taskId={ id }
69	callToAction={ callToActionProps }
70	isLoading={ status === ASYNC_ACTION_STATUS.loading }
71	isError={ status === ASYNC_ACTION_STATUS.error }
72	errorMessage={ errorMessage }
73	/>
74	</TaskRow>;
75	};

Yoast / wordpress-seo / 8218b111533b92ec47f94130a94bcd0102263a45

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