subir/Curso de Fundamentos de JavaScript/06-Asincronía en JavaScript/09-Eliminar Posts con JavaScript y Delegación de Eventos.vtt

WEBVTT

00:00.000 --> 00:03.000
¿Qué pasaría entonces ahora si, por ejemplo,

00:03.000 --> 00:07.800
mandamos llamar nuestros posts y lo que
queremos es borrarlos?

00:07.800 --> 00:08.300
¿No?

00:08.300 --> 00:11.200
O queremos enviar una petición para
poderle decir al servidor,

00:11.200 --> 00:15.400
oye, este elemento quiero que lo borres de
la base de datos y

00:15.400 --> 00:18.360
ya no quiero traerlo cuando quede una
petición.

00:18.360 --> 00:21.840
Tenemos que darle interacción ahorita a
este botón para poder

00:21.840 --> 00:23.360
borrar los
elementos.

00:23.360 --> 00:26.200
Pero poder borrar los elementos es un poco
más complejo que

00:26.200 --> 00:29.840
solo decirle a este botón, borra este
elemento.

00:29.840 --> 00:31.520
No funciona tanto
así.

00:31.520 --> 00:35.160
Aquí vamos a estar utilizando algunos
elementos.

00:35.160 --> 00:38.520
Lo primero es que no le vamos a agregar el
evento al botón.

00:38.520 --> 00:41.640
Vamos a utilizar un patrón que se llama
delegation pattern,

00:41.640 --> 00:46.080
que es vamos a agregarle el evento al
padre de las

00:46.080 --> 00:49.600
tarjetas para que el padre de las tarjetas
sea el que nos

00:49.600 --> 00:53.160
diga a quién le estamos dando clic y quién
se tiene que ir.

00:53.160 --> 00:55.920
Esto nos va a ayudar muchísimo en temas de
performance.

00:55.920 --> 00:59.960
Pero también tenemos que entender cuál es
el ID que

00:59.960 --> 01:01.120
tenemos que
borrar.

01:01.120 --> 01:05.520
Porque no solo es saber qué tipo de o cuál
de las etiquetas de

01:05.520 --> 01:09.400
HTML le estamos dando clic, es si venimos
aquí, por ejemplo,

01:09.400 --> 01:12.880
hagamos esto un poco grande, demos espacio,

01:12.880 --> 01:17.080
venimos a nuestros posts, nosotros
necesitamos entender

01:17.080 --> 01:19.160
cuál es el ID del
elemento.

01:19.160 --> 01:23.040
Si te das cuenta, cada elemento tiene un
ID distinto.

01:23.040 --> 01:25.240
Entonces, nosotros tenemos que encontrar
una forma de al

01:25.240 --> 01:28.480
momento de darle clic con el delegation
pattern,

01:28.480 --> 01:33.520
sepamos cuál es el ID del elemento al que
le dimos clic

01:33.520 --> 01:38.000
para poderle decir al servidor en la
petición de deletes que

01:38.000 --> 01:40.080
vamos a hacer con HTTP,
oye,

01:40.080 --> 01:44.520
necesito que busques el elemento que tiene
este ID y que lo

01:44.520 --> 01:45.840
borres.

01:45.840 --> 01:48.080
Así que vamos para
allá.

01:48.080 --> 01:50.920
Con esto pequeño, venimos aquí a nuestro
JavaScript.

01:50.920 --> 01:53.160
Y ya que estamos acá, pues, como comenté,

01:53.160 --> 01:55.320
hay que empezar con el
evento.

01:55.320 --> 02:01.480
Y el evento va a estar pasando en el padre
que tiene todas las

02:01.480 --> 02:04.400
tarjetas, que tiene todas estas tarjetas.

02:04.400 --> 02:09.480
Y ese padre, venimos aquí, lo tenemos acá.

02:09.480 --> 02:14.000
Este padre está en el section que tiene un
ID que se llama

02:14.000 --> 02:16.120
post
container.

02:16.120 --> 02:17.800
Eso ya lo tenemos acá
guardado.

02:17.800 --> 02:21.840
Lo tenemos por aquí, post container,
se llama post list.

02:21.840 --> 02:24.120
Entonces, a este elemento es el que le
vamos a agregar ese

02:24.120 --> 02:25.520
evento.

02:25.520 --> 02:32.360
Si venimos acá, post list, entonces va a
ser add even

02:32.360 --> 02:34.480
listener.

02:34.480 --> 02:38.280
Y el evento que queremos nosotros escuchar
es clic,

02:38.280 --> 02:40.520
hacer un evento de
clic.

02:40.520 --> 02:43.400
Y aquí vamos a traer al evento mismo,

02:43.400 --> 02:46.720
porque ahí nos va a ser de mucha ayuda.

02:46.720 --> 02:50.400
Vamos a ir parte por parte para que puedas
entender bien qué es

02:50.400 --> 02:52.360
lo que vamos a estar haciendo
acá.

02:52.360 --> 03:02.760
Lo primero es que vamos a imprimir un console.
log event.

03:02.760 --> 03:08.680
Es el momento de traer todos mis posts y
darle clic en el

03:08.680 --> 03:09.880
evento.

03:09.880 --> 03:13.000
Aquí podemos ver que me trae el evento.

03:13.000 --> 03:17.320
Me está trayendo el objeto del evento mismo.

03:17.320 --> 03:22.600
Y navegando podría yo encontrar cuál es el
target, por ejemplo.

03:22.600 --> 03:25.680
Si venimos acá y encontramos target,

03:25.680 --> 03:28.440
vemos que le estoy dando clic a un botón.

03:28.440 --> 03:30.800
Y me está trayendo
automáticamente,

03:30.800 --> 03:34.200
me está como haciendo un highlight del
botón al cual yo

03:34.200 --> 03:35.160
le di
clic.

03:35.160 --> 03:39.480
Que esto va a ser distinto si yo me pongo
y veo otra tarjeta.

03:39.480 --> 03:40.000
¿Por
qué?

03:40.000 --> 03:41.800
Porque les estoy dando
clic.

03:41.800 --> 03:43.960
El target me dice a qué elemento le di
clic en

03:43.960 --> 03:45.080
particular.

03:45.080 --> 03:46.320
No me trae el
resto.

03:46.320 --> 03:46.840
Perfecto.

03:46.840 --> 03:48.560
Entonces, vamos a empezar por
ahí.

03:48.560 --> 03:53.000
Ya tenemos que.target me trae este botón
de forma muy

03:53.000 --> 03:53.600
particular.

03:53.600 --> 03:57.240
Y esto es lo que necesito, porque ya de
forma específica,

03:57.240 --> 03:59.200
sé a quién le estoy dando
clic.

03:59.200 --> 04:00.720
Bien.

04:00.720 --> 04:03.440
Entonces, aquí vamos a hacer una pequeña
validación.

04:03.440 --> 04:14.360
Entonces, la validación va a ser event.target.
tagname.

04:14.360 --> 04:18.680
Igual a
botón.

04:18.680 --> 04:20.040
¿Por
qué?

04:20.040 --> 04:21.080
Tiene que ser
este.

04:21.080 --> 04:24.960
El tag name tiene que ser igual a botón.

04:24.960 --> 04:25.460
Perfecto.

04:25.460 --> 04:29.800
Entonces, la validación va de si el target
al cual yo le di

04:29.800 --> 04:33.320
clic tiene un tag name igual a botón.

04:33.320 --> 04:37.960
Si eso sucede, entonces hagamos lo que viene.

04:37.960 --> 04:40.880
Generamos una nueva constante en minúsculas,

04:40.880 --> 04:45.240
constante que se llame post
ID.

04:45.240 --> 04:48.120
Vamos a sacar el ID de ese
post.

04:48.120 --> 04:55.320
Y la forma de obtener el ID de ese post va
a ser event.target.

04:55.320 --> 04:55.820
closest.

04:59.120 --> 05:03.080
Y aquí vamos a buscar una
etiqueta.

05:03.080 --> 05:05.960
Vamos a hacer aquí el
post.

05:05.960 --> 05:07.320
Perfecto.

05:07.320 --> 05:10.360
Y
document.

05:10.360 --> 05:12.760
Venimos aquí, vamos a abrir nuestro body.

05:12.760 --> 05:15.200
Venimos a el
contenedor.

05:15.200 --> 05:19.360
Y si abrimos el section, podemos ir viendo
que cada una de las

05:19.360 --> 05:22.080
tarjetas es un
article.

05:22.080 --> 05:25.640
Y cada uno de estos articles trae un ID.

05:25.640 --> 05:34.000
Entonces, lo que yo quiero es tener acceso
al article más

05:34.000 --> 05:36.200
cercano.

05:36.200 --> 05:40.680
Y entonces, puedo tener acceso a su ID.

05:40.680 --> 05:42.400
Guardamos
esto.

05:42.400 --> 05:47.520
Una forma de saber si esto está
funcionando o no, console.log.

05:47.520 --> 05:51.440
Aquí ponemos post
ID.

05:51.440 --> 05:52.080
Perfecto.

05:52.080 --> 05:53.120
Guardamos.

05:53.120 --> 05:55.480
Andamos a traer nuestros
posts.

05:55.480 --> 05:59.200
Vamos a darle clic a
este.

05:59.200 --> 06:00.480
Hay un
typo.

06:00.480 --> 06:02.120
Closest.

06:02.120 --> 06:02.960
Perfecto.

06:02.960 --> 06:05.680
Vamos a
guardar.

06:05.680 --> 06:06.200
Lo
mismo.

06:06.200 --> 06:07.600
Traemos nuestros
posts.

06:07.600 --> 06:08.680
Bajamos de forma
random.

06:08.680 --> 06:10.000
Le damos
clic.

06:10.000 --> 06:15.760
Entonces, me dice que ahora el ID del post
al que le di clic es

06:15.760 --> 06:17.000
el
11.

06:17.000 --> 06:22.120
Y con esta información, yo ya puedo
decirle al servidor,

06:22.120 --> 06:27.560
en un request HTTP, necesito que me borres
el artículo cuyo ID

06:27.560 --> 06:29.120
es igual a
11.

06:29.120 --> 06:30.360
¿Cómo lo estaremos
haciendo?

06:30.360 --> 06:31.560
Muy
bien.

06:31.560 --> 06:34.720
Ya que estamos aquí, en esta misma evaluación,

06:34.720 --> 06:39.920
tenemos que mandar traer ahora nuestra
función que genera el

06:39.920 --> 06:42.600
fetch.

06:42.600 --> 06:45.080
Lo ponemos
aquí.

06:45.080 --> 06:51.280
Y entonces, el método, pues, el método va
a ser deletes.

06:51.280 --> 06:51.780
Bien.

06:51.780 --> 06:57.000
La URL, vamos a utilizar la misma URL de
los posts,

06:57.000 --> 06:59.400
que es la que venimos utilizando para este
ejercicio.

06:59.400 --> 07:02.760
Bien.

07:02.760 --> 07:08.960
Y la data, aquí, vamos a
inyectar.

07:08.960 --> 07:12.320
Déjame pongo esto
aquí.

07:12.320 --> 07:16.960
Para esta data, lo que vamos a hacer es,

07:16.960 --> 07:23.360
adentro de la URL, lo que yo quiero es que
se entienda cuál

07:23.360 --> 07:28.720
es el ID de ese post que queremos borrar.

07:28.720 --> 07:30.640
Entonces, hacemos
esto.

07:30.640 --> 07:34.000
Vamos a poner
esto.

07:34.000 --> 07:39.000
Y vamos a poner el valor del ID, del post ID.

07:39.000 --> 07:41.240
Tiene que ser así, post
ID.

07:41.240 --> 07:44.880
Pero como estamos agregando el valor de
una variable,

07:44.880 --> 07:50.400
vamos a utilizar estas
comillas.

07:50.400 --> 07:54.640
Para que, entonces, podamos utilizar la
variable que hace

07:54.640 --> 07:57.080
referencia al ID del
post.

07:57.080 --> 08:02.160
Entonces, en la URL, en post, le vamos a
poner que quiero que

08:02.160 --> 08:04.400
este post, de forma muy
particular,

08:04.400 --> 08:06.800
que tiene este ID, se vaya a borrar.

08:06.800 --> 08:09.640
Esto viene en la documentación de cómo
enviar la información al

08:09.640 --> 08:12.360
momento de borrar un
post.

08:12.360 --> 08:14.640
Ellos te piden que envíes esta estructura.

08:14.640 --> 08:17.040
Pero es importante poder leer la
documentación de cada una de

08:17.040 --> 08:18.640
las
APIs.

08:18.640 --> 08:23.520
Si estás utilizando, por ejemplo, un post,
un GET,

08:23.520 --> 08:27.680
una API REST, te tiene que venir cómo
utilizar los verbos y

08:27.680 --> 08:29.440
cuál es la estructura que ellos esperarían.

08:29.440 --> 08:34.280
Entonces, con esto, si nosotros guardamos,

08:34.280 --> 08:39.120
ya tendríamos que tener la facultad de
poder enviar esa

08:39.120 --> 08:39.640
información.

08:39.640 --> 08:40.160
¿Por
qué?

08:40.160 --> 08:44.760
Porque estamos agregándole el evento
directamente a un

08:44.760 --> 08:45.800
elemento.

08:45.800 --> 08:49.800
Aquí estamos validando que le estemos
dando clic a un botón.

08:49.800 --> 08:53.320
Estamos tomando el ID de ese
post.

08:53.320 --> 08:56.640
Entonces, estamos haciendo aquí mismo el
request,

08:56.640 --> 08:59.560
pidiendo que se borre ese
post.

08:59.560 --> 09:02.720
Así que si todo sale bien, vamos a mandar
a llamar nuestros

09:02.720 --> 09:03.680
posts.

09:03.680 --> 09:05.080
Perfecto.

09:05.080 --> 09:06.520
Forma
random.

09:06.520 --> 09:07.800
Vamos a darle
borrar.

09:07.800 --> 09:09.560
Se tiene que borrar el
8.

09:09.560 --> 09:12.960
Aquí, visualmente, no está pasando porque,
pues,

09:12.960 --> 09:15.160
este es un API
fake.

09:15.160 --> 09:23.120
Pero si venimos aquí a nuestro request,
a network, y bajamos,

09:23.120 --> 09:25.760
podemos ver que aquí hay un
8.

09:25.760 --> 09:29.760
Podemos ver aquí que hubo un request de un
método que era

09:29.760 --> 09:32.120
borrar.

09:32.120 --> 09:33.440
Está trayendo por un
fetch.

09:33.440 --> 09:38.000
Pero si abrimos esto, en el API dice que
no se va a enviar,

09:38.000 --> 09:39.480
que no vas a recibir
información,

09:39.480 --> 09:42.040
más bien porque tú estás enviando que lo
quieres borrar.

09:42.040 --> 09:44.960
Pero si venimos al header, podemos ver que
el status fue

09:44.960 --> 09:46.080
200.

09:46.080 --> 09:50.440
Podemos ver que realmente se utilizó el
método de deletes.

09:50.440 --> 09:52.520
¿Cuál fue la URL que se está
enviando?

09:52.520 --> 09:54.400
Podemos ver que aquí automáticamente se
está

09:54.400 --> 09:58.320
agregando el ID del post que queramos borrar,
que era el 8.

09:58.320 --> 10:02.360
Y con esto, entonces, ya enviamos al
servidor cuál es el

10:02.360 --> 10:03.960
post que queremos
borrar.

10:03.960 --> 10:06.440
Lo que faltaría, si este API fuera real,

10:06.440 --> 10:08.200
es que el servidor lo
borraría.

10:08.200 --> 10:11.080
Y nosotros tendríamos que hacer un nuevo
request para poder

10:11.080 --> 10:14.680
traer todos los posts menos ese, porque ya
no estaría en la base

10:14.680 --> 10:23.240
de
datos.