import { useEffect, useState } from "react";
export const TaskList = ({ api, filter }) => {
const [tasks, setTasks] = useState([]);
const [newTitle, setNewTitle] = useState("");
useEffect(() => {
api.getTasks(filter).then((res) => setTasks(res));
const interval = setInterval(() => {
api.getTasks(filter).then((res) => setTasks(res));
}, 3000);
}, [filter, api]);
const addTask = () => {
tasks.push({ id: Date.now(), title: newTitle, status: "active" });
setTasks(tasks);
setNewTitle("");
};
return (
<div style={{ padding: 10 }}>
<input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} />
<button onClick={addTask}>Add Task</button>
<div>Active: {tasks.filter((t) => t.status === "active").length}</div>
<ul>
{tasks.map((task) => (
<li
key={task.title}
style={{ color: task.status === "done" ? "gray" : "black" }}
>
{task.title}
</li>
))}
</ul>
</div>
);
};
