Ya tenemos aquí nuestros posts.
Ahora, lo que queremos hacer nosotros,
es al momento de que yo pueda llenar aquí un título,
y algo de contenido,
y pongamos post content,
esto tendría que enviar un post,
que en HTTP, los verbos de HTTP,
esto es poder enviar información directamente al servidor,
y que esta información que yo estoy llenando aquí,
realmente se envíe.
De inicio tenemos que evitar que este comportamiento,
de que se refresca la página,
cada que le doy clic, suceda.
Vamos a ir con JavaScript.
Pero también tenemos que tomar la información de acá,
guardarla, y enviarla en el request.
Para que podamos ver aquí,
una vez que apretemos este botón de post content,
podamos ver como se hizo una petición más,
podamos ver que esa petición está pasando en post,
y que es lo que se está enviando.
Así que, vamos para allá.
Estamos aquí en nuestro JavaScript,
y vamos a empezar con otra función,
que se va a llamar createPost.
Y va a tener dos parámetros,
que es el título,
y el content.
Perfecto.
Estando aquí, vamos a examinar,
un poco la estructura,
de los posts que se están enviando.
Si vemos aquí el response,
que tiene que enviar el título,
vemos que tiene que enviar el cuerpo,
que será el título, y el contenido va a ser el cuerpo.
Pero vemos aquí que viene un ID, y un User ID.
Nosotros tendríamos que enviar un User ID,
para poder hacer match un poco con la estructura.
Pudiéramos enviar el ID,
pero de inicio, con que nosotros creemos un User ID,
va a ser importante, para poderlo enviar,
y que no rompa la estructura,
de lo que estaría esperando el servidor de esta API.
Para poder hacer eso,
nosotros no vamos a poder generar un número distinto,
por cada uno de los posts que se vaya generando.
Así que, voy a, de manera rápida,
generar una constante que se llame User ID,
que va a ser igual a un match random,
que me vaya a generar un número de manera aleatoria,
que se va a convertir en este User ID.
Ya lo tenemos acá. Perfecto.
Entonces, aquí tenemos que hacer esa pequeña estructura,
ese pequeño objeto que vamos a enviar,
y se va a llamar post.
Este es el post que vamos a estar enviando.
El post va a tener un title,
que va a ser igual al title,
que va a venir prácticamente de lo que obtengamos
de nuestro input, pero se va a inyectar aquí,
en nuestra función.
Vamos a tener un body,
que va a ser referencia al content,
que estamos nosotros utilizando aquí en nuestra función,
como parámetro, y el User ID,
que se está generando de manera aleatoria,
con un match random.
User ID. Perfecto.
Entonces, teniendo eso,
tenemos la pequeña estructura
de lo que se va a enviar al servidor.
¿Qué nos falta?
Esta función vamos a hacerla async.
Muy bien.
Entonces, ahora, aquí,
tenemos que hacer ese request.
Y para poder hacer ese request,
vamos a mandar llamar nuestra función
para que se genere el fetch.
Entonces, aquí, ponemos esta función.
El método, aquí le vamos a pedir que ahora sea un post.
Ese va a ser el método que vamos a estar utilizando.
La URL va a ser la misma URL
que estamos utilizando para ese ejercicio.
Entonces, vamos a utilizar esta misma URL
para que pueda enviar un post.
Entonces, aquí ponemos, y tenemos la misma URL.
Y los datos que vamos a enviar,
porque en este caso, como estamos enviando un post,
sí tiene que ir un body,
porque el body habla de la información que estamos enviando.
En este caso, va a ser post.
Esta es la información que nosotros vamos a enviar.
Perfecto.
Entonces, con esto ya tenemos la estructura
de la función que va a estar enviando el request
con la información para poder generar un nuevo blog post.
¿Qué nos faltaría?
Nos falta ahora generar el evento en este botón.
Entonces, este botón se llama, vamos a ponerlo aquí,
lo tenemos por acá.
Entonces, está aquí, es el form.
Vamos a estar utilizando el form.
Podemos ver que la estructura es un new post,
que es el contenedor en donde existe el form.
Y al form le vamos a agregar el evento de submit
para que se pueda enviar la información
que tienen estos dos inputs.
Y aquí al momento de darle click en este botón,
que tiene el tipo de submit,
que es el que como genera este trigger,
tenemos que quitar este comportamiento.
Así que lo primero que vamos a hacer es,
vamos a venir aquí y vamos a ocupar el form. addEventListener
y vamos a decir que el evento que queremos nosotros escuchar
es un submit.
Y queremos que nos traiga el evento mismo.
¿Para qué?
Una, para poder prevenir este comportamiento que tiene.
Entonces vamos event.preventDefault
y dos, para poder tener acceso a los elementos
que tiene el formulario,
para poder tener estos dos valores.
Entonces ahorita ya le estoy dando click al botón
y podemos ver que ya no se reinicia la página,
así que ya ese comportamiento se está erradicando.
Ahora vamos a tomar el valor de estos dos inputs.
Entonces la forma de hacerlo es genero una constante
que se llame title igual a event.currentTarget.querySelector
y quiero que busque si ese target actual,
que tiene que venir en comillas,
tenga el ID de title.
Y si sí, quiero que me traiga el value.
Perfecto.
Entonces vamos a hacer lo mismo con el body.
Const se va a llamar content igual a event. currentTarget.querySelector
y lo mismo.
Este tiene que tener un ID que se llame content.
Muy bien, si venimos acá, aquí tenemos el document.
Vamos a darle un poquito más de espacio.
Venimos al body, venimos a este section new posts,
el new posts trae el formulario.
Entonces aquí tiene que venir un input con título
y aquí un input con content.
Y estamos haciendo como el target actual
para hacerle selección a, aquí nos falta el punto value,
para que nos pueda traer el valor del target actual
que tenga un ID que haga match con los ID que estamos nosotros seleccionando en este momento.
Entonces si guardamos, aquí ya tenemos dos constantes
que van a ser las dos constantes de estos dos inputs
que nos tiene que traer el texto que nosotros escribamos.
Si en este momento pongo un console. log, por ejemplo,
y hago title, contents,
aquí pongo título y contenido y le doy enter.
Aquí nos dice que hay un typo en la línea 64 con el query selector.
Si venimos en la línea 64, target, podemos guardar.
Hacemos lo mismo, título, contenido, post y listo, nos trae título y contenido.
Entonces a este momento ya tenemos el valor de nuestros inputs.
¿Qué es lo que nos falta?
Nos falta simplemente mandar llamar nuestra función.
Al momento de que se genere el submits,
lo que queremos es que en esta función pueda venir el título
y pueda venir el contenido que hace relación o referencia
a estas dos variables que tenemos aquí.
Es perfecto, vamos a guardar.
Y aquí si guardamos, podemos venir a networking, network.
Bien, vamos a darle un poco más de espacio a esto
para poder ver bien que es lo que va a pasar.
Entonces aquí podemos ver que todavía no existe un post.
Si ponemos aquí título, contenido y enviamos,
podemos ver cómo aquí aparece este post.
Y dice que el método que se ocupó fue un método de post,
un 201, perfecto, que fue creado, y al dominio, y se utilizó un fetch.
Si abrimos este post, podemos ver qué es lo que se envió.
Se envió el título, se envió el body, que es el contenido,
el user ID, que es un mat random generado,
aquí podríamos cambiar un poco para redondearlo a números enteros,
pero se está enviando un user ID.
Y si vamos al header, podemos ver que se está utilizando
el método post a la URL que nosotros estamos buscando,
el status que se está generando, y con esto ya estamos viendo
qué es lo que se envió al servidor.