47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { useMemo, useState } from "react"
|
|
import { TaskItem } from "./components/TaskItem";
|
|
import { useTasks } from "./hooks/useTasks";
|
|
|
|
function App() {
|
|
|
|
const [inputValue, setInputValue] = useState<string>('');
|
|
const { tasks, addTask, deleteTask, toggleTask } = useTasks();
|
|
|
|
const completedCount = useMemo(() => {
|
|
console.log("Counting tasks...");
|
|
return tasks.filter(t => t.completed).length;
|
|
}, [tasks]);
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1>SmartX Task Manager {completedCount}</h1>
|
|
|
|
<div className="input-group">
|
|
<input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
<button onClick={() => { addTask(inputValue); setInputValue(''); }}>Add</button>
|
|
</div>
|
|
<div className="task-list">
|
|
{tasks.length === 0 ? (
|
|
<p>No task found. Lets add!</p>
|
|
) : (
|
|
<ul>
|
|
{tasks.map(task => (
|
|
<TaskItem
|
|
key={task.id}
|
|
task={task}
|
|
onDelete={deleteTask}
|
|
onToggle={toggleTask}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App |