En la clase de hoy vamos a ver children, prop types, vamos a ver también dónde tiene que estar el estado, vamos a ver ref, vamos a usar un hook que se llama use imperative handler, eso es lo que vamos a hacer primero y luego ya utilizaremos el testing con react testing library.
Mira, yo ahora para trabajar hay que tener en cuenta que hay que tener levantada también nuestro backend, el backend que hicimos, así que lo primero que voy a hacer es levantar el backend con mpn run dev y esto me lo dejan en el puerto 3001, en el puerto 3001 ya tengo mi API preparada para trabajar.
Y por otro lado he abierto el proyecto que tengo en el frontend con nuestra aplicación de notas que también hay que levantarla, vamos a levantarla para ver cómo lo dejamos en pn run start, pues mientras esto está compilando nos debería dejar aquí en el puerto 3000 ahora nuestra aplicación de notas, no es la aplicación de notas más bonita que has visto, pero bueno no te preocupes porque iremos mejorándola, hay una clase que va a ser solo sobre estilos, así que ya mejoraremos nuestras notas y nuestros estilos de las notas.
Por ahora la tenemos así, pues vamos a ver cómo lo hacemos ahora. ¿Qué es lo primero que tenemos que hacer? Bueno, lo primero que vamos a hacer es este formulario que tenemos aquí, voy a cerrar la sesión, esto es una cosa que añadimos en la clase anterior, que podíamos cerrar la sesión e iniciar la sesión.
Cuando cierras la sesión aquí podemos ver que nos aparece el formulario, tenemos el formulario con el usuario, la contraseña y un botón de login.
Pues lo que vamos a hacer con esto primero es extraer en componentes esto, porque si vamos a nuestro código y vamos a components y vamos a ver aquí el app.js, vamos a ver que tenemos aquí un poco un desastrillo, ¿vale?
Tenemos un montón de cosas, tenemos la app que tiene un montón de estados, que tiene un montón de efectos, que tiene un montón de cosas aquí que hace y además tiene el formulario del login, que como ya dije en la clase anterior, esto es una mala práctica, ¿vale?
Tener métodos que al final lo único que hace es renderizar un componente, pues para eso lo creamos como un componente.
Pues eso vamos a hacer, este render login form que lo dejamos a medias en la otra clase, lo vamos a sacar a un componente, vamos a llamarle login form.js y vamos a extraerlo y a ver que retos nos encontramos al extraerlo.
Vamos a mover este formulario y aquí le vamos a llamar export default function login form, por ahora vamos a dejar así, hacemos el return que es lo que tiene que devolver y ahora todo esto, todo esto, vale, me pide que tiene que estar React aquí, pues se lo ponemos.
Aunque esto normalmente este de que necesite React en las últimas versiones ya no debería ser necesario, en las últimas versiones de Babel, porque han hecho que este import ya sea implícito y no tengas que ponerlo.
Bueno, ya vemos que hay un montón de cosas que se nos quejan, ¿vale? Se nos queja que le falta el handle login, este username, este password.
Una cosa que ya vemos que vamos a necesitar como tal es que tengamos aquí el estado.
Aquí tenemos dos opciones que podríamos hacer, una podría ser mantener, esto lo vamos a eliminar porque este render login form no lo queremos aquí, así que fuera.
Y este render login form que era este método, aquí ahora lo que vamos a hacer es utilizar el componente que he creado.
Ahora veremos todo lo que tenemos que pasar que ya te puedo decir que es bastante.
Aquí hay como dos opciones, ¿no?
Una, podríamos mover el estado porque este estado con el username, pues lo tenemos aquí y lo podríamos mover aquí, pero lo haremos después.
Por ahora vamos a ir bastante a saco en el hecho de decir, vale, ¿qué necesita el login form?
El username, handle login, cambiar cada vez que se cambia el username y todo esto.
Vale, pues vamos a ir aquí, props, username y le pasamos el username, que esto lo tenemos aquí en la app, ¿vale?
Si vamos para arriba, ¿ves? Tengo el username, el password, pues eso ya lo tenemos aquí.
Así que vamos a ir pasándole todo esto, voy a hacerlo en otro salto de línea aquí para que vaya quedando un poquito más legible.
También necesitamos el password, también necesitamos el handle, user.
Este método es el que vamos a ejecutar aquí, que cada vez que se cambie el nombre de usuario, lo que vamos a hacer es ejecutar este setState, pero este setState no lo tenemos aquí, por lo tanto lo tendremos que hacer aquí, que es donde tenemos el estado.
Ahora lo relleno, lo mismo con el password y necesitamos también un handle submit, ¿no?
Cuando hacemos submit con el formulario, que es justamente este de aquí.
De hecho, ya podemos, ahora que tenemos todo esto, username, password y tal, lo vamos a añadir aquí en las props.
Esto lo podríamos poner así, props, y ahora props.handleSubmit.
Esto sería props.username.
Esto que teníamos aquí, pues esto, lo voy a cortar, porque esto, si no, lo tendría que volver a repetir después.
Y esto es props.handle, y aquí vamos a poner esto, handle.username.change, handle.username.change.
Ahora aquí, este password es de las props, y esto, esto ahora me lo copio también.
Por ahora voy a copiar esto aquí, y el handle submit también, vale.
Esto me lo voy a cortar, props.handle.password.change.
Ok, handle.password.change.
Y esto lo vamos a dejar aquí.
Y el handle submit, que era un handle, ahí está, handle submit, es el otro método que le vamos a poner aquí.
Este método lo teníamos también por aquí, que era el handle login.
¿Veis? Que ahora no lo estamos utilizando.
Lo declaraste, pero no lo estás usando.
Vale, pues este justamente es el que le vamos a pasar aquí.
Bueno, con esto habríamos separado nuestro componente login form ya de el app.js.
Mucho mejor, ya no tenemos un método aquí, como este, ¿no?
Que todavía lo tenemos aquí, este también lo tendremos que separar.
Pero al menos ahora ya lo tenemos bien separado.
Lo podríamos refactorizar un poco.
Como ya sabes, cuando tenemos aquí las props, aquí directamente podrías desestructurar, ¿no?
Y decir, bueno, pues voy a sacar el handle submit o solo uno.
Por ejemplo, podríamos hacer esto.
El handle submit sí que lo extraemos, de forma que ya podemos acceder directamente.
Y luego en el resto, pues lo dejamos así.
Esto ya es ejercicio que te dejo para que vayas extrayendo cada uno de ellos
y vayas eliminando el props, punto, props, punto, porque así te queda mucho más claro el componente, ¿vale?
Así que por ahora lo dejamos así.
Lo importante, voy a asegurarme que esto funciona, ¿vale?
Parece que funciona.
Le damos a login, parece que todo funciona, refresco.
Vamos a ver si funciona.
Again, save.
Aquí está nuestra nota.
Todo se mantiene correctamente.
Por suerte, luego haremos test para no tener que hacer esto manualmente, ¿no?
De ver si las cosas siguen funcionando o no siguen funcionando.
Ahora que hemos hecho esto y que, bueno, vemos que funciona, pequeña refactorización, vamos avanzando.
Una cosa que quiero hacer es que cuando cierro sesión, este login, este formulario aquí, aparece siempre.
Y es un poco molesto, ¿no?
Que aparezca.
Lo que vamos a querer, y bueno, en realidad esto lo hacemos porque así os puedo enseñar unos cuantos conceptos,
pero lo que vamos a hacer es más bien que esto esté oculto y hasta que no le des a un botón no aparezca.
Así no sale el formulario ahí de repente, sino que tendríamos que darle a un botón para que aparezca el formulario.
Vale.
Pues para ello lo que vamos a hacer es en el login form vamos a añadir un estado que sea, por ejemplo, login visible, set login visible.
Esto lo tienes que tener ya dominadísimo.
Esto lo tienes que tener ya dominadísimo.
¿Por qué?
Porque lo hemos visto en clases de anteriores.
Si no, no pasa nada.
Siempre lo puedes revisar.
Ahora que tenemos esto, pues ¿qué es lo que vamos a hacer?
Vamos a hacerle que, vamos a añadir un botón, ¿vale?
Esto lo vamos a poner aquí para añadir más cositas del formulario.
Vamos a añadir aquí un botón que sea, no sé, le podemos llamar show login o show login, por ejemplo.
Show login.
Que al enseñar, al hacer clic aquí, vamos a cambiar el estado del login visible y lo vamos a poner a true.
¿Vale?
Vamos a querer que sea visible.
Pero por defecto esto no va a ser visible, ¿no?
Por eso le he puesto aquí el estado inicial a false.
¿Cómo vamos a hacer esto de que sea visible o que no sea visible o todo esto?
Mira, lo que vamos a hacer aquí, en lugar de poner un fragment voy a poner un div para que quede separado total.
Esto lo voy a mover un poco así.
Vamos a tener aquí como dos div dentro, ¿vale?
Un elemento aquí que va a ser cuando no está visible, que va a ser justamente el que tenga el botón este.
Lo vamos a poner aquí.
Y esto, este elemento, cuando el login no esté visible, es el que se va a mostrar.
Y por otro lado vamos a tener otro div donde vamos a tener el formulario.
Lo vamos a mover aquí.
Lo vamos a mover dentro.
¿Vale?
Aquí, perfecto.
Este div de aquí, espérate que lo indente bien, es el que se mostrará cuando este esté true.
Ya has visto los renderizados condicionales, ¿no?
Con los renderizados condicionales lo que puedes hacer es que se renderice una cosa u otra dependiendo, ¿ok?
O sea que dependiendo de si una cosa es true o es false, pues puedes hacer que se renderice una cosa u otra.
Ahora vamos a ver otro patrón y vamos a ver qué diferencia hay.
Solo para que la entiendas y que la tengas presente.
Lo vamos a hacer con estilos.
Lo que vamos a hacer, por ejemplo, es hide when visible.
¿Vale?
Cuando sea visible, cuando tengamos el visible que sea true, lo que vamos a hacer aquí es tener un display que si el login es visible, vamos a pasarle none.
Y si no, un string vacío.
Y aquí pondremos show when visible.
Esto lo podríamos hacer de otra forma, pero por ahora lo vamos a hacer así.
Esto lo que estamos creando aquí es un estilo en línea que se llama.
De forma que lo vamos a poder utilizar en nuestros componentes, en el cada uno que sepamos cuándo se tiene que mostrar uno y cuándo se tiene que mostrar otro.
Y haremos que desaparezca o no aparezca.
Pero vamos a ver que esto es diferente al renderizado condicional, porque el renderizado condicional lo que hace exactamente es que no lo renderiza.
El HTML no está ahí.
Y esto, en cambio, sí que mantiene el HTML, pero lo que no hace es no renderizarlo.
O sea, el HTML va a estar ahí, pero va a estar oculto.
Es diferente a lo que hacíamos con el renderizado condicional.
El estilo del botón, vamos a decirle que es hide when visible.
Cuando el login está visible, esto está oculto.
Y en cambio esto, vamos a ponerle un estilo que va a estar show when visible, porque esto justamente queremos que se muestre cuando el estado está invisible.
Esto más adelante además verás por qué hacemos esto y es un ejercicio interesante para un componente que haremos reutilizable después.
Pero por ahora es para que vayas viendo cómo se puede hacer también no solo un renderizado condicional, sino visibilidad de componente de forma condicional.
Esto puede ser con estilos en línea, pero piensa que esto al final podría ser una clase también y seguramente sería mucho mejor práctica.
Pero esto solo para que veas cómo lo puedes hacer.
También lo podrías hacer con un class name que fuese hide, por ejemplo, y seguramente quedaría mucho más limpio.
Entonces, aquí tenemos lo del show login, ponemos esto a true, pero también puede ser en algún momento que queramos cancelar.
O sea, que estemos mostrando el login y digamos no, pues ya no quiero mostrar el login.
Fuera del formulario vamos a añadir otro botón como este, que vamos a llamarle cancel, por ejemplo.
En lugar de show login vamos a poner cancel, que cuando le demos a cancelar pues lo vamos a ocultar.
Vamos a ocultar el formulario y vamos a volver a mostrar esto.
Vamos a ver esto cómo funciona.
Vámonos aquí.
Ya vemos ahora este botón show login que al darle clic me debería aparecer el formulario.
Vamos a ver si esto funciona correctamente.
Se muestra el formulario y ahora me aparece aquí un botón cancel, que al darle debería desaparecer el formulario.
Pues esta funcionalidad parece que funciona bien.
Ahora, ¿cuál es la diferencia con el renderizado condicional que hacíamos en otras clases?
Aquí, si yo le doy a cancel y tú aquí visualmente no ves el formulario, no lo ves.
Tú dices no está ahí.
Pero voy a inspeccionar y puedes ver aquí que sí que está el formulario del HTML.
¿Veis que está aquí?
Este HTML está aquí, pero está oculto.
Esto es diferente con el renderizado condicional que podemos hacer aquí, por ejemplo.
Este de aquí.
Esto al final dice, si tengo un usuario, renderizo esto.
Si no, renderizo esto.
Es diferente hacer esto porque esto sí que físicamente no está el formulario de crear una nota.
Aquí, si buscamos el formulario de crear una nota, no lo vamos a encontrar.
Lo que estamos haciendo es que se evite ese renderizado.
Así que ten en cuenta que no verlo no significa que no esté renderizado, sino que simplemente no está visible.
Es la diferencia entre el renderizado condicional de React y esto, que es una condición que es interesante, pero no es exactamente lo mismo.
Vale, pues ahora que tenemos esto, que puede parecer una tontería, lo que vamos a hacer con esta funcionalidad que parece muy chorra,
es crear un componente reutilizable con una funcionalidad muy chula que nos puede servir para más de una cosa.
Le vamos a llamar togable.
Bueno, no sé cómo se pronuncia, pero lo vamos a ver ahora.
Cuando lo veas escrito seguro que entiendes cómo es.
Para esto lo que vamos a hacer es crear un nuevo componente y le vamos a llamar, como he dicho, togable.
Yo creo que está guay, .js.
¿Qué es lo que va a hacer este componente?
Bueno, por ahora voy a importar React desde React y voy a hacer un export default y le voy a poner el nombre a nuestro componente,
que es togable.
Vale, perfecto.
Por ahora voy a devolver aquí, por ejemplo, un h1 y vamos a ponerle que es togable.
Ya está.
Por ahora hacemos esto.
¿Cuál es la idea que vamos a tener con este componente?
Bueno, gracias a una prop especial que tiene React, de la que todavía no os he hablado,
vamos a poder hacer que este componente renderice lo que nosotros queramos.
O sea, le vamos a pasar lo que tiene que renderizar.
Para ello, vamos a utilizar primero este togable.
Lo voy a poner por aquí.
Por ejemplo, aquí en Notas, lo voy a poner justo debajo del título.
Togable lo voy a guardar.
Y ahora aquí, ¿ves?
Tengo aquí togable, que solo es un h1 y ya está.
Pero imagínate que yo lo que quiero es que este togable, pues básicamente este mensaje
que tiene aquí, renderice lo que yo quiero.
Pues por ejemplo, un mensaje.
La forma más normal sería pasarle una prop mensaje.
Y entonces, al pasarle la prop mensaje, mensaje, otro mensaje.
¿Vale?
Le estamos pasando un string, que es otro mensaje.
Y lo estamos pasando por props.
Ahora, por props lo podemos cambiar.
Bueno, pues hay una prop especial que se llama children, que no se la puedes pasar de la forma normal como la estaríamos pasando aquí, sino que se le indica de otra forma.
Al final, si te fijas aquí en el h1, ¿cómo le estamos pasando lo que tiene que renderizar el h1?
Pues le estamos pasando como por children, notes.
Le estamos diciendo, vale, lo que estás envolviendo es lo que quiero que renderices.
Pues lo mismo podemos hacer con este componente togable, que le vamos a poner este mensaje, en lugar de pasárselo así,
lo que vamos a hacer es que el texto de otro mensaje es lo que vamos a envolver de esta forma.
Entonces, ahora togable, le pasamos el otro mensaje, que es lo que está envolviendo.
El otro mensaje es lo que envuelve el componente.
¿Cómo podemos acceder a él?
Con la propia especial children.
Y ahora aquí en children, en el render, podemos justamente renderizar lo que le estamos pasando.
Si ahora guardo los cambios, voy a poner otro mensaje desde children, para ver la diferencia.
Pues ahora se está renderizando exactamente bien.
Y eso lo estamos pasando de una forma distinta.
Tiene mucho más sentido, estamos envolviendo el componente.
Pero esto puede ir más allá.
Aquí, como puedes ver, hemos puesto h1 children.
O sea, de alguna forma ya le estamos diciendo el elemento que tiene que renderizar.
Pero es que aquí, en el children, aquí, tú le puedes pasar lo que quieras.
Puedes utilizar otros componentes de React, elementos del DOM.
Yo aquí podría poner, por ejemplo, un strong, y podríamos poner que esto fuese dentro de un div.
Podríamos poner enlaces, podríamos poner lo que queramos.
Y esto, al final, le va a llegar al componente.
Si ahora refresco, pongo desde children con html.
Aquí ahora, si inspecciono esto, puedes ver que tenemos el div con el strong.
O sea, ya las etiquetas también se están pasando.
Y podríamos ir más allá.
Esto también podemos meter aquí dentro componentes de React.
De esta forma ya podríamos componentizar.
Esta es una de las formas más fáciles de reutilizar un componente.
Porque ahora este componente, aunque se llama Togaball y todavía no hace lo que quiero que haga,
pero al menos ya sí que le podríamos pasar diferente contenido y se renderizaría.
Así que lo que hiciese este Togaball lo podríamos reutilizar muy fácilmente.
Pero vamos a ir un poco más allá.
¿Por qué le he llamado Togaball?
¿Por qué le he llamado con este nombre tan raro que no soy capaz ni siquiera de pronunciar?
¿Por qué no buscas un nombre más fácil?
Vale, te lo explico.
El caso es que esta funcionalidad que hemos hecho aquí del login for,
que hemos puesto que si es visible, que si no es visible y tal,
me parece una funcionalidad que puede ser interesante que reutilicemos.
Así que he pensado, pues ¿por qué no sacamos esto en este Togaball?
Y lo utilizamos aquí y más adelante lo utilizamos en otro sitio.
Pues vamos a ver cómo lo debería hacer.
Me voy a copiar estos estados porque al final el estado este va a ser el mismo.
Lo voy a copiar aquí.
Y fíjate, aquí hablábamos de login, pero ya no tiene tanto sentido hablar de login
porque esto lo podemos utilizar en el login o en cualquier sitio.
Así que ya utilizamos setVisible.
Vamos a importar el useState.
Esto sí que va a ser igual, solo que este check que estamos haciendo aquí,
la condición, esto va a ser ya con visible en lugar de login visible.
Ya no tiene sentido eso.
Por aquí lo voy a eliminar porque aquí no tiene sentido.
Vamos a utilizar el otro.
Tampoco va a tener un estado este componente login form.
Y aquí pone este div, esto que tenemos aquí.
Esto al final, esta funcionalidad, vamos a querer que esté en el otro componente.
Esta parte visual de tener los botones para mostrar algo y ocultarlo, cancelarlo o lo que sea,
vamos a hacer que esté realmente en el otro componente.
Así que esto lo vamos a quitar de aquí y nos lo vamos a pasar a este render.
Vamos a ponerlo por aquí.
A ver, vamos a poner aquí el div y vamos a poner este div.
Ahora este set login visible, pues lo mismo, es set visible directamente.
Vamos a seguir con esto.
¿Qué más tenemos por aquí?
Aquí tendríamos lo que mostramos.
Pero aquí, fíjate que tenemos como dos partes.
Tendríamos lo que sí que es inherente de este componente.
Aquí este formulario con el login y tal sí que es de este componente en concreto.
Esto no me lo puedo llevar a otro sitio porque entonces ya me estaría llevando el login.
No tiene sentido.
Pero sí que me puedo llevar esto.
Así que esto sí que me lo voy a llevar.
¿Vale?
Que va a ser lo que queremos que se muestre.
¿Y qué va a ser lo que queremos que se muestre para poder reutilizar este componente?
Pues justamente el children.
De esta forma, este formulario lo vamos a dejar ahí.
De hecho, todo esto lo voy a quitar, que ya no tiene sentido.
El formulario sí que lo dejo aquí.
Ahora, este botón que era el de cancelar, el de cerrar, ¿no?
Que queríamos cuando queríamos ocultar.
Vamos a dejar aquí.
Lo vamos a quitar de aquí, perdón.
Esto lo voy a intentar mejor para que se entienda.
Muy bien.
Venga, borramos aquí.
Y el cancelar lo vamos a poner por aquí.
Lo vamos a poner justo aquí.
Lo podemos poner justo después del children, por ejemplo.
Porque cuando está visible queremos que renderice el children y además que renderice el botón para dejar de renderizar lo que queríamos renderizar.
Pero aquí ya se ve lo interesante del children.
¿Por qué?
Porque este componente tiene toda esta funcionalidad en la que va a ser capaz de controlar cuando tiene que enseñar una cosa u otra,
pero no es consciente del contenido que va a renderizar.
¿Vale?
Esto es lo que lo hace tan importante y tan interesante esta prop children de que ahora tenemos una funcionalidad totalmente reusable sin importarle qué es exactamente lo que va a renderizar.
Voy a guardar aquí los cambios y ahora en el login form lo que nos falta obviamente es utilizarlo.
A ver, lo estoy exportando.
Sí.
Pues ahora vamos a traernos este togable.
¿Vale?
Lo he importado aquí.
Import togable.
Y lo que hacemos es envolver justamente lo que queremos.
¿No?
Este togable con el formulario.
Vamos a ver si esto funciona.
Vamos a ir a nuestro componente.
Vale, nos ha aparecido dos veces el show login.
A ver qué he hecho por aquí.
Show login.
A ver si es que lo he copiado dos veces.
Show login.
A ver.
Que me sale aquí dos veces.
Ah.
Vale.
Es que claro, como he hecho el togable.
Claro, os digo, ¿dónde sale ese otro show login?
Y es que en el app.js cuando os he explicado esta funcionalidad he dejado aquí un togable.
De ahí salía el otro show login.
Y de hecho, por eso sale el botón dos veces.
Pero además, ahora vamos a ver una cosa con el texto.
Vale.
Ahora sí.
Solo debería salir una vez.
¿Vale?
Ahora sí que está una vez.
Bueno, tenemos el show login y tenemos el cancel.
O sea, ya tenemos esta funcionalidad totalmente abstraída del login form.
De forma que la podemos reutilizar cuando queramos.
¿Vale?
Pero vemos que hay un problema todavía.
Y es que este show login tiene el nombre del botón.
Es todavía para el login.
Y esto no tiene sentido.
Lo tenemos aquí, ¿no?
Bueno, pues lo que podemos hacer también, obviamente, aparte del children, podemos seguir estilando y pasarle props a este componente.
Lo que vamos a hacer es que, aparte del children, vamos a poner un button label.
De forma que este button label lo vamos a poner aquí.
Y ahora, este button label lo va a personalizar aquí.
Y vamos a decirle que el button label aquí tiene que ser show login.
Ahora guardamos los cambios.
Bueno, ahora show login va a salir igual.
Le voy a poner todo en mayúscula para que veamos la diferencia.
Ahora, ¿ves?
Podemos cambiarle incluso el texto a ese botón.
Y esto es muy potente.
Porque ahora este botón lo podemos...
Este componente con esta funcionalidad, que lo que está haciendo es decidir si se muestra su contenido o no, lo podemos utilizar con cualquier otro contenido.
Esto, por ejemplo, lo podríamos utilizar para una modal.
Podríamos tener un componente que se llamase modal y que hiciese justamente esta funcionalidad.
Que tú le pases al contenido y que solo al pulsar un clic y tal, te aparezca la modal y todo esto.
O sea, sería exactamente un poco la misma estrategia.
Lo interesante de aquí es que ahora que tenemos esto, lo que deberíamos hacer, y de hecho lo vamos a hacer ahora.
Este show login lo voy a poner otra vez bien.
Y nos vamos por aquí.
Ahora sí que sale bien el show login.
Lo que vamos a hacer es, vamos a refactorizar también el node form.
Porque si nos vamos a la app, vamos a ver aquí que teníamos el login form, que esto lo tenemos bien ahora.
Pero, ¿ves? Este render, render create node form, esto es una mala práctica.
El tener método render, que lo que hace es renderizar un componente, no tiene sentido.
Entonces, siempre, como os dije, lo que tenemos que hacer es crear un componente.
Pues lo vamos a hacer.
Export, default, function, node form.
Un poco la misma estrategia que hemos seguido antes, ¿no?
Hacemos el componente, nos traemos nuestro render aquí.
Se nos va a quejar de que tiene que estar en el scope algo.
Import, react, from react.
Es posible que a ti ese error no te lo dé, porque eso igual es que cuando creé el proyecto todavía no estaba actualizado esto, lo que sea.
O a lo mejor es un tema del linter, pero bueno, solo para que lo sepas.
Ahora, igual que antes, ¿veis?
Aquí no tenemos esta información, que es el unknown, new node y tal.
Pues nada, lo mismo de antes, ¿no?
Podemos hacer on submit o handle submit, igual mejor.
A mí me gusta más handle submit.
El valor de la nueva nota, el handle node change y el handle logout.
Esto le tiene que llegar ahora por props.
El add node este va a ser el handle submit.
Handle submit.
Todo esto le va a llegar por props.
Y esta funcionalidad ya la tenemos en la app.
Todo esto ahora lo vamos a eliminar.
Vamos a donde estamos haciendo el render.
Vamos a hacer el node form y vamos a pasarle esas props que necesitamos.
¿Qué son las que necesitamos?
Pues son estas.
Me las voy a traer.
Y así, pues, esto por aquí, esto por aquí, esto por aquí.
Y ahora veremos que justamente esto lo vamos a poder refactorizar mejor.
Para que la app siga perdiendo peso.
No es buena idea tener todo el peso de tus componentes en un solo componente ahí enorme, ¿no?
Nuestro componente app estaba quedando muy grande.
Lo que vamos a hacer es que vaya perdiendo peso poco a poco.
Así que lo primero que hemos hecho es refactorizar nuestros componentes, sacar el render.
Ahora este render ya no lo necesitamos aquí.
Pero lo que sí que necesitamos es pasarle esto, ¿no?
El add node.
El new node este, a ver cómo era el new node.
Un momento.
New node.
Era new node y handle.
Vale, esto ya igual, ¿no?
O sea, esto es add node.
Esto es new node.
Esto es handle node.
Esto ya lo teníamos de antes.
Todo esto lo teníamos de antes.
Lo único que hacemos es pasárselo hacia abajo.
Vale.
Y esto guardo los cambios por aquí.
Y aquí se me queja que tengo aquí un import que no estoy usando y es que no lo voy a usar para nada.
Guardamos los cambios.
Y ahora se supone que cuando enseño el login y hago login, me enseña mi formulario y funciona correctamente.
Funciona correctamente.
Vale.
Funciona correctamente.
Refrescamos.
Hemos refactorizado correctamente nuestro node form.
Hasta aquí, bien.
Pero vamos con otro tema, ¿no?
Que es dónde tiene que ir el estado de nuestros componentes.
Si miramos la documentación de React, creo que dice algo así como que cuando tienes diferentes componentes que reflejan datos,
y esos datos son el estado y tienes que escuchar esos cambios para que cambie la UI y tal, al final lo importante es que ese estado esté en la posición donde sea compartido por esos componentes.
Pero claro, si miramos aquí, igual nos hemos pasado.
Hay veces que subimos mucho el estado de nuestros componentes y lo ponemos demasiado arriba.
En este caso, si miramos la app, podemos ver que este new node se lo estamos pasando hacia abajo, ¿vale?
Vamos a buscar este new node a ver dónde lo estamos utilizando, ¿vale?
Tenemos este add node, pero que esto también se lo estamos pasando hacia abajo.
Y si vamos mirando, pues vemos que lo estamos utilizando aquí, pero en ningún otro sitio.
O sea, realmente hemos elevado el estado a un sitio que no vale la pena porque no tiene ningún otro componente que esté leyendo de este estado.
Por lo tanto, lo que tenemos que hacer en este caso es bajarlo.
La buena práctica es elevarlo hasta ese punto donde esté en componentes compartidos que necesiten leer ese estado, pero en nuestro caso es que ahora ha quedado demasiado elevado.
Y lo interesante siempre es tener, uno, el número de estados mínimos necesarios y, segundo, los estados que realmente necesitan.
No tiene sentido que este estado lo tengamos aquí.
Así que lo que vamos a hacer con esto es llevárnoslo.
Este new node solo es un estado que funciona para nuestro formulario.
Así que lo vamos a tener mejor aquí que no en la app.
De esta forma ya vemos que vamos a simplificar esto.
Esto ya no se lo tenemos que pasar.
Este new node ya no necesitamos que se lo pasemos ahí.
Realmente ese new node lo vamos a tener dentro de nuestro propio componente.
Así que eso es lo que vamos a hacer.
Y ahora, este set new node, ¿cuándo tiene que ocurrir?
Bueno, cuando hacemos cada uno este cambio, el handle node change.
Así que esto también lo vamos a poder quitar.
Y lo quitaremos además del otro sitio.
Ahora vamos a poder hacer más interno esto.
Y ahora aquí, el handle change, esto tiene que ser con el event, is set new node, event, target value.
Que esto, si miramos ahora este, ¿veis?
Lo vamos a poner aquí, handle change.
Fíjate que además ya no necesitamos que el nombre del método sea tan handle node change.
Porque cuanto más cerca estás de la funcionalidad a la que te refieres, es más fácil de comprender y no tienes que ser tan específico en el nombre de la variable.
Porque recuerda que hay dos grandes problemas en el mundo de la programación.
Uno es el catching y quitar la caché, el hecho de refrescar la caché.
Y la segunda es el nombre de las variables.
En este caso, pues cuanto más cerca creas la constante a la que te estás refiriendo, pues más fácil es ponerle un nombre.
En este caso, este handle change en realidad ya lo teníamos por aquí.
Si lo buscamos, vamos a ver que teníamos este handle node change.
¿Ves?
Es exactamente lo mismo.
Pero esto ya no lo necesitamos aquí, esto ya lo podemos quitar.
Esto por un lado, ¿vale?
Vamos a guardar aquí los cambios.
Ahora este new node y handle node change, esto ya no lo necesitamos.
Así que hemos movido un poco lo que sería nuestro estado hacia abajo.
Podemos mejorar todavía porque este handle submit para añadir una nota tampoco tiene mucho sentido aquí.
Aquí se puede ver que se está haciendo como...
De hecho, ahora se queja, ¿no?
Porque dice, oye, esta información no la tienes.
Y es verdad, porque esto ahora lo hacemos en otro sitio.
Entonces, aquí lo que tenemos que hacer es como mantener cierta funcionalidad, pero no toda.
Por ejemplo, esto de crear la nueva nota y todo esto, esto lo podemos hacer en otro sitio.
Lo podemos hacer aquí en el handle submit este.
Lo que vamos a hacer aquí es un handle submit.
Vamos a hacer esto.
Vamos a olvidarnos de lo que le llega por ahora por las props.
Y en el handle submit aquí lo que podemos hacer es, primero, importante, con el event, prevent default, ¿vale?
Lo que vamos a hacer es evitar cómo se hace el submit, el formulario, por defecto.
Y ahora lo que podemos hacer, pues es, por un lado, crear la...
Como estamos haciendo aquí, el objeto.
Esto de crear el objeto lo podemos crear aquí porque aquí tenemos la información de la nueva nota
y aquí podemos hacerlo el importan y todo esto.
Así que esto lo podemos quitar de aquí.
Este addNode con el evento, esto también lo podemos quitar porque esto no es exactamente lo que queremos añadir.
Y si seguimos viendo, podemos ver aquí que hace un setNewNode,
que esto lo vamos a querer hacer en el otro componente.
Pero sí que hace este setNodes, que esto sí que es importante que lo haga en este nivel
porque el listado de notas sí que lo tenemos en este nivel.
Entonces, lo que vamos a hacer es, aquí vamos a mantener la lógica de añadir la nota.
Pero no en el estado, sino en el servicio.
Porque fíjate que aquí está llamando un servicio y está creando con una nueva nota.
Y aquí tiene el nodeObject.
Pues lo que vamos a hacer con este addNode, lo vamos a llamar createNode.
Bueno, addNode lo vamos a dejar.
Y vamos a hacer que se le pueda pasar por parámetro, ¿vale?
Así que vamos a poner el nodeObject aquí, que se le pase por parámetro.
Y una vez que ocurra todo esto, esto lo vamos a quitar de aquí y esto lo vamos a mantener así.
Lo que va a hacer cuando se llame este método, va a llamar al servicio con la nota que se le pasa por parámetro
y cuando devuelva esta nota, la va a añadir a la lista de notas, ¿vale?
Bueno, ahora porque está el linter así, pero ahora lo arreglaremos.
Quería enseñar a la lista de notas.
Entonces, ¿qué hago con este método en realidad?
Pues este método se lo vamos a pasar al nodeForm.
Como ya no necesitamos el handleSubmit, vamos a pasarle, por ejemplo, el addNode con este método addNode.
Y en el componente vamos a tener aquí handleLogout y addNode.
Y este método addNode ahora lo vamos a poder utilizar aquí justamente para pasarle nodeObject,
para que haga lo que tenga que hacer por el otro lado.
Y aquí además sí que podemos hacer el setNode y refrescar, de forma que el formulario desaparezca.
Eso es una cosa que estamos haciendo antes y no queremos perder.
Así que de esta forma ya tendríamos parte de la funcionalidad que te dé sentido que esté aquí,
la mantenemos aquí, pero otra para tener justamente toda la gestión del estado en este componente,
en lugar de siempre mantenerlo lo más arriba posible, lo que estamos haciendo es mantenerlo en el sitio adecuado, ¿vale?
Con esta forma, pues tendría muchísimo más sentido.
Ahora podríamos añadir un poco más de, no sé, por ejemplo, create a new node.
Vamos a ponerle un subtítulo a esto, ¿vale?
Al menos para que sepamos qué es este formulario.
Ya tendríamos esto, tendríamos el de cerrar su opción, esto sería para el save.
Bueno, aquí hice una mezcla de inglés y castellano.
Vamos a poner aquí logout.
No, logout no, este handleLogout, esto que he puesto aquí.
Bueno, a ver, no tiene mucho sentido que en el createNewNode pongámoslo de logout.
O sea que lo vamos a quitar, ¿no?
A ver, handleLogout.
Ah, sí, vale, ya sé por qué hacíamos esto.
Lo vamos a quitar de aquí.
Bueno, vamos a mantenerlo, porque se lo estamos pasando por parámetro,
aunque en realidad lo podemos haber dejado en el app.js.
Vale, vamos a ver cómo se ha quedado todo esto.
A ver, que me he cargado este botón de aquí.
Este botón de aquí que me he cargado.
El de logout, que le he cambiado el logout y al final.
Bueno, pues aquí tendríamos nuestro para crear la nota.
Parece que funciona visualmente, al menos,
pero vamos a ver si funciona realmente como tiene que funcionar.
Vamos a poner después de otro refactor y vamos a guardar esto, ¿vale?
Aparece aquí correctamente.
Y esto es importante, esto significa que el estado de la app
sí que lo estamos actualizando bien.
Parece que también se ha quitado el estado para refrescar
y que esto se limpie.
Parece que todo ha ido bien.
Y vamos a refrescar y aquí se ha guardado bien.
Ha hecho bien la llamada a la API y todo ha ido correctamente.
Así que en este caso, hemos movido el estado de la app hacia abajo.
Parte del estado de la app hacia abajo.
Porque no tenía sentido que estuviese ahí.
En este punto, te mando un ejercicio.
Y es que ahora que has visto esto,
te puedes imaginar que a lo mejor se puede hacer algo similar
con otro tipo de estado.
Ahora que sabes esto, a ver cómo lo harías el mover cierto estado,
como por ejemplo este del username y el password,
y a qué retos te puedes enfrentar una vez que muevas este estado.
Porque a lo mejor tiene sentido que lo muevas,
pero te puedes encontrar lo que nos hemos encontrado aquí.
Que sí que tenía sentido moverlo,
pero hay algo que hemos tenido que mantener de alguna forma.
Así que este es el ejercicio y a ver cómo te sale.
Ahora que ya tenemos todo el tema de Create Node y todo esto,
¿qué podemos hacer?
Pues mira, aquí en el Node Form,
ya que hemos creado nuestro Togable Component,
vamos a utilizarlo aquí también
y vamos a ponerle el Button Label que sea un New Node.
Y aquí, igual, Togable.
Y ahora vamos a ver si esto también funciona con nuestro nuevo componente.
Aquí ponemos un New Node, le voy a dar y ya no sale.
Y le doy a Cancel y me vuelve a salir.
Así que de esta forma hemos visto también
cómo nuestro componente reutilizable Togable
lo podemos utilizar no solo para el tema de hacer el login.
De hecho, si voy aquí, ¿veis?
El Show Login, entonces me sale el formulario, New Node.
Ya tenemos un componente totalmente reutilizable
que esta es la magia de React.
Siempre que puedas, tienes que crear componentes reutilizables.
No solo componentes como este que estamos viendo
que parece una tontería, ¿no?
Que estamos haciendo una funcionalidad que haga un Togable.
Pero bueno, está mejor de lo que uno cree.
Sino que además pueden ser visuales.
Por ejemplo, este H3.
Por muy pequeño que parezca, un componente nunca es tontería.
Por ejemplo, si tú tienes...
Y esto es lo que se le llamaría un Design System.
Básicamente es tener un sistema de componentes visuales
en los que tú le pasas el children o le pasas ciertas props
y funcionan de una forma determinada,
pero siempre tienen como algún tipo de...
O lógica o estilos que se van a mantener siempre
en la misma línea dentro de ese Design System.
Así que puedes tener seis títulos diferentes,
headline, sub-headline, no sé qué.
Y aquí en lugar de utilizar H3, pues aquí pondrías title.
Y entonces directamente tú puedes hacer que se renderice por detrás
un H3, pero visualmente además que tenga un sentido.
Hay un montón de proyectos y de hecho vamos a verlo aquí.
Veremos clases, vamos a ver Bootstrap, vamos a ver Material UI...
Bueno, vamos a ver unos cuantos, ¿ok?
Pero hay un montón de opciones.
Por ejemplo, hay uno que últimamente estoy utilizando
un montón en Twitch, que es el de Chakra UI.
Lo que hace también es que tienes un montón de componentes
ya establecidos y que tienen, pues visiblemente,
tienen un estilo definido.
Por ejemplo, aquí, ¿vale?
Si vamos a ver un botón, ¿vale?
Vamos a botón, ¿vale?
Y ya tiene unos estilos.
Y tú solo lo que tienes que hacer es button
y encima le puedes pasar algunas props
para cambiar su look and feel.
Pues eso sería un poco un design system.
Muy bien, ahora, ya tenemos esto, ¿no?
Pero después de crear una nueva nota,
además, si te has fijado, ¿no?
Lo que me gustaría al crear una nota, fíjate.
Yo tengo aquí, le doy a New Note.
Entonces me aparece este formulario para crear la nota.
Gracias.
Gracias.
Gracias.