Voy a explicar unas cuantas cosas aquí con el useEffect este.
Esto que se ve ahí, que parece que hace como un kamehameha,
¿sabes? Aquí hay un huecarro que dices, ¿qué está pasando aquí?
Esto, bueno, porque es un useEffect y tal, ¿vale?
AuthStateChange.
Esto ya recibe una función.
Lo que ya nos dice esto, si recibe una función,
es que esto ya podría simplificarlo haciendo esto.
HandleAuthStateChange.
O sea, ya lo que podrías hacer es pasarle directamente una función que se ejecute
y esto ya quedaría así de fácil.
Por lo tanto, lo que podríamos hacer es crear la función ya fuera.
Esto lo que nos permite es evitar el anidamiento, ¿no?
Porque aquí ya estamos empezando a anidar.
Si anidamos estos dos y luego los de dentro,
ya estaríamos anidando hasta 6.
Lo podríamos crear fuera, lo podemos crear en un montón de sitios.
Pero bueno, vamos a ponerlo aquí.
Podría ser con un useCallback, lo que sea.
Pero al menos lo tenemos por aquí.
Y aquí, pues, un poquito mejor.
Bueno, me va a fallar esto porque no tenemos el useEffect y lo que sea.
Ahora aquí, ahí es una cosa súper rara.
Porque dices, si tal, no sé, si tiene useEffect...
Vale, pues más fácil.
Esto está muy bien pensado.
La ternaria, Q2 por la ternaria.
Pero hay veces que la ternaria es contraproductiva.
Especialmente cuando lo que hace es tan largo.
¿Vale?
Cuando lo que hacemos es tan largo, no se utiliza la ternaria.
Se utiliza mejor las cláusulas de guardia, las que, como le quieras llamar.
Pero aquí le dices, si no tengo user, entonces devuelvo con el set, con esto, y queda mucho mejor.
Porque tú ahora, una vez que ya has hecho la cláusula de decir, vale, si no tengo usuario, hago lo más corto.
Y a partir de aquí, cuando ya llegas al código de aquí, tú ya puedes hacer todo esto.
¿Vale?
Todo esto ya lo puedes hacer.
Entonces quitas esto, y ya, fíjate, que empieza a quedar como mucho más legible, ¿no?
Porque ya les dice, vale, tengo la lista...
Bueno, de hecho, esta lista la puedes crear después, si quieres, y todo.
Esto lo puedes crear aquí, y quedarte bien a gusto.
Y así quedas.
Si cuando esto, no sé, no tengo usuario...
Luego, este tipo de métodos, esto hay que hacerlo con camelCase, ¿vale?
Si no, parece una clase.
Este getUserData no tiene que ser en mayúsculas.
Cuando lo importaste, hacerlo en camelCase.
Vale, getUserData, user.email.
Bueno, aquí tienes diferentes opciones.
Una, hacer que esto sea asíncrono.
Y entonces haces aquí una wait, porque total, tampoco estás haciendo un catch de nada.
Aquí recuperar los users, bueno, los usuarios, no vamos a dejarle el nombre.
Y esto lo que te permite es volver a ganar un nivel más de anidamiento.
Y fíjate de cómo habíamos empezado antes, que estaba súper anidado,
a cómo ahora estamos haciendo poco a poco que se lea mucho mejor.
Y luego aquí, este letUser, no sé qué, no sé cuánto.
Esto, esto es súper importante, Mili.
Súper, súper, súper, súper importante.
Esto no es un forEach.
Esto está mal.
Esto no puede ser un forEach.
Cuando tú ves esta construcción donde tienes el list of users con un array vacío
y haces un forEach para meter el mismo número de elementos a un array vacío,
a esto se le llama map.
Y por lo tanto, hay que utilizar un map.
Este usuario es .foreach, ponemos un map.
Aquí lo que tendríamos, además es que vas a ver que es mucho más fácil,
porque ahora te quitas este list of users y lo ponemos aquí, list of users.
¿Vale?
Lo que te devuelve el map es la transformación de cada uno de los segmentos del array.
En list of users lo que tienes que devolver es lo que quieres que se guarde en ese mismo array.
Así que en lugar de crear aquí el letUser, vamos a hacer un return de esto directamente
y ya lo tendríamos.
Hay más cosas.
¿Por qué?
Porque fíjate que tienes nombre, fecha, URL.
Aquí hay diferentes opciones.
Uno, no sé qué tiene el usuario, pero si el usuario solo tuviese estas tres cosas
y quieres devolverlas igual, pues yo lo que haría aquí sería user, coma, y ya lo tendrías.
¿Vale?
Pero imagínate que dices, no, no, es que el user tiene nombre, fecha, URL, descripción,
tiene un montón de cosas.
Vale, no pasa nada.
Lo que hacemos, yo lo que haría es sacar nombre, fecha, URL de user
y aquí lo que pondría es nombre, fecha, URL.
¿Vale?
Sacamos solo lo que necesitamos y devolvemos solo lo que necesitamos.
Y ahora, súper importante, este active también, prohibidísimo, esto a fuego.
Fíjate, fíjate, es una ternaria, Q2 por la ternaria.
Pero es más fácil que esto, porque fíjate la ternaria lo que hace es,
si index es igual a cero, devuelvo true, si no, false.
Pero fíjate que qué es lo que te devuelve este index igual a cero,
pues si te devuelve un boleano.
O sea que esto, pam, ya está.
¿Cuándo es activo?
Cuando index es igual a cero.
Si es que ya lo estabas haciendo, no hace falta que lo vuelvas a hacer.
Ahora, a mí lo que me gusta en estos casos es ponerlo esto aquí.
¿Por qué?
Porque me gustan los cálculos, extracción de datos, cálculos y lo que sea,
y luego lo que tiene que devolver en el map.
Yo esto es como lo haría aquí cada uno que haga lo que quiera.
Pero bueno, esto es como yo lo haría.
Y ahora esto, pues ya te ha quedado bastante mejor.
Con esto ya lo podríamos dejar así.
Esto, obviamente, lo podríamos dejar en una sola línea.
Y, hombre, fíjate, de esto, esto sería por un lado, pues la izquierda sería la forma que hemos refactorizado un poco, ¿vale?
Y la de la derecha es la que teníamos antes.
Claro, pero es que fíjate.
A ver, además es que aquí, pues como con el linter no lo tienes, pues esto lo podrían mejorar también, ya per se.
Porque esto tiene más saltos de línea de lo que necesita.
O, bueno, igual es que se lo está copiando.
No, no, tiene más saltos de línea de lo que necesita.
Pero bueno, es como que puedes entender un poco mejor por dónde va justamente el código, ¿sabes?
O sea, es decir, ostras...