todo-list.tsx

todo-list.tsx

export const TodoList = () => {
	const todoList = getTodoList();

	useEffect(() => {
		const crudItems = document.querySelectorAll('app-crud-item');

		crudItems.forEach((item, idx) => {
			(item as any).todoItem = todoList[idx];
		});
	});

	return (
		<div className='todo-list'>
			{todoList.map((todoItem, i) => (
				<app-crud-item
					key={i}
					is-read-only={true}
					complete-btn-text='Complete'
				></app-crud-item>
			))}
		</div>
	);
};

const getTodoList = (): TodoItem[] => {
	const todoList = [];

	for (let index = 0; index < 5; index++) {
		const newTodo = {
			id: faker.random.uuid(),
			title: faker.random.words(2),
			description: faker.random.words(5),
		};

		todoList.push(newTodo);
	}
	return todoList;
};