connect app with api and add create task function #20

api/data/tasks.json

@@ -1 +1,6 @@
-[{"id":1,"name":"Learn React","completed":false},{"id":2,"name":"Learn Vite","completed":false},{"id":3,"name":"Learn Node","completed":false},{"id":"10","text":"Prueba"},{"id":11,"text":"Prueba"}]
+[
+	{ "text": "Tarea Prueba", "id": "9691749823042075-1717951418737" },
+	{ "text": "Tarea 2", "id": "8822678026350037-1717951589854" },
+	{ "text": "Tarea 3", "id": "49480507403849905-1717951598149" },
+	{ "text": "Lorena es tonta del to", "id": "9158222028142664-1717951606748" }
+]

api/index.js

@@ -1,7 +1,8 @@
 import express from 'express'
-
 import cors from 'cors'
 
+import logic from './logic/logic.js'
+
 const api = express()
 
 api.use(cors())
@@ -12,6 +13,29 @@ api.get('/', (req, res) => {
     res.send('Hello World!')
 })
 
+
+api.post("/tasks", jsonBodyParser, (req, res) => {
+
+    const { text } = req.body
+
+
+    try {
+        logic.createTask(text, (error) => {
+            if (error) {
+                res.status(500).json({ error: error })
+
+                return
+            }
+
+            res.status(201).send({ message: 'task inserted, seguimos Laiiifff!!!' })
+
+        })
+
+    } catch (error) {
+        console.log(error)
+    }
+})
+
 api.listen(3000, () => console.log('Tamosss Laifff!!! http://localhost:3000'))
 
 

api/logic/index.test.js

@@ -1,7 +1,6 @@
-// import findTasks from './logic.js'
-
+import logic from "./logic.js"
 // try {
-//     findTasks(() => true, (error, tasks) => {
+//     logic.findTasks(() => true, (error, tasks) => {
 //         if (error) {
 //             console.log(error)
 
@@ -15,19 +14,19 @@
 //     console.log(error)
 // }
 
-import createTask from './logic.js'
 
-try {
-    createTask(11, 'Prueba', (error) => {
-        if (error) {
-            console.log(error)
 
-            return
-        }
-        console.log('task inserted, seguimos Laiiifff!!!')
+// try {
+//     logic.createTask(11, 'Prueba', (error) => {
+//         if (error) {
+//             console.log(error)
 
-    })
+//             return
+//         }
+//         console.log('task inserted, seguimos Laiiifff!!!')
 
-} catch (error) {
-    console.log(error)
-}
+//     })
+
+// } catch (error) {
+//     console.log(error)
+// }

api/logic/logic.js

@@ -2,13 +2,11 @@ import fs from 'fs'
 
 const logic = {}
 
-const findTasks = (condition, callback) => {
+logic.findTasks = (condition, callback) => {
     fs.readFile('../api/data/tasks.json', 'utf-8', (error, tasksJson) => {
         if (error) {
             console.log(error)
 
-            //alert('Error al leer el archivo')
-
             return
         }
 
@@ -26,10 +24,10 @@ const findTasks = (condition, callback) => {
 
 }
 
-const createTask = (id, text, callback) => {
+logic.createTask = (text, callback) => {
     const task = {
-        id: id,
-        text: text
+
+        text: text,
     }
 
     const insertTask = (task, callback) => {
@@ -45,6 +43,8 @@ const createTask = (id, text, callback) => {
             }
             const tasks = JSON.parse(tasksJson)
 
+            task.id = `${Math.random().toString().slice(2)}-${Date.now()}`
+
             tasks.push(task)
 
             const jsonTasks = JSON.stringify(tasks)
@@ -59,13 +59,9 @@ const createTask = (id, text, callback) => {
                 callback(null)
             })
         })
-
-
-
     }
     insertTask(task, callback);
 }
 
 
-//export default findTasks
-export default createTask
+export default logic

app/src/component/TaskList.jsx

@@ -1,5 +1,7 @@
 import { useState } from "react"
 
+import logic from "../logic"
+
 import Title from "./Title"
 
 import "./Title.css"
@@ -16,10 +18,23 @@ function TaskList() {
 
 	const handleSubmitTask = (event) => {
 		event.preventDefault()
-		if (task.trim()) {
-			setTasks([...tasks, { text: task, completed: false }])
-			setTask("")
+
+		try {
+			logic.createTask(task, (error) => {
+				if (error) {
+					alert(error.meessage)
+
+					return
+				}
+				if (task.trim()) {
+					setTasks([...tasks, { text: task, completed: false }])
+				}
+			})
+		} catch (error) {
+			alert(error.message)
+			return
 		}
+		setTask("")
 	}
 
 	const handleDeleteTask = (indexToDelete) => {

app/src/logic.js

@@ -0,0 +1,30 @@
+const logic = {}
+
+logic.createTask = (text, callback) => {
+  const xhr = new XMLHttpRequest()
+
+  xhr.onload = () => {
+
+    if (xhr.status === 201) {
+
+      callback(null)
+      console.log("task inserted, seguimos Laiiifff!!!")
+      return
+    }
+
+    const { error, message } = JSON.parse(xhr.responseText)
+
+    callback({ error, message })
+  }
+
+  xhr.open("POST", "http://localhost:3000/tasks")
+
+  const body = { text }
+
+  const json = JSON.stringify(body)
+
+  xhr.setRequestHeader("Content-Type", "application/json")
+  xhr.send(json)
+}
+
+export default logic