Delete task on db

model/tasksFunctions.js

@@ -12,10 +12,10 @@ function createTask(task) {
 
 const get_Task_By_Id = db.prepare(/*sql*/ `
     SELECT * FROM tasks WHERE id = ?
-`);
+`)
 
 function getTaskById(id) {
-    return get_Task_By_Id.get(id);
+	return get_Task_By_Id.get(id)
 }
 
 const get_All_Tasks = db.prepare(/*sql*/ `
@@ -31,7 +31,8 @@ const delete_Task = db.prepare(/*sql*/ `
     `)
 
 function deleteTask(id) {
-	delete_Tasks.run(id)
+	const info = delete_Task.run(id)
+	return info
 }
 
 const edit_Task = db.prepare(/*sql*/ `
@@ -57,13 +58,20 @@ function editTask(task) {
 }
 
 function toggleFinished(id) {
-    const task = getTaskById(id);
-    if (task) {
-        const newFinishedValue = task.finished === 0 ? 1 : 0;
-        return editTask({ ...task, finished: newFinishedValue });
-    } else {
-        return null; // or throw an error
-    }
+	const task = getTaskById(id)
+	if (task) {
+		const newFinishedValue = task.finished === 0 ? 1 : 0
+		return editTask({ ...task, finished: newFinishedValue })
+	} else {
+		return null // or throw an error
+	}
 }
 
-export { createTask, getTasks, deleteTask, editTask, toggleFinished, getTaskById }
+export {
+	createTask,
+	getTasks,
+	deleteTask,
+	editTask,
+	toggleFinished,
+	getTaskById,
+}

src/App.tsx

@@ -6,6 +6,7 @@ import GenericFilter from './components/GenericFilter'
 import categories from './components/categories'
 import priorities from './components/priorities'
 import { Task } from './components/TaskList'
+//import { GiConsoleController } from 'react-icons/gi'
 
 function App() {
 	const [tasks, setTasks] = useState<any[]>([])
@@ -30,9 +31,8 @@ function App() {
 	const [selectedCategory, setSelectedCategory] = useState('')
 	const [selectedPriority, setSelectedPriority] = useState('')
 
-	//combining two ternary logics into a single function
 	const visibleTasks = () => {
-		return tasks.filter((task) => {
+		const filteredTasks = tasks.filter((task) => {
 			const matchesCategory = selectedCategory
 				? task.category === selectedCategory
 				: true
@@ -41,6 +41,8 @@ function App() {
 				: true
 			return matchesCategory && matchesPriority
 		})
+		//console.log('Filtered tasks:', filteredTasks)
+		return filteredTasks
 	}
 
 	const toggleFinished = async (id: number) => {
@@ -70,6 +72,24 @@ function App() {
 		}
 	}
 
+	const deleteTask = async (id: number) => {
+		try {
+			const response = await fetch(`http://localhost:3001/deletetask/${id}`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			})
+
+			if (!response.ok) {
+				throw new Error('Failed to delete task')
+			}
+			setTasks(tasks.filter((task) => task.id !== id))
+		} catch (error) {
+			console.error('Error deleting task:', error)
+		}
+	}
+
 	const liveEdit = (searchId: number, description: string) => {
 		console.log(searchId, description)
 	}
@@ -130,7 +150,7 @@ function App() {
 			<TaskList
 				tasks={visibleTasks()}
 				onEdit={(id, description) => liveEdit(id, description)}
-				onDelete={(id) => setTasks(tasks.filter((e) => e.id !== id))}
+				onDelete={(id) => deleteTask(id)}
 				onFinished={(id) => toggleFinished(id)}
 				sortBy={(sortField) => sortBy(sortField as keyof Task)}
 			></TaskList>

src/components/index.css

@@ -2,10 +2,10 @@ body {
 	padding: 20px;
 	max-width: min(60rem, 80%);
 	margin-left: auto;
-	margin-right: auto; 
-	background-image: url('../../public/background2.webp');
+	margin-right: auto;
+	background-image: url('/background2.webp');
 	background-repeat: repeat;
-	background-size:cover ;
+	background-size: cover;
 }
 .flexContainer {
 	display: flex;
@@ -18,4 +18,4 @@ body {
 
 .white {
 	color: aliceblue;
-}
+}

src/server.js

@@ -1,7 +1,10 @@
 import express from 'express'
-import Database from 'better-sqlite3'
 import cors from 'cors'
-import { editTask, getTasks, toggleFinished } from '../model/tasksFunctions.js'
+import {
+	deleteTask,
+	getTasks,
+	toggleFinished,
+} from '../model/tasksFunctions.js'
 
 const server = express()
 const port = 3001
@@ -24,6 +27,25 @@ server.post('/togglefinished/:id', (req, res) => {
 	}
 })
 
+server.post('/deletetask/:id', (req, res) => {
+	try {
+		const id = parseInt(req.params.id, 10)
+		const result = deleteTask(id)
+
+		// Check if any rows were deleted
+		if (result && result.changes > 0) {
+			res.status(200).json({ message: 'Task successfully deleted' })
+		} else {
+			res.status(404).json({ message: 'Task not found' })
+		}
+	} catch (error) {
+		console.error(error)
+		res
+			.status(500)
+			.json({ message: 'Internal Server Error', error: error.message })
+	}
+})
+
 server.listen(port, host, () => {
 	console.log(`listening at port: ${port}`)
 })