added post functionality to client

Author: dot4msc

client/src/App.jsx

@@ -24,7 +24,24 @@ export default function App() {
   },[])
 
   function onAddTask(task){
-    setData(apiData => [...apiData, task])
+
+    fetch(import.meta.env.VITE_SERVER_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(task),
+    })
+      .then(res=>{
+        if(!res.ok){
+          throw new Error(res.statusText + ": " + res.status);
+        }
+        return res.json()
+      })
+      .then((data) => {
+        setData(apiData => [...apiData, data])
+      })
+      .catch(error => console.log(error))
   }
 
   if (loading) return <p>Loading...</p>;

client/src/components/Table.jsx

@@ -6,9 +6,9 @@ import DeleteButton from './DeleteButton';
 
 export default function Table({data}) {
 
-  const [tasks, setTasks] = useState(data);
+  const [_tasks, setTasks] = useState(data);
   const [selectedTask, setSelectedTask] = useState(null);
-
+  
   const columns = useMemo(() => [
     { header: '#', cell: info => info.row.index + 1},
     { header: 'Estatus', accessorFn: row => row.status.percentage},
@@ -18,7 +18,7 @@ export default function Table({data}) {
   ])
 
   const table = useReactTable({
-    data: tasks,
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   })

client/src/components/modals/EditTaskForm.jsx

@@ -21,7 +21,7 @@ export default function EditTaskForm({task, onSave, onClose}) {
     setLabel(e.target.value);
   }
 
-  function handleSubmit(e){
+  function handleSubmit(e) {
     e.preventDefault();
     if([label, description, asignee].some(field => !field)) {
       console.log("Please enter all values")

client/src/components/modals/NewTaskForm.jsx

@@ -24,11 +24,13 @@ export default function NewTaskForm({setShowModal, onAddTask}) {
 
   function handleSubmit(e){
     e.preventDefault();
+
     console.log(percentage + " " + label + " " + description + " " + asignee)
     if([label, description, asignee].some(field => !field)) {
       console.log("Please enter all values")
       return;
     }
+
     const task ={
       description: description,
       status: {
@@ -37,7 +39,7 @@ export default function NewTaskForm({setShowModal, onAddTask}) {
       },
       asignee: asignee
     };
-
+    
     setShowModal(false);
     onAddTask(task);
   }