Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida. Oye, si me ves que la voz, bueno, si me ves no, si me escuchas, y ves que tengo la voz un poco pillada, es que todavía estoy un poco, no estoy a 100% de la garganta, pero tenía ganas de hacer pues el directo y he dicho, bueno, pues más o menos, lo hago con tranquilidad, con cariño, hacemos la prueba técnica, os voy explicando y ya está.
Hombre, hoy no vamos a ver mucho CSS y es una de las cosas buenas, que esta prueba es bastante sencilla en el punto de vista de la complejidad que tiene del CSS, que no tiene, no tiene complejidad. De hecho, os voy a enseñar ya la prueba.
Esta es la prueba técnica, esta es la prueba técnica. Parece sencilla, pero tiene unos cuantos trucos y está bastante curiosa porque va encrechendo, ¿sabes? O sea, tú vas empezando al principio, vas diciendo, ay, qué fácil está esto, y luego poco a poco, no es que sea difícil, sino que cada cosa que te piden le pone una piedrecita más encima que hace que se complique un poco, ¿no?
Te voy a enseñar para que veas la página, cómo quedaría y te voy a decir un poco dónde está la complejidad. Mira, esta es la prueba técnica, donde te piden, por ejemplo, que tengas un botón para colorear las filas, que se ordene por país, que puedas restaurar el estado inicial, que puedas borrar usuarios y que le des a restaurar y que restaure los usuarios que había antes.
Que puedas filtrar por país también, ¿no? Y que mientras vas escribiendo, que lo filtres. Pero el tema es que también te pide ciertas cosas como, bueno, vale, esto está muy bien, pero tienes que evitar que se vuelva a renderizar cuando hagas un sort y no sé qué.
Va ahí viendo, por ejemplo, el fetch 100 rows of data using the API. Bueno, esto fácil. Mostrar la data en una tabla. Esto, ostras, yo cuando lo he visto, me queda un poco, hostia, a mí que me pidan una tabla.
Hace mucho tiempo no me he pedido una tabla. Pero tiene sentido, o sea, tiene sentido lo que se ve aquí, porque al final es una tabla. Lo que veis aquí es una tabla.
Y esto es muy importante porque muchas veces creemos que las tablas están mal ya por defecto y no. Hay veces que una tabla tiene sentido, ¿sabes? Una tabla, si quieres enseñar información de forma tabulada, pues usa una tabla que tiene sentido, ¿vale?
Luego, ¿qué más cositas tiene? Proveer una opción para colorear los rows. Esto no es muy difícil. Sobre todo, ah, hay que tener en cuenta que esto era un live coding.
O sea, yo lo voy a hacer como tal, como un live coding. Esto no es una prueba de llevarte a casa. Esto es una prueba de tú hacerla en una hora.
Tienes una hora para hacer esto. Y vais a ver. Luego, hay unas cuantas cosas que aquí tienen... Claro, tú te vas confiando y luego dices, ostras, la leche.
Por ejemplo, este de aquí. Permitir que la información se pueda ordenar por país como se demuestra en el ejemplo, ¿no?
Y en el ejemplo, pues podéis ver que le das a ordenar por país a este botón y entonces se ordena por país, ¿no? De forma como alfabética.
Y le das otra vez y te lo deja de ordenar, ¿no? O sea, te ordena y desordena.
Y esto es un error muy común y lo vais a ver, ¿no? Lo haré mal para que veáis, ¿no? El típico error que tiene la gente.
Y lo vamos a hacer bien después para que veáis. Y además vamos a utilizar una cosa muy nueva, muy nueva, que es un nuevo método de array y vais a ver cómo os puede ayudar en este caso.
Vais a ver el error muy común que mucha gente comete aquí y cómo solucionarlo con una cosa muy nueva de JavaScript.
Que si lo haces, yo creo que le vuelas la cabeza a quien sea, ¿vale? Le vuelas la cabeza.
No voy a decir la empresa en la que ha salido la prueba, pero sí que os puedo decir. Es una empresa europea que tiene muy buena pinta y son 55.000 euros de sueldo como frontend engineer si pasabas esta prueba y otra más, ¿vale?
Esta sería la primera. Y esta es un live coding. Esto significa que la tienes que hacer en vivo y en directo con ellos, ¿ok? Con ellos.
La segunda todavía no la tengo, pero bueno, a ver si pasa, pues a ver si la podemos conseguir y también la hacemos.
¿Qué más? Porque ya veis que va encrechendo.
Luego, el poder borrar una fila como se muestra en el ejemplo, o sea, que se puedan borrar.
Esto está fácil. Esto es fácil, ¿no? Porque al final es un filter.
Pero luego dice, implementa una feature que te permita al usuario restaurar el estado inicial.
O sea, que todas las filas que habías borrado que se puedan recuperar.
Y claro, esto la idea es que lo hagas sin un fetch.
Entonces, claro, esto queda bastante como, ostras, ¿y esta qué viene, no?
Entonces le das a restaurar el estado inicial y deben volver a aparecer.
Esto también lo vamos a ver, ¿vale?
¿Este puesto es mid-level? Yo diría que sí que es mid-level.
Hay que tener en cuenta, parece una prueba fácil, pero hay que tener en cuenta que la tienes que hacer en una hora
y la tienes que hacer lo mejor posible.
Yo creo que sí que es de mid-level porque es 55, aunque sea en Europa, no es para juniors.
Ya lo digo yo, ¿eh?
Creas un estado y luego usamos un estado de abstracción.
¿Ves? Error muy común.
El utilizar dos estados para esto.
También lo vamos a comentar, ¿vale?
Pero no, no utilicéis dos estados.
Es que por eso os digo que es una prueba trampa.
Parece fácil, pero hay muchos sitios donde te pueden pillar.
Aquí, luego os lo voy a ir explicando luego mientras lo vamos haciendo, ¿vale?
Pero el de utilizar dos estados para esto es un error.
Y ahí os pueden pillar porque puede deciros, ah, pensad que era fácil, ¿por qué haces esto?
Y clasca, te van a pillar, te van a pillar.
O sea que, vale, esto de, bueno, manejar cualquier error potencial que te pueda ocurrir,
implementar una feature que te permita filtrar los usuarios por país.
O sea, antes era ordenarlos y ahora es filtrarlos.
O sea, que puedes poner aquí Germany y que solo te salgan los de Germany.
O Netherlands y solo te salgan los de Netherlands.
Este es fácil, lo que pasa es que luego te dice evitar que los usuarios se vuelvan a reordenar
cada vez que el usuario cambia el filtro por país.
O sea, cada vez que el usuario cambia este filtro por país, se tiene que, o sea, tienes que evitar
volver a hacer el sort si no, claro, porque en realidad a lo mejor no es necesario.
O sea, si yo pongo esto, yer, ¿ves? Tiene los mismos usuarios.
En cambio, aquí ha cambiado esto. Esto tendrás un estado, ¿cómo evitas que esto se vuelva a renderizar?
Esto también lo vamos a ver. Y ya veis que poco a poco tiene su historia.
Y luego, que al hacer clic, puedas ordenar por cada columna.
O sea, que si le damos clic aquí, pues se ordena por esta columna, esta columna, esta columna.
Y esto parece fácil también, parece fácil también, pero también tiene un poco de truco,
porque creo que hay algunos nombres que tienen acentos.
Creo que había algún nombre que tenía algún acento y tal, y entonces dependiendo cómo lo haces,
¿ves? Estos dos, o fe, o con esto, ¿no?
Entonces te tienes que tener una cosa en cuenta ahí porque si no la puedes liar, parda, también.
Bueno, o sea, que tiene cosas muy interesantes, aunque parece que no, ¿eh?
Pues esto es un poco el resumen, ¿vale? Lo vamos a hacer con React, con TypeScript,
desde cero y con bit. Y vamos a ver que después, que no nos da tiempo de hacer,
pero bueno, vamos a empezar ya.
Vamos a hacerlo con TypeScript porque en la prueba lo piden con TypeScript.
Pero hay una cosa también muy interesante de lo que piden con TypeScript.
Lo piden con TypeScript, pero te dicen, puedes utilizar cualquier herramienta que acelere tu desarrollo.
O sea, se supone que podrías utilizar G-Hacko Pilot, buscar en Stack Overflow,
también lo decían en la prueba, y en el tema de TypeScript, yo, vais a ver que vamos a utilizar algo, ¿no?
Porque aquí ya nos dicen, para hacer esto, necesitas utilizar esta API.
Bueno, pues vamos con esta API. Esta API es muy famosa, la recomiendo un montón,
porque la verdad es que está bastante chula. Es una API en la que te dan una serie de usuarios,
una lista de usuarios, ¿veis? Aquí tenéis los usuarios, con un montón de información,
y encima lo podéis paginar, que luego si nos da tiempo, lo paginaremos,
y si no, lo haremos la semana que viene, no os preocupéis.
Esto es lo que hay que utilizar. Básicamente, vamos a ver, porque si le damos aquí,
a ver si esto ya nos da a los usuarios, sí. Ya tenemos aquí un montón de usuarios,
pero fíjate que eso nos da 12 ítems. Y ya lo primero que nos dice es que tenemos que recuperar 100.
Así que tendríamos que ver aquí cómo es la forma en la que se pueden pillar 100 usuarios.
A ver, Paging, bueno, yo entiendo. Ah, mira, Pagination, Seed, Results, vale.
Pues ahí lo tenemos, ¿vale? Así que lo primero, vamos a poner Results,
y vamos a poner que queremos 100, ¿vale? A ver si... Ah, pues me ha puesto lo mismo.
Ah, no, es que son... Aquí, aquí. Vale, vale. O sea, ¿que da 100 por defecto?
¿Da 100 por defecto? Ah, no, da 1, da 1. Vale. O sea, que está bien lo que he hecho.
Está bien lo que he hecho. Habría que poner aquí Results 100 y ya está.
Bueno, pues vamos a empezar con nuestra prueba. Vamos a crear aquí NPM Create Bit Latest.
Bit es un empaquetador de aplicaciones web. Prueba, técnica, empresa, 55K.
Vamos a llamarle 55K. Vamos a poner aquí React, Ir, TypeScript, más SWC.
Entonces, entramos y ya instalamos aquí todos los paquetes que tenemos.
Utilizamos PNPM Install, que es una alternativa a NPM.
Si te gusta más NPM, utiliza NPM, que no pasa nada, ¿vale?
Y ahora, lo típico. Yo voy a utilizar Slin para inicializar el linter y todo esto.
Vale. De JavaScript, React. Utilizamos TypeScript. Esto va a ejecutarse en el navegador.
Utilizamos un sistema popular de estilos, que sea estándar, que es el que nos gusta.
Ponemos JavaScript y ya está.
¿Qué es SWC? Una alternativa a Babel. Es una alternativa a Babel que es el que nos va a compilar el código JavaScript para que funcione el navegador.
¿Te gustaría instalarlos? Sí. Y le decimos que queremos utilizar PNPM.
Pero bueno, podéis utilizar que queráis.
¿Es mejor que Babel? Sí que es mejor que Babel en el sentido de velocidad.
Está bastante más rápido que Babel porque está hecho con Rust.
Pues ya abrimos aquí el proyectito este y vamos a crearle un readme, readme.md, donde vamos a pegar el readme que teníamos por aquí.
Y así lo vamos a poder tener bastante pendiente de lo que tenemos que hacer y dejarlo.
Lo primero, asegurarnos que nos ha creado bien aquí todos nuestros ficheros.
Los tenemos aquí. Vamos al app.tsx. Nos ha creado aquí cositas, pero el linter todavía no nos funciona.
Vamos a ver por qué no nos funciona el linter.
No nos funciona el linter porque, no sé por qué aquí no aparece nada, pero creo que deberíamos decirle el proyecto que tiene que cargar, que es el .tsconfig.json.
Y ahora sí, ¿vale?
El proyecto solo tienes que decir porque utilizamos TypeScript y entonces tiene que saber la configuración de los tipos y todo esto.
Así que solo añadiendo esto, ya lo tendríamos.
Y en el sling también vamos a ir desactivando algunas reglas que a veces son un poco problemáticas.
Por ejemplo, esta de missing return type of function, esta la voy a quitar porque no quiero estar aquí TypeScript.
A ver si soy capaz.
Esta de aquí.
Ah, mira. De hecho, creo que puedo hacer esto y así me la copio.
Voy a quitar esta regla porque yo no estoy muy de acuerdo con esta regla.
Me gusta bastante que justamente sea TypeScript el que sepa los datos que se infieren y ya está.
Que React tenga que estar en el scope, tampoco lo vamos a utilizar porque no tiene sentido porque automáticamente Bit ya lo hace por nosotros.
Y además de una forma mucho más cómoda.
Súper importante.
Os voy a decir una cosa que puede ser un poco polémica, ¿vale?
Pero si hacéis una prueba técnica como esta, siempre que podáis tener preparado o tener muy claro cómo tenéis que configurar el linter.
Es que el linter os acelera un montón, ¿vale?
Os acelera un montón y creo que vale muchísimo la pena.
Así que ya sabéis.
Utilizar siempre un linter porque si no es un poco rollo.
Así que mira, ya tengo el linter.
Ya sé las cosas que funcionan.
Deja de funcionar.
Levantamos aquí MP en Randev.
Nos vamos aquí.
Y vale.
Nos está petando pero porque no necesitamos esos ficheros.
Este no lo necesitamos.
Este no lo necesitamos.
Y de hecho esto no lo vamos a petar.
Es que es raro ese error, ¿no?
Porque en realidad sí que existía.
O sea, ese fichero sí que existe.
A ver.
Vale.
Ya tenemos aquí nuestro fichero vacío.
Vamos a poner aquí prueba técnica.
Vale.
A ver.
Os voy a decir una cosa.
Es súper importante las pruebas técnicas.
Os lo he dicho alguna vez.
Pero es súper importante las pruebas técnicas que realmente veáis que las cosas que estáis haciendo funcionan.
O sea, no estéis ahí un buen rato haciendo cosas y que luego de repente aparezcan cosas en la pantalla y tal.
Entonces, yo viendo un poco, ¿qué es lo que haría?
Yo seguiría las instrucciones.
O sea, no os volváis locos de saltar al tercer punto o al segundo.
Sino que, oye, ¿nos dicen que hagamos el fetch?
Hacemos el fetch.
¿Que el fetch funciona?
Vale.
Pues entonces hacemos lo que sea.
¿Cómo iríamos?
Yo iría a destajo.
O sea, yo primero, primero iría a destajo.
Luego, primero lo haría.
Luego lo haría bien.
Y luego lo haría rápido.
Entonces, primero lo haríamos.
Lo que hay que hacer para hacer el fetch es tener un use effect.
Yo sé que hay gente que le gusta instalarse a Axios y tal.
Yo os recomiendo que si podéis saber fetch, para este caso, oye, mejor que mejor, porque vais a ahorrar un montón de tiempo.
Y más adelante, o React Query.
Muchas veces veo el error de que hay gente que se puede instalar React Query, que tiene todo sentido en el mundo.
Que, por cierto, la semana que viene vamos a aprender React Query aquí en directo el miércoles, ¿vale?
En el curso de React vamos a tener React Query, ¿ok?
Una duda, ¿este tipo de pruebas técnicas con tan corto tiempo luego sirven para algo cuando te contratan?
Hombre, sí.
En una hora, viendo programar a una persona en una hora, te da para mucho, ¿eh?
Puedes realmente, puedes aprender mucho de esa persona.
Cómo piensa, cómo se enfrenta a un problema.
Las ideas, no solo de lo que escribes, sino de lo que deja de escribir.
O sea, quiero decir, a veces no solo es el código que hace, sino las ideas que te da del código que ha hecho, ¿sabes?
Porque a lo mejor no le da tiempo a hacer todo lo que quería.
Pero le puedes hacer preguntas.
Le puedes decir, oye, ¿pero qué harías en este caso?
Y eso tiene todo sentido en el mundo, ¿vale?
Entonces, esta es la API que ya hemos visto que tenemos que utilizar, que nos da todos los resultados.
Pues nada, cuando tenemos aquí la respuesta, entonces esta respuesta la vamos a guardar en un estado.
Así que tenemos que hacer el user state.
Esto es muy mecánico, pero es que esto hay que sabérselo de memoria, ¿sabes?
De memoria que sabérselo.
Hay que sabérselo de memoria.
Porque si no, es que te van a pillar y te van a destrozar.
Mira, aquí lo tenemos dentro de Results.
O sea, qué importante.
Lo que queremos guardar son los usuarios que están dentro de Results.
Muy importante también siempre tener la API bastante a la vista.
O sea, un error muy común es empezar aquí a hacer console logs, historias.
No hagáis console logs, que perdéis mucho tiempo.
Otra cosa que os recomiendo, ya que en este caso, fijaos que utilizamos TypeScript y tal,
y ahora lo vais a ver, ¿no?
Que tenemos aquí un problema en el que, mira, encima aquí me dice que tengo que hacer esto una wait.
Dice, o tiene que hacer un catch, ¿vale?
A ver, pues, catch, error, console, error, error.
Nos dice después que miremos esto.
Vale.
Lo primero, fijaos que lo primero que os dice es fetch of data using the API.
Bueno, pues ya estamos haciendo el fetch.
Para al menos ver que está funcionando esto, porque si no sería un poco raro,
yo os recomiendo que sepáis que podéis hacer el stringify the users,
porque si ponéis users directamente, bueno, igual sí que os sale, igual sí que os sale.
No, no sale, aquí hay un rollo, no sale nada.
Stringify the users, ¿vale?
¿Vale?
Al menos, al menos que veáis que tenéis la información.
De nuevo, si podéis evitar, hostias, qué raro esto que ha petado.
Ah, porque el useEffect este se me ha olvidado las dependencias.
Mira, ¿ves?
Un error importante.
Error importante por mi parte.
De hecho, una cosa que os dije es que si, para que no os pase esto que me ha pasado a mí,
que como veis me ha pasado, un error muy común cuando hacemos live coding
es que se nos olviden, por ejemplo, las dependencias, el array de dependencias y este tipo de cosas, ¿vale?
Como me ha pasado a mí.
Tenéis dos opciones aquí.
Una, utilizar el linter, que el linter os avise.
Y otra, que yo os recomiendo bastante que lo hagáis,
es que empecéis el useEffect siempre por las dependencias.
O sea, que si escribís un useEffect, lo primero que escribáis sea el array de dependencias, ¿vale?
O sea, y que estéis acostumbrados a eso.
A que siempre pongáis primero el array de dependencias.
La verdad es que la API del useEffect da bastante rabia,
porque como es así al revés, es un poco rollo.
Pero os recomiendo mucho que mentalmente lo hagáis siempre así para que no se os olvide.
¿Vale?
Como me ha pasado, por cierto.
Bueno, pues otra es tener un linter.
Que también podéis instalar el linter de React y os lo debería poner, ¿vale?
Bueno, pues ahora que ya tenemos esto, al menos yo lo que he puesto es,
oye, vamos a ver la API y ya nos olvidaremos de esto.
Ya lo ves aquí.
Fíjate que no hemos puesto un console.log, no hemos puesto nada,
pero al menos ya sabemos que tenemos la información.
Ahora, un error muy común, un error muy común,
esto, esto, por favor, si, tanto si sabes TypeScript como si no sabes TypeScript,
esto a fuego, ¿vale?
Un error muy común que te va a hacer perder mucho tiempo es que tú ahora,
claro, como te están diciendo que utilices TypeScript,
ahora, ¿qué es lo que vas a hacer tú?
Pues vas a decir, ah, pues voy a tipar el usuario y cosas así.
Ni se os ocurra perder tiempo en tipar nada.
O sea, no me refiero a que no pongáis tipos, obviamente os tenéis que poner,
pero lo mejor que podéis hacer es que os vais aquí, os vais a row,
os vais a typecheck, por ejemplo, o cualquier servicio de estos que os guste,
a ver si me acuerdo, generate, typescript, creo que a typecheck, me acuerdo.
Bueno, vais a cualquiera de estos, generate, types, from JSON, yo qué sé,
hay esto, quick type, el que os guste más, es que hay un millón,
hay un millón, o el que os dé la gana,
pero no se os ocurra poneros a tipar a mano,
sobre todo si os han dado la puerta de poder tipar vosotros,
o sea, de utilizar cualquier cosa.
Si tenéis una extensión de Visual Studio Code, buenísimo.
Si tenéis una página, yo utilizo esta página porque me da mucho palo,
la verdad, instalarme ninguna extensión,
pero aquí tendríamos Apple Results y ya está.
O sea, ya con esto lo tenéis todo tipado.
¿Esto está permitido una prueba en vivo?
Yo creo que sí.
¿Por qué?
Porque una prueba en vivo, si tienes una hora,
el hecho que te tengas que poner a tipar todo lo que sea,
pues a mí me parece una pérdida de tiempo.
Muchas veces te van a avisar,
oye, puedes utilizar herramientas,
te van a avisar antes.
Y si no, preguntas.
Oye, ¿puedo utilizar un recurso para tipar automáticamente
y así no perder tiempo y seguir desarrollando?
Lo decís y va a quedar súper bien.
Vas a quedar de lujo.
Así que ya sabéis, haced eso.
Nunca hagáis esto.
Eso está mal, ¿no?
No está mal, de verdad.
O sea, en una prueba en vivo os van a dejar,
os van a dejar que miréis documentación,
que a veces incluso que utilicéis GeekHackoPilot,
o sea, van a dejar un montón de cosas.
Pensad que es muy estresante una prueba en vivo.
Y que le podáis preguntar, no hay ningún problema.
Yo creo que usar GeekHackoPilot sería raro
y yo tendría un poco de cuidado con eso, ¿eh?
Pero bueno, si os dejan, pues mejor.
Pero yo, todo lo que sea que no os queda claro,
lo preguntáis.
Preguntáis, siempre preguntáis, ¿vale?
Vale, types de TS.
Y aquí ya ponéis todo esto
y ya tenemos todos los tipos.
Y ya, pues nos olvidamos,
porque lo bueno de esto,
bueno, esto no lo voy a poner como resolve,
lo voy a poner como user,
porque es justamente el user.
Y aquí vamos a poner que esto es un array de users
y ya está.
Bueno, aparte de esto, pues mira,
si es que te ha creado hasta los enums,
o sea, en el caso que los necesites,
que no los vamos a necesitar.
Pero bueno, yo os hago para que lo sepáis, ¿vale?
En este caso vamos a hacer
type user from types.
No sé si hay que poner el D,
nunca me acuerdo.
Y aquí, pues le decimos que esto es un array de users.
¿Ok?
Ah, o sea, vale, que le gusta más así.
Así, pues ya tenemos los tipos
y tenemos que hacer cualquier string.
A ver, básicamente,
lo podemos por ahora quitar,
pero vais a ver que muy rápidamente nos va a dar problemas esto.
Así que el fetch del 100,
esto ya lo tenemos.
Importante,
no os pongáis a refactorizar, ¿vale?
No os pongáis a refactorizar.
En este punto yo, por ejemplo,
podría refactorizar,
pero eso os lo van a pedir al final.
Así que no perdáis tiempo refactorizando
hasta que nos lo pidan.
Ahora os dice,
mostrar la información en un formato tabla.
Uf, formato tabla, ¿sabes?
Oh my gato.
A ver, yo aquí sí que es verdad
que empezaría ya a...
Aquí sí que diría, bueno,
pues voy a crear mi primer componente
para no ponerlo todo aquí.
Así que yo aquí, este users,
pues ya lo pasaríamos a un componente,
users list,
que vamos a crear aquí.
Vamos a poner components.
Components.userslist.tsx.
Bueno, quitar la J y ya está.
¿Y qué hacéis aquí?
Bueno, pues aquí tenéis el users list,
que esto le llega a un users
y pues tenéis la función.
Y aquí, ¿ya nos han dicho una tabla?
Bueno, pues vamos directos a por la tabla.
Bueno, ahora veréis.
Lo primero, ¿qué es lo...?
A ver, una tabla,
a mí me cuesta mucho pensar en tablas
porque hace mucho tiempo que no las hago,
pero sí que sé que tenemos
table, t-head y t-body.
Estos tres, estos son la clave
para hacer una tabla.
¿Por qué?
La tabla sería toda la tabla entera,
esta sería la parte de la cabecera
y esta sería la parte del cuerpo.
Y luego tendríamos dos también
que son bastante importantes.
Una, tr, que sería el row, ¿no?
O sea, la fila que queremos hacer,
o sea, que queremos ser el tr.
Y luego tendríamos cada uno de la celda, ¿no?
El td.
Es un poco raro el nombre, el td,
pero bueno.
Tendríamos el row y las celdas.
Con estos cinco elementos
ya puedes hacer una tabla.
Hay uno un poco especial,
que es el th,
que serían las celdas del header.
Pero muy a las malas.
Si utilizas el td para el th,
no pasa nada, no pasa nada
y no se van a enterar, ni Dios.
Pero bueno, yo solo comento
que las tablas parece una tontería,
pero las tablas no están deprecadas.
Las tablas no están deprecadas.
No digáis, lo digo,
porque en pruebas técnicas
yo me he encontrado,
cuando estaba en Londres,
hacíamos una prueba técnica
que tenían justamente que hacer
algo muy similar a esto.
Y nos decían,
ah, no, tablas,
bueno, no utilizo table
porque está deprecado.
¿Cómo que está deprecado?
No está deprecado, ¿vale?
O sea que...
No digáis esas cosas,
que queda muy raro.
Thead, ¿vale?
Para la cabecera.
Y luego aquí lo que vamos a hacerlo,
como ya hemos visto que tenemos,
bueno, nos han enseñado antes
cómo queremos, ¿no?
Las columnas.
Tenemos el foto, nombre, apellido,
país, acciones.
Bueno, pues tenemos que utilizar el th.
Ya os digo,
aquí podrías utilizar el td
y nadie se entera.
Y vamos a poner cada uno de estos, ¿no?
Yo os recomiendo que tengáis muy claro
muchas cosas para ir rápido.
Por ejemplo, el copiar,
no poneros a escribirlo todo manualmente,
el copiarlo, cosas así.
O sea que, nada, ya sabéis.
Todo lo que os podáis evitar
o mejor que mejor para ahorrar tiempo.
¿Vale?
El nombre, el apellido,
el país y las acciones.
Esto porque yo me estoy copiando
como nos lo han dejado.
Y la idea es que esta es la prueba ya hecha.
Bueno, pues vamos a intentar hacerla
lo más parecido posible.
Esto sería el th.
Ahora lo que necesitamos es el tbody.
Y en el tbody vamos a renderizar
todos nuestros usuarios.
En el tbody, pues nada,
con el users.map tenemos un usuario
y para cada usuario vamos a devolver
el tr, que sería la fila, ¿vale?
La fila.
Y dentro de cada fila, pues vamos a tener
el td, que sería la celda.
Y en la celda, pues tenemos,
por un lado, la imagen, ¿vale?
La imagen.
Por otro lado, teníamos aquí el nombre.
Por otro lado, sería el nombre,
el apellido, el país y las acciones, ¿vale?
Al menos ya lo tenemos por aquí.
Nos dice que nos falta la key, ¿vale?
Ponemos key.
Y aquí ya nos vamos dando cuenta
que no tenemos el autocompletado del usuario.
Así que es aquí donde entra la clave de decir,
ostras, necesito tipar.
Bueno, ya se me está quejando TypeScript.
Una cosa muy importante.
Si os piden utilizar TypeScript,
no dejéis ni un error de tipos.
Luego os enseñaré un truco.
Un truco no, pero algo a tener en cuenta
para que no dejéis ni un error de tipos.
Es muy raro.
Es muy raro que os piden utilizar TypeScript
y me empezáis a dejar ahí
enis, cosas raras.
No lo hagáis, ¿vale?
Oye, gracias Matías por la raid.
Luego os enseño un truquillo
para que lo tengáis en cuenta
para que no se os escape.
Tampoco enis, pero si a las malas
es mejor un eni que un error.
Eso seguro, ¿vale?
Pero si podéis evitar el eni, mejor.
Pero no dejéis errores,
que es muy extraño.
Por ejemplo, este.
Esto es un error.
No dejamos el error ni en broma.
Aquí sí que nos paramos y decimos,
bueno, pues vamos a importar
el Type de User de dos tipos.
Bueno, este tipo lo tenemos aquí.
¿Vale?
Y aquí lo de siempre.
Interface Props.
Vamos a tener Users.
Y aquí vamos a decir
que estas son las Props.
Y ya está, ¿vale?
Con esto ya lo tendríamos.
Yo recomiendo esta forma corta
de tipar en lugar de utilizar
el React.fc
porque vais a ir más rápido
haciéndolo así.
Queda bastante claro
y no perdéis tiempo.
Y ahora ya con esto,
ahora sí, hacemos punto
y fijaos que es que ya lo tenemos todo.
Entonces ya no os tenéis que preocupar
de ninguna cosa.
Aquí vais a ver que,
como os decía,
esta prueba técnica
tiene bastante peligro
porque aquí hay un User.id.
¿Vale?
Pero fijaos que dice
Type id is not as enabled
to type key null undefined.
O sea,
¿What?
¿What?
Tiene bastante trampa.
Y es que la id en realidad
es en sí mismo un objeto.
Este tipo de cosas
nos tiene que volver
loco en la cabeza.
Tenéis que pensar
rápidamente y decir,
bueno,
si no puede ser esta id
o esta id,
no me puedo fiar,
¿qué puedo utilizar?
Por ahora vamos a utilizar
el punto value,
¿Vale?
¿Por qué?
Porque se supone
que esto debería ser un aquí.
Pero fíjate
que el punto value
me dice que fuese string o null.
Luego vamos a encontrarnos
problemas con esto,
pero los arreglaremos después.
Pero al menos
para que veas un poco
el hilo de pensamiento
que tengo yo,
¿Ok?
Luego,
no,
el toString no es válido.
O sea,
no es válido
porque tú no sabes
lo que tiene ese objeto.
Así que no te puedes fiar
del toString.
Entonces,
el image,
bueno,
es que además
si pones un toString
de un objeto,
no hace lo que tú crees,
¿Eh?
Si tú haces un toString
de un objeto,
como era ese el caso,
¿No?
Id,
que básicamente,
no sé,
será algo así,
¿No?
Value,
tatatatata.
Si tú haces un toString
de esto,
te va a meter aquí
un object,
object,
y todo va a tener
la misma aquí,
¿Vale?
Y te van a,
te van a destrozar.
Tampoco hagáis un random
uuid.
No sé por qué decís
esas cosas tan raras.
No hagáis un random
uuid.
No podéis utilizar un random,
no podéis utilizar un uuid.
Lo tendrías que generar,
pero es innecesario,
luego lo veréis,
luego lo veréis
porque es innecesario.
Vale,
la imagen,
bueno,
pues user.picture,
¿Vale?
Aquí vais viendo
cómo es el objeto,
aquí podemos ver
que hay un thumbnail,
¿Vale?
Aquí tendríamos que poner
el name,
vamos a ver,
user.name,
a ver,
user.
Ahora sí que sale,
vale,
.name,
.
Porque,
fíjate que me dice,
name is not asignable
to type react node,
y es que el name este,
es del tipo name,
pues vamos a los tipos,
vamos a ver el name,
y decimos,
oye,
¿cómo que el name este?
Si hace falta que veáis tipos,
no pasa nada,
pero veis que tiene título
first y last,
vale,
pues aquí lo que queremos justamente
es el punto first,
y ya sabemos que esto,
siempre que podéis copiar código,
copiar código,
esto va a ser el last,
bueno,
no sé si se me ha escapado,
ah sí,
vale,
es que aquí va el country,
o sea que lo no,
user.location,
punto,
mira,
me encanta que esto ya sabe el,
vale,
location no es asignable,
porque no es asignable,
vale,
porque veis aquí tiene más,
bueno,
pues aquí tenemos el country,
esto es cuestión de ir mirando,
podéis mirar los tipos,
no pasa nada,
es de que miréis los tipos
y ya está,
y ya está,
tampoco podéis utilizar el index,
no podéis usar el index,
migueo,
voy a usar el index,
y luego vas a ver
por qué hay un problema,
vale,
miguelo,
es que esta prueba técnica
parece muy fácil,
pero como veis,
vais a cometer muchísimos errores,
y os van a poner muy nerviosos
en el momento,
como por ejemplo utilizar el índice,
vale,
luego vamos a ver,
luego veremos los dos casos,
para que veáis que no cometáis estos errores,
en una prueba técnica que parece fácil,
pero no es fácil,
¿qué más tenemos por aquí?
vale,
ahora ya tenemos el botón de eliminar,
vale,
así que borrar,
borrar,
nos decía por aquí,
vale,
el users,
users list,
tenemos que pasarle users,
le pasamos users,
y con esto,
esto lo cerramos aquí,
y ya tenemos el componente,
que nos decía,
display the data
en table format similar to example,
venga,
vamos a nuestro proyectito,
tiene buena pinta,
o sea,
ya estamos enseñando la información,
que nos estaba pidiendo,
vale,
vamos a ver,
tenéis alguna preguntita,
antes de que continuemos,
y así puedo beber,
si van a eliminar elementos,
no usen index,
efectivamente,
ahí está el problema,
luego lo veremos,
¿no?
El random uoid,
tampoco lo usaría,
a no ser,
que no haya otra opción,
y eso,
lo tendrías que hacer,
al generar,
el array,
el user login uoid,
ese tiene buena pinta,
evalmasker,
si tenemos el dni,
¿se puede usar eso?
El dni debería ser único,
el dni,
es buena,
tiene buena pinta,
el use id,
no es para esto,
en una prueba técnica,
me pidieron sumar los números,
de un array,
que estén entre dos índices dados,
¿cuál es la mejor manera?
En javascript,
bueno,
ahora no te lo voy a explicar,
o sea,
no lo voy a hacer,
pero tendrías dos formas,
una,
que podrías utilizar el slice,
para pillar ese trozo,
y entonces hacer un reduce,
y sumarlo todo,
o utilizar un for,
y ya está,
vale,
el único problema,
es que ya veis,
que no está pillando todo el ancho,
esto es muy fácil,
porque lo único que tenemos que hacer aquí,
en el table,
es un width del 100%,
¿vale?
Y ya,
ay,
pues me ha dejado fatal,
espérate,
a lo mejor no,
ni esto,
el problema,
el problema está,
en el index,
o,
claro,
es que esto tiene,
tiene estilos,
que yo no me he fijado,
no me he fijado,
los estilos estos,
y no sé cómo,
vale,
ahora sí,
vale,
ahora veis que ahora sí,
que está pillando más espacio,
esto porque había unos estilos por defecto,
que me estaba fastidiando,
¿vale?
Y aquí en el index,
va,
esto lo voy a dejar,
que parece que no,
no van a molestar,
aquí sí que tenemos que ponerle style,
el width al 100% a la tabla,
para que pille todo el espacio,
ah,
no,
esto,
lo podéis poner de las dos formas,
pero la tabla,
sí que acepta que le podéis pasar el width directamente,
y ahora sí,
ahora,
bastante más similar a este,
no es exactamente igual,
más que nada por esto,
¿no?
que tiene más width,
se lo podéis quitar si queréis,
y ahora sí que debería quedar,
igualito,
bueno,
muy parecido,
si no es igualito,
muy parecido,
el nombre del componente debería ser user list,
no,
users list,
users list,
lista de usuarios,
¿no?
No es user list,
¿no?
List,
users,
list of users,
bueno,
bueno,
puede ser users,
ah,
es que aquí le he llamado user list,
es verdad,
es verdad,
es verdad,
le he llamado lists,
como,
ahora lo he entendido,
users list,
user list,
vale,
ya está,
ahora está,
arreglado,
¿eh?
Los estilos los copiaste,
no hemos puesto,
no hemos hecho estilos,
no hemos hecho estilos,
los estilos son los que han venido generados desde el principio,
o sea,
no hemos hecho nada,
no hemos hecho nada de estilos,
borrar,
borrar estilos,
es lo que hemos hecho,
¿vale?
Bueno,
ya tenemos punto 2,
punto 2,
¿vale?
Punto 2,
ahora probé una opción de colorear los rows,
¿vale?
Esto ya,
ves que aquí un colorea filas,
que cuando le das,
te sale esto,
esto fácil,
o sea,
que este en principio es fácil,
lo vamos a hacer en un momento,
una recomendación que os doy en pruebas técnicas,
no empecéis a componentizar mucho,
porque no tenéis muy claro al principio todavía cuántos estados vais a tener,
qué es lo que necesitas exactamente,
así que,
si podéis evitar hacer muchos componentes,
lo que sí que podéis hacer es tener un componente padre,
que sea el que tenga toda la lógica,
que es lo que vamos a hacer con la app,
y luego el componente más visual,
aquí vamos a hacer justamente esto,
¿no?
En el colorea filas este,
vamos a poner aquí el,
vamos a poner,
selected user,
no lo vamos a poner,
¿qué nombre le podemos poner a esto?
Bueno,
show colors,
que es el más evidente,
está muy bien esta prueba,
porque es básica,
pero luego se va complicando,
¿no?
En este caso esto es una cosa muy simple,
pero claro,
te aseguras,
dices,
ah,
sí,
sí,
me voy confiando,
bueno,
voy a poner un toggle colors,
que aquí cambiamos justamente,
o mira,
esto lo podríamos hacer,
bueno,
vamos a hacer así,
le cambia el set show colors,
cambiamos el estado,
que lo que estamos haciendo es invirtiendo el estado que teníamos,
y esto lo ponemos aquí,
vamos a poner aquí un header,
está bien que utilicéis un poquito de semántica,
para que vean que realmente sabéis de lo que estáis hablando,
en este caso vamos a utilizar un header para todos los botones,
porque está arriba,
y aquí vamos a poner el botón,
que sea colorear,
colorear filas,
y ya está,
con esto cambiamos el estado,
pero ahora lo que necesitamos es que este show colors venga aquí,
así que show colors,
show colors lo pasamos,
tenemos que ir a user list,
este es bastante simple,
este es bastante simple,
supongo que la idea es que va encrechendo,
que este es el primero más fácil para ver cómo pasas hacia abajo una prop,
que sea un boleano,
yo os recomiendo que le paséis la prop y que el estado lo hagáis en el app,
y ya está,
y aquí pues nada,
que si tenéis esto,
lo que podemos hacer aquí,
sería tener el style,
que si tenemos el show colors,
me encanta que te quiere poner el color aquí,
a ver,
si tenemos show colors,
o una de dos,
podemos utilizar el índice,
porque veis el efecto cebra,
como no tenemos tailwind,
que no nos han dicho que lo podemos utilizar,
aquí tenemos que hacer este efecto cebra,
entonces nada,
esto se hace con el índice,
podemos utilizar el índice,
y si el índice es divisible entre 0,
podemos hacer,
mira,
más que style,
vamos a poner el background color,
y que el background color,
pues sea,
yo que sé,
uno sea,
a ver,
es más clarito,
no,
más oscurito,
uno sea 333,
y el otro sea 555,
¿vale?
background color,
y entonces el color será,
si tenemos que enseñar los colores,
pues vamos a utilizar el background color que hemos puesto,
y si no,
vamos a poner que sea transparente,
y ahora este color,
lo vamos a poner aquí en el style,
vamos a poner que el background color,
fijaos que los estilos,
tampoco hay que,
no hay que liarse mucho,
en ir al CSS y tal,
a no ser que os lo pidan,
si os lo piden,
pues lo hacéis,
pero lo podéis preguntar,
es que hay muchas veces que tenemos miedo a preguntar,
pero yo aquí le preguntaría,
y le diría,
le diría,
oye,
hay que enseñar esto,
no sé qué,
no sé cuánto,
esta sería la forma de hacerla,
que es una forma un poco imperativa,
con javascript,
y un poco bestia,
si van muy sobraos,
otra cosa que podéis hacer,
es utilizar puramente CSS,
si,
bueno,
vamos a ver si esto funciona,
y ya os enseño la otra forma,
¿vale?
vale,
colorear filas,
vale,
esto no funciona,
porque el show colors,
a ver,
¿qué le ha pasado?
a mí,
show colors,
ah,
mira,
aquí tenemos errores de las keys,
justamente,
también,
tenemos errores de las keys,
y,
oye,
¿por qué no me está pillando ni siquiera el style?
el style este,
este es del todo,
background color,
si no transparente,
si no es el show colors,
vamos a poner un console lock aquí,
¿ves?
ponemos un console lock,
no pasa nada,
mejor ponemos un console lock
que quedarnos con la duda,
vale,
vamos a,
ay,
¿por qué no me,
ahora,
transparent,
transparent,
ah,
porque el show colors,
no,
pero ahora sí que lo,
le hemos dado,
¿no?
¿será que no se lo estoy pasando?
show colors,
show colors,
set show colors,
show colors,
¿veis?
aquí ya tenemos el primer,
la primera en la frente,
¿ves?
este es el momento en el que si fuese una prueba técnica de verdad estaría ahí,
total,
¿no?
bueno,
vamos a ver el problema,
vamos a asegurarnos,
uno,
que,
un click,
toggle colors,
bueno,
lo primero que vamos a ver es si realmente esto está cambiando el estado,
vamos a poner aquí un show colors,
parece show colors true true,
o sea que ahora está en true,
y cuando le damos,
no vuelve,
a ver,
es un poco raro esto,
empezando en false,
vamos a mirar este console.log,
es transparente,
colorear,
ahí sí que lo estaba pillando,
¿qué es lo que está pasando con esto?
o sea,
sí que me está enseñando aquí los colores,
no sé si es un tema de por qué lo he hecho con la,
así,
el style,
background,
color,
o sea,
este style,
ves,
sí que está actualizando los colores,
o sea que,
show colors true,
y cuando le damos,
show colors false,
o sea,
funciona,
está funcionando,
la duda que tengo,
está,
en este,
no sé si es un tema de aquí,
pero veis que ahí pone,
background,
color,
transparent,
pero no está cambiando aquí,
el color,
a ver,
una cosa que ya veo,
es el tema de la consola,
que yo creo que por aquí pueden ir un poco los tiros,
porque fijaos que me dice que ha encontrado children,
con la misma aquí,
y tal,
yo la verdad es que una vez que veo este warning en la consola,
lo primero que haría es arreglarlo,
porque puede ser que por culpa de esto,
a lo mejor,
veis,
veis,
están aquí,
puede ser que por culpa de esto,
me esté dando problemas de renderizado y tal,
entonces,
¿qué es lo que está pasando?
Que hay keys que vienen con null,
y esto,
aunque parece un warning,
que parece que no es muy importante,
ya veis que nos está dando problemas visualmente,
porque parece que no está funcionando,
pero en realidad sí que está funcionando,
¿veis?
¿Qué pasa?
¿Qué es que aquí arriba están los que tienen null?
Es que es muy jodida esta prueba,
porque parece muy sencilla,
pero luego de repente vais viendo este tipo de cosas que van a como a pillar,
y que lo que te están haciendo es ver cómo reaccionas a estos errores,
¿vale?
Por eso te dicen aquí,
dice,
handle any potential errors that may occur,
¿sabes?
Es que son bastante cabrones,
bueno,
el primer problema está en esta,
¿no?
El user.id,
alguien decía de utilizar el índice,
podemos utilizar el índice,
y ahora se arreglaría,
así que vamos a utilizar el índice,
y luego veremos el otro problema que hay,
¿vale?
¿Veis?
Ahora se arregla,
parece que todo se arregla,
y que ahora sí que funciona lo de colorear,
todo ha funcionado correctamente,
con el índice,
no tenemos el problema de las keys,
así que,
perfecto.
Nuestra lógica estaba bien,
pero el problema era la key,
que estamos confiando en una key que no tenía tanto sentido.
Ya os he dicho que es un poco tricky la prueba técnica,
porque de vez en cuando parece fácil,
pero hay como esas piedrecillas que van a pillar,
es bastante bestia.
Vale.
Ya tenemos al menos lo de colorear,
¿vale?
Ya tenemos la primera.
Luego dice,
permite que los datos puedan ser ordenados por país,
como se muestra en el ejemplo.
Aquí habla de esto,
¿no?
El botón este de ordenar por país,
así que vamos a hacer exactamente lo mismo,
y aquí vais a ver un error muy común,
que cometen hasta senios,
y que aquí te...
Es que van a pillar,
de verdad.
Van a pillar.
Meadu,
¿no deberías cambiar el state de esa forma?
Bueno,
a ver.
Sí que se debería...
No pasa nada por cambiar el estado de esa forma.
Joel,
esto que comenta justamente en la documentación,
tiene sentido cuando estás dependiendo del mismo estado para el anterior.
Por ejemplo,
si yo pusiera tres veces esto,
tendríamos un problema,
porque el show colors,
aquí,
el show colors,
imagínate que es false.
Pues lo que estaríamos haciendo aquí es,
pasarlo a true,
aquí lo estaríamos pasando a true,
y aquí lo estaríamos pasando a true.
O sea,
las cosas,
las cosas no se leen,
y porque alguien te diga algo,
lo haces y ya está.
Las cosas hay que entenderlas,
por qué se hacen así,
¿vale?
Entonces,
en este caso,
en este caso,
no pasa nada porque hagamos esto,
porque podemos depender del valor anterior,
porque no lo estamos utilizando para nada.
¿Cuándo podría haber problemas?
Pues a veces podría haber problemas si el valor aquí,
tú te crees que el show colors ya está actualizado y no lo está.
Entonces,
es importante que entendamos por qué utilizamos las cosas.
Esto está bien y no le pasaría absolutamente nada.
Pero en este caso,
estos ejemplos que pone aquí,
lo está diciendo justamente porque cuando tú llamas tres veces,
tú crees,
esto es lo que estás llamando,
y tú lo que crees es que siempre va a estar añadiendo uno más a la edad,
y no es así.
Y por eso aquí te dicen exactamente lo mismo.
Entonces,
está bien que cuando tienes un estado anterior lo hagas,
y en este caso lo podrías hacer,
pero a no ser que el usuario se vuelva loco,
por muy loco que se vuelva,
no va a pasar,
¿vale?
Así que,
ese es el tema.
No sigáis las cosas de forma,
no sé qué,
no sé cuánto,
y ya está.
En este caso no hay ningún problema.
Vamos con el short.
El short es súper tricky,
y os voy a explicar por qué.
La siguiente es,
permite que los datos se puedan ordenar por país,
como se muestra en el ejemplo.
Lo primero que vamos a hacer,
bueno,
vamos a poner,
yo qué sé,
un filter,
no,
sorting,
sort by country,
por ahora,
¿vale?
Set sort by country.
Y hacemos,
lo vamos a hacer boleano,
aunque lo mejor no sería hacerlo boleano,
¿no?
Pero vamos a hacerlo boleano,
y así empezamos por algo,
y luego ya lo comentaremos.
Ya lo complicamos si hace falta.
Además podemos tener aquí el botón este,
que sea el de ordenar por país,
ordenar por país,
¿vale?
Y hacemos el set sort by country,
y mira,
en este caso,
como Joel le gustaba,
como esto es así,
pues vamos a hacerlo como decía,
¿no?
Prefer state,
y esto,
prefer state,
¿vale?
Lo cambiamos de esta forma.
Y esto vamos a hacer que no se devuelva directamente.
Vamos a hacer aquí un,
vamos a pasarlo en un handle,
handle,
o toggle,
toggle sort by country.
Vamos a llamarle exactamente igual,
para que tengan los mismos nombres.
Toggle sort by country,
¿vale?
Hacemos esto,
esto de aquí,
esto de aquí,
esto de aquí.
Esto justamente como decían de hacerlo antes,
¿no?
Puedes utilizar un callback
que puede recuperar el valor anterior
y actualizarlo.
Aquí le estamos dando la vuelta,
si era false,
lo pasamos a true,
si es true,
lo pasamos a false.
Esta es una forma correcta de hacerlo,
y muchas veces necesaria,
cuando dependemos del nuevo valor,
o para hacer cosas,
o si,
por ejemplo,
llamamos más de una vez,
o lo que sea.
¿Vale?
Ya teníamos esto,
y ahora está el tema de tener el sorted users.
Vamos a ver esto,
porque esto es un error común.
Es muy tricky,
pero vamos a ver.
Dijiste no refactorizar.
Bueno,
pues esto me ha hecho una función,
hombre,
tampoco nos pasemos,
tampoco nos pasemos.
Bueno,
la primera forma que a la gente se le ocurriría
es decir,
bueno,
users.sort,
tengo A y B,
¿y qué tengo que hacer aquí?
Pues debería comparar entre uno y otro.
Mira,
aquí nos lo dice,
y esto ya está bastante bien como lo había puesto,
aunque hay un error,
¿no?
Primero,
fijaos que no me dice que es A y B,
lo cual ya es un rollo,
porque no tengo ni puñetera idea de,
oye,
ah,
no,
así que,
no,
¿ves?
Me pone never.
O sea,
aquí si pones A punto,
has perdido lo que serían los tipos.
Así que aquí es donde nos tenemos que asegurar justamente
que podemos saber qué son los users.
En el users este,
vamos a decirle,
oye,
que esto es un array de user,
porque si no,
no tenemos los tipos.
Y si no tenemos los tipos,
ahí va a ser un rollo.
¿Ahora qué podemos hacer?
A ver,
una cosa que podríamos decir es,
bueno,
pues si A punto location punto country,
si es mayor A B location country,
devolvemos esto o tal,
¿no?
O sea,
podríamos,
o sea,
pero esto no tiene sentido,
¿eh?
Podríamos intentar comparar la longitud y ver a ver qué pasa con esto y tal.
Esto está mal.
Lo mejor que podéis hacer para comparar strings,
para saber si realmente es mayor o menor uno que otro,
y es muy fácil,
es utilizar el método justamente del local compare.
Si ves,
es que ya te lo dice,
porque es que esto lo habrán hecho tantas veces.
El local compare.
Esto lo que hace es comparar dos strings,
que además lo hace dependiendo la localización,
o sea,
el idioma,
el lenguaje.
Así que va a tener en cuenta,
pues,
acentos y cosas así.
Y lo comparas con el otro string.
En este caso,
pues el B punto location punto country.
Esto lo puedes devolver directamente,
y si lo devolves directamente,
lo va a hacer de forma ascendente.
Si lo haces al revés,
pues será descendente.
Según lo que quieras.
En este caso lo queremos ascendente.
Pero vas a ver que esto está mal.
Y es un poco tricky.
Así que,
ya teníamos aquí los usuarios que están ordenados.
Lo ponemos aquí.
Se supone que esto,
funcionar,
funciona.
¿Vale?
Este es sort by country.
Espérate,
sort by country.
Bueno,
esto lo podríamos utilizar para,
para aquí,
hacer esto,
si tenemos sort by country,
pues ponemos una cosa,
y si no,
ponemos otra.
Sort by country,
no ordenar por país,
por ejemplo.
¿Vale?
Y ya está.
¿Vale?
Ordenar por país,
no ordenar por país.
¿Vale?
Vale.
Mira,
fijaos.
Ah,
ya sé para qué sirve el sort by country.
Para esto.
¿Vale?
Aquí tenemos que poner,
si tenemos que ordenar por país,
hacemos el sort,
y si no,
devolvamos directamente los users.
¿Vale?
Hacemos una ternaria.
Si tengo que ordenar por país,
hacemos el sort,
y si no,
devuelvo a los usuarios.
Esto está mal.
Esto está mal.
Esto es un error
que mucha gente cometería,
y aquí se volvería loca.
Se volvería loca.
Vale.
Venga,
vamos aquí.
Fíjate,
aquí tengo los países.
Le doy ordenar por país.
Ha funcionado,
¿verdad?
Los ha ordenado bien.
Ah,
le doy otra vez.
¿Qué ha pasado?
¿Qué ha pasado?
Esto se ha roto,
pero lo peor
es que
si tú te pones aquí
a mirar
y a decir,
ostras,
que no me cambia,
no me está cambiando esto.
Voy a mirar el
sort by country,
a ver si es que no me está cambiando
el estado.
Y entonces tú te pones a mirar,
¿vale?
Sort by country,
false,
true,
false.
Hostia,
pues es que está cambiando.
¿Por qué no está cambiando el estado?
Esto es un error bastante importante,
y aquí mucha gente,
por eso os digo que parece una prueba técnica fácil,
pero entonces de repente tú empiezas a ir rascando y rascando
y te das cuenta de estas cosillas.
A ver,
el tema es que el sort muta el array original.
Y esto está mal,
porque si mutamos el estado,
el array original,
claro,
esto significa que la próxima vez,
aunque cambiemos el estado,
el problema es que usuarios ya está ordenado
y lo hemos roto.
Lo hemos roto,
¿vale?
Entonces,
aquí tenemos diferentes formas de arreglarlo.
Una podría ser hacer una copia aquí,
saco,
y esto nos lo debería,
nos lo soluciona.
¿Por qué?
Porque estamos haciendo una copia del array
y luego lo estamos ordenando,
y por lo tanto así ya no lo estamos mutando.
Voy a decir que esta le voy a dar,
le voy a dar un 7.
Es que no está mal.
Podría haber una bastante más bestia,
que sea de StructureClone.
Yo no creo que esta sea del todo correcta.
Vamos a ponerle un 5,5.
No está mal.
Funcionar funcionaría,
pero hace demasiada copia,
porque es una copia profunda,
¿vale?
Pero bueno,
funcionar funcionaría.
En este caso,
mira,
que el otro día justamente me lo explicaban,
este es el caso perfecto
para utilizar un nuevo método de array
que todavía no está disponible
en todos los navegadores,
pero que por suerte,
como estamos utilizando Babel,
SWC y cosas así,
lo podemos utilizar aquí,
que se llama ToSorted,
¿vale?
¿Qué es lo que hace?
Y para mí esta es un 10.
Es un 10 porque estaría utilizando correctamente
las herramientas que me da JavaScript.
En lugar de tener que hacer una copia,
estoy utilizando un método
en el que ya le estoy indicando
que quiero hacer una copia.
Y además aquí estaría demostrando
que estás al día.
O sea,
lo cual a mí me parece muy bueno,
¿sabes?
O sea,
realmente,
seguramente,
incluso el entrevistador o entrevistadora
se quedaría ahí como,
¿what?
¿Cómo sabes esto?
Y tal.
Y entonces puedes decir,
bueno,
voy a intentar esto porque tal.
El ToSorted lo que hace
es exactamente lo mismo,
pero devuelve un nuevo array
y así no estábamos mutando de original.
Con esto,
fijaos,
que ya lo tenemos arreglado.
Y queda muy bien.
Pero si queréis,
queda realmente bien
porque fijaos que hay un problema.
¿Qué pasa?
Que dice que el ToSorted
no existe en el tipo User.
Si llegáis a este punto
y necesitáis los tipos de TypeScript
y esto no sale,
yo os he dicho antes,
bueno,
pero es importante
que tengáis los tipos correctamente.
Yo creo que
al nivel que se espera,
que esto lo que os va a dar
es un sueldo de 55.000 euros al año,
que no está mal,
lo mejor que podéis hacer,
si no existiera el ToSorted,
seguramente haría,
si no existiera el ToSorted,
haría el que he hecho antes,
este.
Porque me parece
que se entiende bastante fácil
en la copia mínima
que tienes que hacer.
¿Qué pasa?
Que me dice
que la propiedad de ToSorted
no existe.
Entonces,
si queréis quedar como
dioses absolutos del Olimpo,
¿sabes?
Yo lo que haría aquí
es decirle,
bueno,
el ToSorted,
porque funciona,
funciona.
Si en el caso
de que alguna vez
os pase algo así
y que no lo soporta TypeScript
porque todavía no lo soporta,
lo que podéis hacer
es tener muy claro
cómo tenéis que extender,
por ejemplo,
el prototipo de array
en los tipos.
Lo tenéis que declarar
como algo global,
le ponéis la interfase
que sería el del array
para pasarle un genérico
y ahí le ponéis
el ToSorted
y aquí podéis hacer,
a ver,
lo ideal es que lo hagáis
correctamente,
¿no?
Aquí tenemos el CompareFn
que obviamente
esto puede ser opcional.
A es del tipo User,
o sea,
T,
tipo T.
Esto debería devolver
un número,
ya sabéis que debe devolver
o uno o menos uno,
según lo que queramos hacer
y esto tiene que devolver
un array de los tipos.
No le gusta por,
bueno,
pues sabes qué pasa,
que a mí esto sí que me gusta.
Así que,
ay,
no me deja desactivarlo.
Hombre,
¿cómo no te va a gustar esto?
Bueno,
eso es un tema del linter,
¿eh?
Esa sería la forma
en la que si por lo que sea
vais a utilizar un método,
puede ser de window,
puede ser de array,
puede ser de lo que sea,
puedes hacer esto.
Y aquí tenéis el ToSorte
que le decimos
que tiene una función
de comparación
que recibe dos parámetros
que el parámetro,
el tipo del parámetro,
se lo vamos a indicar nosotros.
Y de hecho,
se lo podéis indicar,
nosotros aquí ya no lo necesitamos
porque lo está infiriendo justamente,
¿vale?
Pero es del tipo user,
user,
user,
porque no sabe lo que va a ordenar.
Y ya está,
con esto tendríais.
Yo desactivaría todo lo que marque el linter.
Hombre,
todo no,
pero en este caso lo podéis decir.
Me parece interesante
esto de que ordena el resultado
que se muestra,
pero si hay que cargar más,
¿estará mal ordenado?
No,
no estará mal ordenado
porque esto siempre ordenará
los usuarios que tengamos en el state.
O sea,
que nunca va a estar mal ordenado.
Y es que esa es la gracia justamente.
Un error que aquí mucha gente
podría cometir con el sorted
sería ordenar
o tener otro estado
para ordenar esto.
O sea,
lo importante es solo tener un estado
para aquí
hacer los cálculos con el estado.
No tengáis más de un estado
justamente para lo mismo,
¿vale?
Con un solo estado podéis hacerlo
y de hecho es buena práctica
porque si el estado cambia,
aquí se volverá a calcular.
Pero bueno,
ahora veis que pone.
Luego veréis que nos pidieron
una optimización
que es bastante interesante
y veremos cómo lo podemos hacer.
Dice,
activar la habilidad
para eliminar filas
como se ve en el ejemplo.
¿Vale?
El ejemplo puede eliminar una fila,
¿vale?
Se elimina el usuario
y ya está.
Os he dicho
que esta prueba técnica
parece sencilla
pero tiene un montón de cosas
a pillar.
Así que,
aquí podríamos hacer
el handle delete
que le podríamos pasar.
Podríamos utilizar el índice.
No me parece bien
pero podemos utilizar
los nuevos usuarios
o filter users,
users.filter
teníamos el usuario
y el index
y entonces podríamos decir
que los usuarios
que sean diferentes
user index,
los usuarios
que sean diferentes
del índice
que le hemos pasado
son los que se van a quedar.
El que tenga el mismo
pues es el que se va a ir.
Pero esto ya vais a ver
que nos va a dar problemillas.
Nos va a dar problemillas
porque esto no es
la forma correcta
de hacerlo
y va a tener
complicaciones
para nuestro código.
Pero bueno,
lo voy a dejar
porque es algo
que me ha comentado
alguien antes
y vamos a ver
cómo arreglarlo.
Así que en el handle delete
este
se lo vamos a pasar
por aquí
como prop.
Handle delete
o delete user.
En el user lead
ya se me está quejando
TypeScript
pues nada,
de nuevo delete user.
Aquí vamos a tener
el index number
que pasa void
y aquí delete user
y aquí buscamos
nuestro botón
que teníamos por aquí
el botón borrar
hacemos un clic
y cada vez que hacemos
un clic
hacemos un handle delete
y le pasamos el índice
que es un delete user.
Con esto
eliminaríamos usuarios
y de hecho
vamos a nuestro proyecto
que es este
vale, vale.
Fíjate
que le he dado a borrar
le he dado a borrar
me lo borra
intento seguir borrando
ah mira
antes me ha fallado en uno
ahora parece que no falla
vale
pero
fijaos que a veces borro
y salen
salen mal
o sea se queda
se queda uno por ahí
alguno que no debería quedarse
ves
cambian
incorrectamente
los usuarios
claro
el tema es
no vamos a tener
el error del warning
pero sí que vamos a tener
que a veces
aparecen usuarios
que no deberían aparecer ahí
¿por qué?
porque se vuelve a reutilizar
justamente
el mismo
la misma key
que tenía antes
aquí si no lo sabes
te lo puedes comer
con patatas
y puedes pensar
que todo funciona
correctamente
porque parece
que está borrando bien
los usuarios
pero lo que estáis viendo
es que a veces
cuando yo borro un usuario
me aparece de repente
otra vez el usuario
que había antes
y esto hay que arreglar
esto es porque
lo que está pasando
es que cuando nosotros
borramos un usuario
a través de su índice
como estábamos utilizando aquí
aquí la key del índice
claro
fíjate una cosa
al modificar
la
el
el array
y los índices
que tiene
utilizarlo de key
si por ejemplo
nosotros borramos
el número
con índice
2
el 3
pasa a ser el 2
y eso es un problema
porque lo que está pasando aquí
es que el 3
ahora pasa a ser el 2
pero Ria cree que el 2
era otro
¿vale?
así que el key
siempre tiene que ser algo
que se pueda identificar
de forma única
para evitar problemas visuales
como los que estamos teniendo
¿qué vamos a hacer aquí?
en la key
podemos utilizar
por ejemplo
en user
tendríamos
había uno que decía
login.uid
este tiene buena pinta
porque es un string único
otro que podéis utilizar
y que muchas veces
la gente
no lo tiene en cuenta
es el email
el email suele ser único
también
para nivel de usuarios
bastante clave
el que prefiráis
¿vale?
yo voy a utilizar el email
que me gusta
pero el que prefiráis
y aquí
a la hora de borrar
pues en lugar de esto
vamos a pasar el email
que esto debería ser un string
así ya dejamos de utilizar
el índice
y le decimos
que si el usuario.email
es diferente al email
¿vale?
y ahora con esto
a ver que hay un error
por aquí
el delete
ah
porque también hemos cambiado
aquí los tipos
así que
este es un buen ejemplo
de por qué no tenéis
que utilizar un índice
a la hora
de
la liado
porque
aquí le estoy pasando
el index
y esto es user.email
¿vale?
para borrar bien el usuario
y ahora sí
¿veis?
ahora sí
ahora sí que está funcionando
correctamente
¿veis la diferencia?
de que no está pegando mal
el salto
de que están apareciendo
usuarios que ya estaban borrados
y todo esto ¿no?
bueno ya veis que
esto parecía fácil
pero se iba complicando
este
este también es fácil
pero aquí mucha gente fallaría
¿vale?
con el splice
no podrías hacer
para eliminar un elemento
el splice
justamente
encima
encima
uno
muta el array
o sea mal
porque muta el array
y no tiene sentido
en este caso
o sea sería mejor
utilizar el slice
pero
en este caso
es que tiene mucho más sentido
hacer un filter
mucho mucho mucho más sentido
si el arreglo fuese fijo
no habría problemas
con el índice
así que habría problemas
con el índice
o sea
si
más que si es fijo
es si no vas a modificarlo
en este caso
cuando ya te dicen
borrar una fila
van a pillarte
justamente para esto
entonces
si vas a borrar filas
o añadir filas
no puedes utilizar
el índice
implement a feature
that allows the user
to restore the initial state
meaning that all deleted rows
will be recovered
un error muy común
que esto mucha gente
y de hecho
antes me lo habéis dicho
me lo habéis dicho
es crear otro estado
original users
por ejemplo
set original users
esto
esto está mal
esto está mal
porque
en realidad
el original users
lo que queremos
es que fijaos
que esta prueba técnica
parece una tontería
pero
tiene muchas cosas
muy interesantes
porque son
o sea son facilillas
pero van a pillar
el tema de utilizar
otro estado
es innecesario
porque aquí entonces
tendrías que poner
set original users
por ejemplo
¿vale?
y funcionar funcionaría
¿sabes?
esto funcionar
funcionaría
podríamos tener aquí
otro botón
que sea
por ejemplo
handle reset
y aquí tendríamos
set users
original users
o sea
esto funcionar
funcionaría
y de hecho
lo vais a ver
botón
on click
y aquí
pues hacemos el
handle reset
resetear
estado
¿vale?
esto funcionar
funcionaría
vamos a borrar
aquí un montón
de usuarios
le vamos a resetear
y aparecer
aparecen
y todo está bien
o sea
lo que pasa
es que aquí
lo que quieren ver
es que realmente
si sabes react
o si te has visto
un tutorial
de 10 minutos
en un vídeo de youtube
y te crees que sabes react
¿qué es lo que pasa aquí?
el tema
es que aquí
esto es innecesario
el crear otro estado
los estados
están pensados
para que cada vez
que cambien
se vuelva a renderizar
la UI
y aquí no queremos
un estado
otro error muy común
es que la gente
haga esto
que esto
funcionar
también funcionaría
esto podemos decir
que es un
users
tal
vale
y aquí
podríamos hacer esto
set results
res.results
y ya está
esto funcionar
también funcionaría
pero
esto también está mal
esto te funciona
porque por suerte
los componentes
son singletons
y solo hay una instancia
de este componente
pero si tuvieses
este componente
lo tuvieses más de una vez repetido
esta variable
se compartiría
el valor de esta variable
y podrías tener
cosas inesperadas
te podrían dar
un montón de problemas
la forma correcta
es utilizar
un useRef
que justamente
este
este es el funcionamiento
que tiene
de que me lo
ahora
que justamente
el funcionamiento
normal
del useRef
y se utilizaría
algo parecido
al useState
pero
hay que tener en cuenta
que no
aquí tenemos
el punto current
para poder recuperar
el valor actual
y aquí
sí que
guardamos el current
el filter user
¿cuál es la
esto no va aquí?
esto va aquí
esto va aquí
¿vale?
¿por qué hacemos esto?
¿por qué hacemos esto
con el ref?
el ref
justamente
lo que busca
el useRef
es
para
guardar
un valor
que queremos
que se comparta
entre renderizados
pero que al cambiar
no vuelva a renderizar
el componente
es que
¿por qué
si funciona
el useState
está mal
y todo esto?
el problema
es que
el useState
os lo van a preguntar
os van a decir
oye
hay una forma mejor
de utilizar
el estado
que no sé
qué no sé cuánto
pero el estado
de users
ya es el original users
¿no?
hombre
no
la primera vez
sí
pero claro
imagínate
estamos aquí
voy borrando
ahora el estado
de users
ya no es
original users
ahora es otro
lo que quieren
es que puedas
resetear el estado
y que te vuelvan
a aparecer todos
o sea
al principio
sí que son iguales
pero luego
los vas a cambiar
entonces lo que quieren
es
vale vale
¿cómo puedes volver
al estado original?
vale pues lo hacemos así
vamos a tener una referencia
que
queremos que se comparta
entre renderizados
que por más que cambien
estados y tal
siempre tengamos aquí
en original users
lo que hemos guardado
en su momento
y que me da igual
porque si cambia
no quiero volver
a renderizar los componentes
esa sería la forma
de tenerlo
no se puede volver
a consultar la API
no porque
la API puede tener
información diferente
y aquí
lo que nos está diciendo
lo podrías hacer
pero no es lo que quieren
porque fíjate
dice implementar una feature
que te permita
restaurar
el estado inicial
entonces no te está diciendo
que vuelvas a pedir
esta información
a una API
vale
sino que te está pidiendo
que restaures
el estado inicial
y que puedas recuperar
todas las filas eliminadas
claro
si tú volvieses a llamar
otra vez
a la API
igual en la API
saldrían las filas eliminadas
o saldrían nuevos elementos
o lo que sea
no entendí bien
lo de UREF
pues es muy sencillo
el UREF
básicamente
funciona algo parecido
a un USE STATE
con dos diferencias
la primera
es que cada vez
que cambia el REF
no vuelve a renderizarse
el componente
y la segunda
es que para acceder
al valor
de una referencia
y cambiarla
tienes que acceder
al punto current
ya está
y lo que nos permite
es guardar valores
que queremos
que se preserven
entre renderizados
cada vez que se renderiza
nuestro componente
cada vez que cambiamos
el estado
no queremos
si tú pusieses aquí
un original users
por ejemplo
el problema es que
si tú utilizas
una variable normal
cada vez que se renderiza
se vuelve a crear
la variable
con el nuevo valor
con el valor
que hayas puesto aquí
vale
se vuelve a generar
a regenerar
y el UREF
lo que hace
es preservar
ese valor
entre renderizados
¿no hace falta
usar la PROPREF
en una etiqueta
para instanciarlo?
no
porque eso es otro error
muy común
el UREF
no solo sirve
para elementos
eso es porque
el UREF
se puede utilizar
para elementos
se puede utilizar
para guardar
un elemento del DOM
pero no solo
su única utilidad
handle
any potential errors
bueno
más o menos
yo creo que ya lo hemos hecho
implement a feature
that allows the user
to filter the data
by country
ahora nos dicen
que tenemos que añadir
un input
de hecho aquí tenemos
la PRO
que infiltrar por país
que podamos filtrar
por país
esta está bastante chula
porque es algo
bastante típico
bueno
implementar una feature
que te permite filtrar
a los datos
por país
esta
es sencillita
pero tiene su historia
¿vale?
¿por qué?
podemos hacerlo
de diferentes maneras
yo lo voy a hacer
de la forma
la más
la más fácil
se hace la más fácil
vamos a poner aquí
filter country
¿vale?
y aquí
set filter country
un use state
aquí podríamos poner
un string vacío
yo prefiero
inicializarlo con null
y decirle
que aquí
puedes tener
o string
o null
¿vale?
y ahora
este filter country
va a ser el que
cambiaremos
como al usuario
¿no?
que podamos ponerle aquí
al lado un input
vamos a ponerle aquí
después de esto
un input
vamos a ponerle
playholder
filter
por país
¿no?
y que cada vez
que cambie
esto no hace falta
bueno
sí que podría hacer falta
¿no?
un change
bueno
pasa nada
vale
hacemos esto
¿no?
que cada vez
espérate
se me ha olvidado esto
vale
¿no?
¿qué ha pasado aquí?
¿qué pasa aquí?
tenemos este
tenemos este
y tenemos este
vamos a hacer
que cada vez
que escriba
en este input
vamos a cambiar
el estado
del set filter country
y aquí en el value
pues tendríamos
el string
que está escribiendo
el usuario
cuando cambiamos
este set filter country
bueno
pues cambiará
el estado
y ya está
la forma
más sencilla
de hacer esto
porque hay mucha gente
aquí
se vuelve loco
utiliza otro efecto
utiliza estados
no utilicéis estado
para esto
que la liáis pardísima
lo que hay que tener
en cuenta es
esto es otro cálculo
previo
que tenemos que hacer
de nuestro estado
en lugar de crear
otro estado
lo que tenemos que hacer
es decir
bueno
vamos a filtrar
los usuarios
podemos filtrarlos
y luego ordenarlos
o sea que podríamos
tener aquí
filtered users
y aquí filtrar
si tenemos
el filter country
vale
pues vamos a decir
vale
pues users.filter
y aquí filtramos
los usuarios
y podemos decir
que su localización
justamente lo que dice
en la localización
el país
lo pasamos todo
a lowercase
¿por qué?
porque hacemos esto
de lowercase
esto lo hacemos
porque si tú aquí
escribes por ejemplo
todo en mayúscula
Spain
¿ves?
todavía detecta
el texto Spain
si pones German
y todo en minúscula
aunque la primera
es en minúscula
y esta en mayúscula
lo detecta igual
así que es una buena idea
que lo paséis
tanto lo que comparáis
como lo que llega
todo a lowercase
para que lo comparéis igual
independientemente
si estáis utilizando
mayúsculas
o minúsculas
y lo que hacemos aquí
es decir
vale
pues solo quiero que
tengamos
en este nuevo array
todos los usuarios
que incluyan
la palabra
del filtro
que me ha puesto
el usuario
y si no
pues devolvemos
todos los usuarios
normales
y ya está
y aquí en este
filter users
este filter users
es el que utilizaremos
entonces aquí
para ordenarlo
y si no
devolveremos
filter users
o sea
esto es un poco tricky
porque ya ves
que hay como
bueno y aquí
esto es interesante
porque así
pues podemos poner
si filter country
no es truci
sino que debería ser
type of
si es string
vale
pues entonces
hacemos este filtro
y ya está
podemos hacer
que sea string
y que además
sea mayor que cero
por si nos ponemos
una cadena de texto vacía
y así pues
solo filtramos
cuando tiene sentido
entonces
primero filtramos
los usuarios
y luego los ordenamos
no tiene sentido
hacerlo al revés
porque entonces
estaríamos ordenando
usuarios
que a lo mejor
hemos filtrado
así lo que hacemos
es evitarle trabajo
al renderizado
esto es súper importante
seguro también
lo van a tener en cuenta
porque lo que van a querer
es justamente
que vean
que hacemos
lo mínimo posible
y de hecho
en el siguiente punto
nos lo dicen
una cadena vacía
no se considera como false
bueno pero en este caso
da igual
porque lo estamos haciendo mejor
decimos
oye
que sea string
y que su longitud
sea mayor a cero
y ya está
el problema
que nos estaba diciendo
typescript
es el tema
de que estamos teniendo
un valor
nullable
tenemos que tenerlo en cuenta
¿por qué?
porque filter country
puede ser null
y así lo estamos haciendo
de una forma mucho más explícita
que feo el type of ahí
bueno podéis hacerlo
de otra forma
si os gusta el type of
puedes decir
que si filter country
es diferente a null
ya está
esto tiene en cuenta
los acentos
sí que tiene en cuenta
los acentos
sí que tiene en cuenta
los acentos
o sea lo podrías quitar
incluso
podríamos eliminar
los acentos
y esto
tienes lo de filtrar
por país
¿vale?
pues ya
¿vale?
ya funciona correctamente
ya podéis ver
que funciona correctamente
pero
aunque esto funciona
porque lo estamos haciendo bien
filtramos primero
ordenamos después
de hecho
podríamos mirar
¿no?
si ordena
y quitamos
solo queremos mirar
Australia
Brasil
y vemos que
está ordenado
¿no?
o sea que
estamos ordenando por país
de hecho con la A
¿vale?
están ordenados por país
y además está filtrando
o sea que está funcionando
correctamente
¿qué pasa ahora?
que en el Ritmi
nos encontramos
evita
volver a ordenar
a los usuarios
cuando lo único que ha hecho
es cambiar el filtro por país
y los resultados
son los mismos
¿a qué se refiere esto?
que
nosotros
vamos a hacer
una cosa aquí
imaginad
que tenemos
un método
vamos a poner aquí
sort users
que se le pasa
a los usuarios
¿vale?
vamos a pasar esto aquí
vamos a ponerlo aquí
y esto
devuelve directamente
los usuarios
que ordenamos
imaginad
que tenemos esto
y aquí
pues vamos a tener
los
sorted users
pasándole
los filter users
y esto le decimos
que es
un array
de usuarios
y aquí tendríamos
users
y aquí
users
vamos a ver este
sort users
sort users
¿qué pasa con este
sort users?
si miramos
en el console.log
a ver que hay aquí
algunos errores
vale
eso
ah bueno
claro
sort users
la primera vez
sale dos veces
por culpa del
de esto
del strict mode
que lo podemos quitar
para que no nos líe
lo quitamos
y así lo veremos
una vez
ah vale
es normal
es normal
porque el use effect
cambia el estado
es normal
tiene sentido
porque
el primer estado
como tenemos un use effect
¿vale?
esto lo que hace
es primero
se renderiza
luego hacemos el use effect
cambiamos los usuarios
y entonces
vuelve a ejecutar
el sort users
pero bueno
este no es importante
lo importante es
que si yo pongo aquí
a
¿vale?
bueno
vamos a poner
abu
¿no?
y me salen los de Australia
pero si le doy otra vez
a la S
me ha vuelto
a ordenar los usuarios
o sea
me está ordenando
los usuarios
independientemente
de si han cambiado
los usuarios
que tenemos
si está
todo igual
de hecho
incluso
si coloreo las filas
está ordenando
los usuarios
o sea
pese a que
no estoy cambiando
o sea
no estoy volviendo
a ordenar los usuarios
no estoy haciendo nada
está entrando
en este método
de sort users
está entrando aquí
sin necesidad
esto es bastante interesante
porque aquí es donde
sí que se ve
donde tiene sentido
utilizar el use memo
que de hecho
es justamente
lo que nos están pidiendo
lo que nos están pidiendo
es evitar
hacer el sorting users
cuando no tenga sentido
¿qué es lo que
tendríamos que hacer?
en lugar de
tener aquí
que siempre
se ordenen los usuarios
que además son un montón
de elementos
independientemente
de lo que pase
lo que vamos a hacer
es utilizar
el memo
para que solo lo haga
cuando tenga sentido
¿cuándo tiene sentido?
pues
podríamos hacerlo
tanto para el filter users
como para el users
¿no?
tiene sentido
cuando están cambiando
los usuarios
vamos a utilizar
el use memo
¿vale?
use memo
y hay que pasarle
una función
y en esta función
le vamos a decirle
vale
pues aquí llama
el sort users
y tal
pero fíjate
que necesita
dos argumentos
el segundo argumento
es que tenemos que decir
cuáles son los valores
que queremos
que al cambiar
vuelva a ejecutarlo
de dentro
vamos a quitar esto
de aquí
esta función
y la vamos a meter
aquí directamente
quedará un poquito
más claro
lo que hace exactamente
¿vale?
mira de hecho
esto
vamos a simplificarlo
así
esto así
entonces
lo que hemos dicho
es
oye
el valor
de esta constante
sort users
quiero que la memoices
o sea
quiero que guardes
este valor
y que no lo vuelvas
a calcular
entre renderizados
a no ser
que cambie
el valor
del filter users
o el del sort by country
¿por qué?
porque cuando cambia
el sort by country
tenemos que cambiar
el sort
y cuando cambia
el filter users
también deberíamos
¿cuál es el problema
que tenemos aquí?
el problema que tendríamos
con el filter users
es que el filter users
siempre cambia
porque el filter users
siempre lo estamos
recalculando
en cada renderizado
por lo tanto
en cada renderizado
el valor del filter users
va a cambiar
de hecho
nos va a pasar
exactamente lo mismo
que hemos visto antes
aunque nos estamos acercando
en el colorear
en el colorear
no pasa
¿vale?
ordenar por país
¿vale?
ordenar por país
y aquí pues
nos sigue pasando
lo bueno
que podemos hacer
es que el filter users
nos pasa exactamente
lo mismo
podríamos
el filter users
que también se está
recalculando cada vez
lo podríamos utilizar
con un use memo
y decirle
oye
vamos a hacer una cosa
vamos a hacer
el filter users
lo vamos a meter
lo vamos a memorizar
de forma que
todo este código
que estás haciendo aquí
todo este código
filter country
todo este código
que me devuelve
los usuarios filtrados
solo quiero
que lo vuelvas a hacer
cada vez que cambien
los usuarios
o cada vez que el usuario
me esté pasando
un nuevo
filter country
independientemente
de todo lo demás
si cambia cualquier otra cosa
que no sea ninguna de estas
me vuelves a devolver
lo mismo que habíamos
hecho antes
calculate filtered users
vale
y aquí vamos a poner
calculate
sorted users
y aquí
ahora
lo que vamos a ver
es que
country
vale
es normal
que cada vez
que yo cambio
el
ah mira
pero ahora no me
no me ha cambiado esto
no está cambiando esto
porque
esto ahora
debe ser users
no
ah
lo ves
esto ha funcionado
demasiado bien
esto ha funcionado
demasiado bien
a ver
si me ha puesto alguien
si indirectamente
te están
te están obligando
a utilizar
todos los hooks de react
vale
filter users
but never read
y este
sorted users
me falta uno
me falta algo
que he puesto por aquí mal
no la estás usando
no pero este
filter users
porque debería ir aquí
pero estamos
nos hemos pasado
aquí de
nos hemos pasado
ah
porque este es el
filtered users
esto es filter users
que no sé por qué
he puesto ahí filters
vale
todavía
nos falta algo
country
filter country
cada vez que cambia
users
a ver si lo encontráis
dentro del short
no es filter users
y esto debería
devolver
el filter users
también
yo creo que
ahora sí
el problema es que aquí
le había puesto users
y es filter users
o sea porque primero
lo filtramos
y luego
los ordenamos
y lo que ordenamos
son los usuarios filtrados
como había puesto users
como había equivocado
por eso estábamos viendo
siempre los mismos
porque no estaban filtrados
pero ya está
este es el problema
o sea el problema
ahora sí que funciona
vale
este era el problema
vamos a ver
un poco funcionando
esto del calculate
y todo esto
mira
si yo aquí pongo
es normal
que me vuelva
me vuelva a calcular
los que ha filtrado
y los que ha ordenado
es normal
si le doy a colorear
no deberíamos ver nada
¿por qué?
porque el colorear files
lo que está haciendo aquí
es cambiar el estado
de colorear
el de show colors
está volviendo a renderizar
todo el componente
pero cuando llega aquí
dice vale
esto
esto lo tengo que ejecutar
solo lo tengo que ejecutar
cuando haya cambiado
el users
o el filter country
pero ¿ha cambiado
el filter country?
no
lo que ha cambiado
es el show colors
vale
pues esto
lo que voy a hacer
es recuperar
el valor anterior
que tenía
me salto todo esto
y le doy el valor
que tenía
ya está
sigue bajando
y dice vale
sorted users
¿ha cambiado
el filter users
o sort by country?
no
bueno pues no pasa nada
le devuelvo el valor
que ya tenía
no lo vuelvo a calcular
y esto
para que lo veáis
la diferencia
vamos a poner esto
por aquí
la diferencia sería
que con esto
esto teníamos aquí
antes
filtered
users
vale
y esto
esto así
esto así
esto para que veáis
la diferencia
entre uno y otro
este
fuera
ay a ver
esto porque no se
porque no se ejecuta
que estoy intentando
hacer una función
auto ejecutada
ah coño
es que se me ha olvidado
vale vale
ya está
esto aquí
mira
calculate
o sea básicamente
estoy haciendo lo mismo
que hemos hecho
con el use memo
pero sin el use memo
vale
este lo voy a hacer mejor
me lo voy a copiar todo
pero quitándole el use memo
vale
entonces vais a ver ahora
el antes y el después
y vais a ver
la diferencia
una con use memo
y otra sin use memo
vale
y esto lo ponemos aquí
y ya está
entonces
fijaos aquí
estamos aquí
yo ahora le doy a colorear filas
y está
calculando
filtrar usuarios
y tal
ordenar
y está calculando
no sé qué
resetear el estado
calcular
no sé qué
no sé cuánto
filtrar por país
vale
le damos a aus
vale
quito la s
y todo
todo lo está volviendo
aus
también otra vez
o sea está todo el rato
todo el rato
está calculando
si le doy a colorear
o sea yo me pongo a colorear esto
y está aquí calculando
y ordenando
y filtrando
vale
en este caso
imagínate
esto sería el antes
y esto sería el después
donde
nos hemos podido quitar
por ejemplo
si coloreamos
pues coloreamos
y este trabajo
no lo está haciendo
porque está recuperando
el valor que había hecho antes
obviamente
si ordenamos por país
¿qué está haciendo?
está calculando
solo lo que ha cambiado
que es lo de ordenar
por país
fíjate
solo está haciendo
la parte que le interesa
porque cuando ordenamos
por país
al entrar a
a los usuarios filtrados
dice bueno
es que no ha cambiado
ni los usuarios
ni el filter country
pues no tengo que hacer
este trabajo
o sea se salta esto
y solo hace este
que es el que tiene sentido
claro
cuando reseteamos el estado
pues no
bueno en este caso
no hay mucho que resetear
es normal que cambien todos
porque estamos cambiando
los usuarios de golpe
y aquí
cuando estamos ordenando
estamos cambiando
los usuarios que salen
es normal
porque tiene que ordenar
todos los usuarios
o sea los usuarios
pueden ser que cambien
en este caso
no cambian
porque está devolviendo
los mismos
pero en realidad
sí que estamos devolviendo
unos nuevos
porque fíjate
que el uses.filter
esto devuelve un nuevo array
y lo está haciendo
pero al menos estamos evitando
bastante trabajo
allí donde tiene sentido
y solo cuando tiene sentido
está volviendo a ordenar
o está volviendo a calcular
estas dos cositas de aquí
y esta
es la gracia
del use memo
¿vale?
que muchas veces la gente
no sabe de cómo utilizar
el use memo
pues aquí tenéis un ejemplo
clarísimo
de cómo utilizar
el use memo
y se podría hacer
que no haga un sort
al filtrar
si el sorting
es el mismo
se podría hacer
que esto
o sea
podríamos guardar
el user filters
en un urref
podrían guardarlo
en una referencia
y ya está
lo podríamos llegar a hacer
sería un poco
yo creo que ahí
ya evitarlo
me parece demasiado
que no vale la pena
me da la sensación
hay veces
que con el use memo
y el use callback
hay que tener un poquito
de cuidado
porque se te puede ir de las manos
y empezar a calcular cosas
y yo creo que hay que
hay un punto
en el que hay que parar
yo lo dejaría
a este punto
porque más
me parecería ya
un poco
llega un momento
que se complica
igualmente
hay una cosa interesante
que la gente de React
va a sacar
un compilador
¿ves?
que se llama
React Forget
y la idea
es que
lo que os acabo de explicar
todo esto
¿ves?
con el filter
que es el caso más típico
¿veis?
cuando queréis hacer
que todo quede
con performance y tal
se tiene que utilizar
el use memo
y el use callback
en el caso
que sea una función
pero en este caso
te explica que
a partir de un compilador
sería capaz
de detectar esto
y automáticamente
lo optimizaría por ti
y eso sería bastante chulo
y bueno
no es que sea bastante chulo
es que al final
o sea
esto va a llegar
porque están trabajando en ello
así que está bastante bien
¿por qué al momento
de poner el color
vuelves a recorrer
para arma la tabla
con el nuevo color?
¿no sería mejor usar
nth child
o algo así?
bueno
antes lo he comentado
que lo podríais hacer
con estilos
lo que podéis hacer aquí
por ejemplo
sería algo así
class name
que sería
show colors
entonces
podríais poner
table
show colors
yo que sé
por decir algo
y si no
lo podéis vacío
podéis quitar esto
vamos a quitar esto
y lo que podríais hacer
si tiene
vale
podemos poner
class name
si no
table
por decir algo
podríais hacer esto
lo que pasa
es que os decía
de evitar
liaros mucho
con los estilos
porque los estilos
hay veces
que
se os puede ir de las manos
pero bueno
podríais hacer algo así
¿no?
si tenéis el table
table
y aquí
tenéis
el tr
bueno
no hace falta
de poner el background
la verdad
pero bueno
table show colors
table show colors
y aquí
podríais poner
el
nh child
el tr
nh child
2n
a ver
red
vamos a ver
si así lo
lo hacemos un momento
¿vale?
¿veis?
ya lo tendríamos así
y podríamos hacer
el
nh child
más 1
¿vale?
y ya lo tendríamos
esta sería una forma
de hacerlo
por ejemplo
yo no creo
que sea esto
muy importante
de que lo queráis
hacer una forma
de otra
¿vale?
pero bueno
esta sería una forma
de hacerlo
si lo tenéis muy claro
lo de hacerlo con css
hacerlo con css
creo que puede quedar
muy bien
puede quedar
podéis quedar muy bien
pero
si no
si os complica
yo lo evitaría
o sea
yo solo
os comento
¿qué es lo que estamos
haciendo aquí?
lo que estamos haciendo aquí
es añadirle una clase
que sea
show table
show colors
le decimos
si hay una clase
que tiene esto
busca el elemento
hijo
tr
¿vale?
la fila
y las filas
que sus hijos
sean pares
2n
n sería el índice
o sea
2 por 0
pues sería el 0
el 2
el 4
el 5
vas a ponerle
que el background
sea de color
333
y le dices
y las que son impares
le pones el 555
y entonces
con esto
aquí
lo que está mirando
es básicamente esto
¿veis?
este sería
impar
par
impar
par
y tal
y por eso
cuando miramos los estilos
de este
podemos ver el 2n
más 1
lo tenemos ahí
en el impar
como la n
el índice es 0
2 por 0
0
más 1
índice 1
en CSS
cuidado
que los índices son
empiezan por el 1
¿vale?
o pensad en n
en lugar de índice
el elemento es el elemento 1
entonces se aparece así
y tal
y con esto lo podríais hacer con CSS
bueno
quedaría lo último del readme
que es el sort by clicking
on the column header
bueno
esto no es difícil
aunque yo creo que aquí
lo que quieren ver es
como
como haces
la gestión del estado
o sea
como
porque aquí hay un sort by country
y yo creo que lo que quieren ver aquí
es como
refactorizas
un poquito
lo que has hecho
también puedes utilizar
es verdad
es que
puedes utilizar
el odd y el even
a ver
CSS
odd
even
even rules
eso
ntchch
ten toda la razón
yo es que lo hago así
matemáticamente
no sé por qué
eso
podéis poner aquí
odd
y even
y ya está
más fácil
que se lee más fácil
y no sé por qué lo he hecho con el n
porque
la última vez que lo usé
lo usé con el n
y ya está
pues podéis hacer esto
y es lo mismo
que gracias por recordármelo
vamos con el sort by clicking on the column header
yo creo que aquí lo que quieren buscar es
bueno
a ver cómo
refactorizar lo del sort este
que habías hecho al principio
hay diferentes técnicas
yo creo que lo
lo que puede estar chulo
es al menos utilizar un enu
tener
tener aquí el sort by
por ejemplo
poder tener el non
que será el por defecto
el non
vamos a tener también
el name
porque va a ser por cada una de las columnas
¿vale?
el age
no el age no
cabrón
es que el que jacopilot engañándome
el last name
y el country
¿vale?
country
entonces con esto
lo que yo haría
sería cambiar este
por sorting
set sorting
sorting
cambiar el use state este
para que sea un sort by
y aquí empezar por un non
por el non
por ninguno
¿vale?
entonces
podemos rápidamente aquí
que tengamos el sort by country
¿vale?
set sort by country
el toggle este
es un poco tricky
porque esto antes era un booleano
ahora vas a tener que cambiar
y decir
oye ¿vale?
si el sorting
es igual
al
sort by non
entonces vamos a poner
el sort by country
y si no
sort
country
¿vale?
y si no
tal
vamos a poner aquí
el new sorting value
y ahora sí
set sorting
new sorting value
o sea lo que hacemos aquí
es simular
el binario
que teníamos antes
y lo bueno
es que podéis probarlo ya
o sea
a este punto
podéis ir aquí
y ya probar
bueno
aquí
resetear
quitamos esto
ordenar por país
y esto todavía
sigue funcionando
¿ves?
y ponen ordenar por país
por país
o sea esto ya funciona
pero como ahora nos pide
que cuando hagamos click
en cada uno de estos
al nombre
el apellido y tal
también cambie
pues eso lo vamos a tener que ajustar
un poquito
así que oye
hay una cosa que me está dando
un poco de toque
que es el hecho de la separación
dame un segundo
vamos aquí al header
display flex
gap
de 4 píxeles
margin button
16 píxeles
justify
center
align
center
¿vale?
y vamos a poner un poquito más aquí
¿no?
48
vale
mejor
es que me estaba
me estaba poniendo un poco nervioso
vale
entonces ahora nos pide
darle click a cada uno de estos
y ordenar por todo esto
lo que tenemos que hacer
es pasar
un
podríamos pasarle
un método
que sea handle
como este ¿no?
handle
change sort
donde aquí
tiene que llegarle
un sort by
del enum
uno de ellos
o sea solo puede ser
o por nombre
por apellido
por país
y todo esto
aquí cambiaríamos el set sorting
por el que nos pasen por parámetro
y este handle
change sort
es el que le vamos a pasar
a nuestro
hostia
sort by country
ah claro
aquí ahora es sorting
si sorting es sort by country
y si cambio al sorting
aquí
si sorting es igual
a sort by
country
esto es lo bueno
de typescript
que en lugar de tener
tantos magic strings
y tal
con el enum
en un momento
pam pam pam
change sorting
le pasamos handle change
esto no se queja
typescript
vamos aquí
el change
sorting
y aquí
change sorting
y el sort by
lo importamos
y ya está
change sorting
venga
aquí
uy
aquí
aquí
aquí
cuando hacemos
clic
cambiamos
el change sorting
por
y aquí
en cada uno
pues aquí
tendríamos el sort by
punto por el name
aquí haríamos
el sort by
punto por el last name
y el sort by
también vamos a poner
el del country
aunque ya
ya está hecho
y ya tendríamos
los tres botones
de hecho el th este
podríamos poner
como son clicables
vamos a poner pointer
por poner algo
pointer pointer pointer
y en
en los estilos
vamos a poner aquí
que el punto pointer
cursor
vamos a poner crosshair
que me hace
me hace gracia
me hace gracia este
vale
vale
y hay aquí uno
que se me está quejando
porque el import
este ha ido muy rápido
y se ha vuelto loco
vale
vale pues ya tenemos esto
claro fíjate que le doy clic
le estoy dando clic
y no cambia
esto es normal
solo cambia el del country
solo cambia el del country
porque el del country
es el único
que tenemos la lógica
¿dónde tenemos que poner la lógica?
pues donde estamos haciendo
el sorted users
aquí estamos teniendo
un montón de sorted users
podemos hacer algo
mira
vamos a tener aquí
un sorting
que sea un
¿cómo podemos hacer esto?
mira
podremos hacerlo
de muchas formas
podríamos hacer
un montón de if
podremos hacer
if
if
if
if
sorting by none
pues devolvemos
los filter users
if
sorting
es igual
sort by country
entonces
pues claro
debería copiarme
todo esto
return
tal
pero ¿qué pasa con esto?
el problema de esto
a ver
no pasa nada
y de hecho
oye estaría bien
porque al menos
funcionar funcionaría
vamos a hacer que funcione
vale
lo que tenemos que hacer
de cada uno
es hacer el local compare
y comparando los dos
y ya está
¿no?
y aquí lo mismo
sorting
si el sort by last
return
y sería lo mismo
que hemos hecho
en la línea anterior
pero comparando
otro
otro diferente
y con esto
ya lo tendríamos
con esto
ahora sí
¿ves?
el apellido
por nombre
¿ves?
aquí lo tenemos
todo bien ordenado
por apellido
por nombre
por país
y además
cuando cambia
el del país
aquí también cambia
o sea que
lo tenemos
lo tenemos
en los dos sitios
así pasaría
none
ahora ya tenemos
todo los
todo el sorting
lo tenemos
funcionando
no está mal
como está
¿vale?
que muchas veces
la gente
si no
nos podemos
volver locos
de refactorizar
de decir
que no sé qué
podéis utilizar
el switch
también
tampoco estaría mal
¿no?
podéis hacer
la comparación
dentro
¿sabes?
podríais hacer
la comparación
del to sort
dentro
hacer el if
en lugar de hacerlo
fuera
dentro
podéis hacerlo
de muchas formas
una forma
por decir una
¿vale?
que se me ocurre
es que podríais
tener una función
aquí que sea
sort tfn
donde podáis poner
algo así
¿no?
tenéis aquí
el sort tfn
lo malo es que
claro
esto habría que
tiparlo
entonces
porque si no
no funcionaría
entonces os quitáis
esta
ya os quitáis
esta
esto lo podríamos
tener como un let
porque esta podría
ser una
y luego aquí al final
simplemente hacer un
return
filtered
users
punto
to sort
sort tfn
y ir cambiando
el sort tfn
dependiendo
si tenéis
un if
¿sabes?
o sea
podéis decirle
vale
si tengo esto
entonces
vamos a cambiar
el sort tfn
y de hecho
podríais incluso
hacer
una
ternaria
anidada
de esas que os gustan
que la podríamos liar
pardísima
se podría hacer
de muchas formas
pero estoy pensando
una podría ser
esta
de ir cambiando
el sort tfn
simplemente así
y de que cada uno
tuviese su
sort tfn
esto nos podría
acercar a una solución
todavía mejor
al menos para no tener
que ir repitiendo
esto nos podría
acercar a una
un poquito mejor
y esto funcionar
debería funcionar
podríamos hacer
también
un objeto
¿sabes?
podríamos hacer
un objeto
pero en este caso
yo jugaría más
con los objetos
que tenemos que comparar
en el sentido de
yo a lo mejor
compare properties
o sea jugaría más
en lugar de la funcionalidad
podríamos jugar
claro
esto sería ideal
esto sería ideal
de poder hacerlo
a través de
el string
y de hecho
hay utilidades
que nos lo podrían hacer
pero lo que
podríamos hacer
en su caso
es tener
una sola función
en la que
al pasarle
un user
esto tendría
el user
entonces aquí tendríamos
user.location
de
country
podríais extraer
cada una de las cosas
que queréis comparar
porque la comparación
también es la misma
¿sabes?
es que es la misma
exactamente
entonces esto
lo podríais hacer
unas cuantas veces
name
el last
obviamente aquí
pues tendríais que
tipar esto mejor
record
tener aquí
que esto sea un string
y que esto sea una función
con user
que es user
y esto devuelve
cualquier cosa
porque la verdad
es que no sabemos
lo que devuelve
pero ya entonces
ya tendríais el user
lo tendríais ahí
en el name
tendríamos aquí
que esto es name
first
y este es name
last
esto es
una posible opción
no digo que hagáis esto
que os conozco
que luego me decís
no es que hice eso
y lo bueno de esto
es que solo
tendríais
una sola función
esto ya nos lo quitaríamos
todo esto
nos lo quitaríamos
y aquí tendríamos
una sola función
en la que
tendríamos
el compare
bueno justamente
tendríamos
el comparison
o extract
property
del compare properties
le pasamos el sorting
y ya tendríamos que hacer
el extract property
de cada uno
y estas serían
las dos de comparar
compararíamos este
y este
a ver que si no queréis
crear muchas cosas
pues podéis hacer esto
y lo bueno de esto
es que ya
con este código
de aquí
ya tendríais
cualquier comparación
y podríais añadir
en un objeto
la comparación
que tenéis que sacar
en un momento
o sea
en lugar de crear
todo el número
¿sabes?
entonces esta sería
una opción
¿vale?
lo bueno es que
es bastante extensible
en lugar de tener
que crear
toda la función
esta lógica
al final solo la necesitamos
una vez
entonces
esta podría ser
una opción
no me desagrada
y para que veáis
un poco como había
quedado antes
¿no?
con todo el tema
de los if
antes era así
¿vale?
entonces sería
esto
contra esto
versus esto
esta sería
la forma
extensible
y esta sería
la forma
if
if
if
y ya está
y esto sería
más
utilizar un objeto
o un record
como lo quieras llamar
o un diccionario
y ya está
un record es una forma
de tipar el objeto
¿por qué hay gente
que dice que es prueba junior
y gente que dice
que está prueba Smith
porque dices que es
Smith y no junior
yo creo que es una prueba
que puede ser de junior
para mí un junior
es una persona
que no es senior
y puede ser una persona
que tenga cuatro años
de experiencia
tres años de experiencia
y por decir
mid me refiero a una persona
que ya tenga
no tenga cero años
de experiencia
para que entendáis un poquito
para mí
es una prueba
que puede ser
de una persona
que tenga dos
tres años de experiencia
porque es un poco tricky
con esto ya lo tendríamos
ay aquí lo ha pasado
ah porque puede ser
undefined
porque
bueno hemos
he tocado alguna cosita
por ahí
ah
porque esto
esto debe ser
el caso por defecto
ay coño
es que
he quitado esto
he quitado esta parte
he quitado esta parte
de hecho
ya podemos quitar
pues algo así
ya estaría así
ya lo tendríamos así
y con esto
pues ya
ya lo tenemos funcionando
perfectamente
y si te pidieron
que se filtrara
hombre
eso ya lo lleváis
de deberes
nacholo
de hecho
os podéis llevar
de deberes
mejorarle el diseño
que si os piden
de filtrar
por apellido
por lo que sea
que os pidan
por filtrar
por más de una cosa
o sea
la paginación
que tiene paginación
lo podéis hacer
la paginación también
le podéis dar
una vuelta
guardar también
al eliminar
os recomiendo
que le deis
un poquito de cañita
las aquí
de algo
y
la
cuando
lo
la
lo
lo
que
ersto
στο
sueño