Scribd
Upload
2 views

import React

This document contains a React component for a Task Manager application. It allows users to add, delete, and toggle the completion status of tasks using an API. The component manages state for tasks and new task input, and fetches tasks from a local server upon loading.

Uploaded by

atul.yadav6992
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

import React

This document contains a React component for a Task Manager application. It allows users to add, delete, and toggle the completion status of tasks using an API. The component manages state for tasks and new task input, and fetches tasks from a local server upon loading.

Uploaded by

atul.yadav6992
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState, useEffect } from "react";

import { Button, Input, Card, CardContent } from "@/components/ui";


import axios from "axios";

export default function TaskManager() {


const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState("");

useEffect(() => {
fetchTasks();
}, []);

const fetchTasks = async () => {


const response = await axios.get("http://localhost:5000/tasks");
setTasks(response.data);
};

const addTask = async () => {


if (!newTask.trim()) return;
await axios.post("http://localhost:5000/tasks", { title: newTask });
setNewTask("");
fetchTasks();
};

const deleteTask = async (id) => {


await axios.delete(`http://localhost:5000/tasks/${id}`);
fetchTasks();
};

const toggleTask = async (id) => {


await axios.put(`http://localhost:5000/tasks/${id}`);
fetchTasks();
};

return (
<div className="p-6 max-w-lg mx-auto">
<h1 className="text-2xl font-bold mb-4">Task Manager</h1>
<div className="flex gap-2 mb-4">
<Input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Enter a new task"
/>
<Button onClick={addTask}>Add</Button>
</div>
<div>
{tasks.map((task) => (
<Card key={task.id} className="mb-2 p-4 flex justify-between">
<span
className={
task.completed ? "line-through text-gray-500" : "text-black"
}
onClick={() => toggleTask(task.id)}
>
{task.title}
</span>
<Button onClick={() => deleteTask(task.id)}>Delete</Button>
</Card>
))}
</div>
</div>
);
}

You might also like