added delete button to table

Author: dot4msc

client/src/components/Button.css

@@ -1,4 +1,4 @@
-button {
+.modify-button {
   background-color: rgb(92, 2, 117);
   color: white;
   border: none;

client/src/components/Button.jsx

@@ -2,6 +2,6 @@ import './Button.css';
 
 export default function Button({type, text, fn}) {
   return(
-    <button type={type || "button"} onClick={fn}>{text}</button>
+    <button className='modify-button' type={type || "button"} onClick={fn}>{text}</button>
   );
 }

client/src/components/DeleteButton.css

@@ -0,0 +1,13 @@
+.delete-button {
+  background-color: rgb(188, 28, 4);
+  color: white;
+  border: none;
+  box-shadow: none;
+  padding: 10px;
+  font-weight: 600;
+  border-radius: 10px;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+}
+

client/src/components/DeleteButton.jsx

@@ -0,0 +1,7 @@
+import './DeleteButton.css'
+
+export default function DeleteButton({onDelete}) {
+  return(
+    <button onClick={onDelete} className='delete-button'>X</button>
+  )
+}

client/src/components/Table.jsx

@@ -2,6 +2,7 @@ import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-tabl
 import { useEffect, useMemo, useState } from 'react'
 import "./Table.css"
 import EditTaskForm from './modals/EditTaskForm';
+import DeleteButton from './DeleteButton';
 
 export default function Table({data}) {
 
@@ -13,6 +14,7 @@ export default function Table({data}) {
     { header: 'Estatus', accessorFn: row => row.status.percentage},
     { header: 'Descripción', accessorKey: 'description'},
     { header: 'Asignación', accessorKey: 'asignee'},
+    { header: 'Borrar', cell: info => <DeleteButton onDelete={(e) => handleDelete(e,info)}/>}
   ])
 
   const table = useReactTable({
@@ -21,6 +23,22 @@ export default function Table({data}) {
     getCoreRowModel: getCoreRowModel(),
   })
 
+  function handleDelete(e,info) {
+    e.stopPropagation();
+    setTasks((prev) => prev.filter(task => task._id !== info.row.original._id))
+
+    fetch(`${import.meta.env.VITE_SERVER_URL}/${info.row.original._id}`,{
+      method: 'DELETE'
+    })
+      .then(res => {
+        if(!res.ok) {
+          throw new Error(res.statusText);
+        }
+      })
+      .catch((error) => console.log(error))
+    
+  }
+
   function handleRowClick(row) {
     setSelectedTask(row.original);
   }
@@ -53,10 +71,7 @@ export default function Table({data}) {
     setSelectedTask(null)
   }
 
-  useEffect(() => {
-    console.log("Tasks changed: ", tasks);
-  }, [tasks])
-
+ 
   return (
     <>
       <table className="task-table">
@@ -73,6 +88,7 @@ export default function Table({data}) {
         </thead>
         <tbody>
           {table.getRowModel().rows.map(row => (
+            
             <tr onClick={() => handleRowClick(row)} key={row.id}>
               {row.getVisibleCells().map(cell => (
                 <td key={cell.id}>