¿Estamos todos o no falta casi nadie?
Vamos a acabar aquí con buenas tardes de Madrid.
Es súper crack. Gracias, Joaquín.
En Colombia. Madre mía,
madre mía. Es que hay desde todos
los sitios, todos los rincones del mundo.
Vale, pues vamos a
empezar con la clase, si
os parece. Y, a ver,
vamos a poner esto por aquí.
También os invito a que me sigáis en Instagram
y ya termino, ¿eh? Porque estamos
ahí, mira, 9827. Y cuando
llegué a 10.000, tengo el super swipe este
y así en los stories
puedo poneros enlaces para que vayáis
directamente al contenido.
Vale, pues dicho esto, voy a
ir cerrando aquí cositas. Estamos aquí en
el repositorio de GitHub.
¿Qué vamos a hacer en la clase
de hoy? En la clase
de hoy vamos a hacer dos
funcionalidades que han quedado un poquito
ahí a medias y que
son bastante interesantes. Alguien me lo pidió
en un vídeo de YouTube, me pareció muy
interesante. Una es
permitir que los usuarios puedan
subir una imagen con cada tweet
o debit que se crea. Debit porque
estamos haciendo nuestro
clon de Twitter. Así que
lo que sería un tweet para nosotros es un debit.
Y vamos a permitir que los usuarios
puedan subir una imagen, ¿no? Y la
podremos listar y vamos a ver que
gracias a Firebase Storage la vamos
a dejar en la nube y la vamos a
previsualizar y luego la veremos y tal.
Eso es una de las cosas que haremos.
Pero antes vamos a terminar
lo que dejamos a medias que era lo del
time ago, ¿no? Hicimos, claro, en Twitter
tú puedes ver como cada tweet te dice
esto hace dos segundos, hace tres
minutos, hace cuatro días, cosas así.
Pues esto queremos todavía
mantenerlo, nos gustaría tener algo así.
Al final de la clase anterior vimos
que tuvimos algunos problemas con las
fechas porque me devolvía segundos y yo
pensaba que eran milisegundos y tal.
Y se quedó esto a medias
y hoy vamos a hacer esto. Y lo vamos a
hacer sin dependencias. Vamos a conseguir
hacer esto sin dependencias y gracias
a utilizar la plataforma.
Así que si estás preparado, pues
vamos a ponernos manos
a la obra con esto, ¿vale?
Vamos a... Me voy a poner por aquí
abajo o me voy a poner mejor
arriba. Ay, ahí he desaparecido.
A ver, a ver. Pum, ya está.
Vale, pues lo que... Lo primero que
vamos a hacer tendríamos que ir al
repositorio de GitHub donde estamos
siguiendo el curso y tenemos diferentes
ramas. La última clase fue la cuarta
donde añadimos Firestore que es la base
de datos no SQL que nos
proporciona Firebase. Así que
esta rama... Voy a irme aquí
y tengo un escritorio donde tengo el editor
y ya lo tengo todo preparado.
A esta rama es a la que vamos a ir.
A la 0.4.
Firestore for creating tweets.
Perfecto. Ahora vamos a hacer
un npm run y aquí
pues deberemos tener todos los scripts
y uno es el de dev, pues
npm run dev y ya nos estamos
poniendo en marcha.
Vamos aquí a entrar a este localhost
3000. ¡Ey, ey, ey! ¡Me lo quiero pegar!
¡Estáate quieto! ¡Estáate quieto!
Vale, ya está. Ya me lo... Ya lo pegué.
Vale, pues ya estamos inicializando
nuestra aplicación.
Ya habíamos dejado esto así, ¿no?
Que habíamos dejado pues que salían
los tweets que se podían escribir,
aunque tampoco habíamos puesto un botón
para ir a lo de los tweets.
Tenemos que entrar manualmente.
Tenemos que poner compose barra tweet.
De hecho, vamos a probar que esto
sigue funcionando y que no rompimos
nada con post barra tweet.
Y esto aparecería esto.
Todavía faltan cosas visuales, ¿eh?
Estamos trabajando en ello.
Pero lo importante es que le damos
a debitear y esto, bueno, pues
ahora me fijé que está desordenado,
pero podemos ver que aquí me ha dejado
el debit, ¿no?
Que sería nuestro tweet.
Luego lo arreglamos esto
de que esté desordenado,
que no es lo que queremos.
Lo importante ahora va a ser
nos vamos a enfocar en esto.
¡Ay, bueno! Igual es que estoy
estoy encima, estoy encima.
Ya me muevo.
¡Pium!
Ya está.
Vale, este era el tweet,
no sé si se había visto.
Y lo que nos vamos a enfocar
es en la fecha, en esta fecha.
Porque lo que queremos hacer
es eso de hace dos días,
hace no sé qué, hace lo que sea.
Entonces, en este cliente
de Firebase, lo que teníamos por aquí,
voy a hacer esto un poquito
más chiquitito por aquí
y voy a hacerlo un poquito
más grande para que lo podáis
ver perfectamente.
Quito esto y así vemos más código.
Perfecto.
Vale, habíamos dejado,
este es el código que habíamos dejado,
¿no?
Con lo del date y todo esto.
Por ahora, lo que me gustaría
es recuperar el timestamp.
El timestamp, básicamente,
lo que nos dice
es el número de milisegundos
que han pasado
desde la fecha de 1970,
que ahora no me acuerdo cuál es.
Pero es una forma
que tenemos para saber
con un número
qué fecha estamos.
Y ese timestamp
lo que nos proporciona
es poder comparar dos fechas, ¿no?
Es como, ¿cuándo ha sido antes
esto y esto?
Bueno, pues podemos recuperar
la diferencia en milisegundos
entre dos fechas
y una vez que tenemos eso,
pues podemos calcular
todo lo que queramos.
Así que lo que vamos a hacer
en este caso
es recuperar el timestamp.
En lugar de hacer todo esto
que habíamos hecho aquí
y que recuperamos el segundo y tal,
me he encontrado una forma
que es bastante sencilla
de recuperar
la fecha en Firebase,
que básicamente
sería hacer un
createdAd,
que esto nos lo devolvía
a Firebase, ¿vale?
Y era un objeto.
Podemos hacer un toDate
y esto ya nos devuelve
como un objeto
fecha de JavaScript.
Así que para recuperar
el timestamp
lo que vamos a utilizar
es el operador
un ari.
¿Me sale un ari en inglés?
Un ario.
Un ari.
¿Cómo sería en castellano?
Bueno, un arioperator, ¿vale?
Que nos va a transformar esto,
nos lo va a transformar
en un número.
Así que lo que vamos a hacer,
vamos a quitar esto
y todo esto
que habíamos hecho
para normalizar la fecha
y que apareciera
como en castellano
y bien formateada,
todo esto lo vamos a quitar
y lo que vamos a hacer
es conseguir este timestamp.
Lo vamos a hacer así.
Este createdAd
que lo recuperamos
de la data,
lo convertimos
a una fecha
de JavaScript
y con un arioperator
lo vamos a transformar
en un timestamp.
Voy a guardar los cambios,
a ver qué pasa.
Y aquí tenemos el timestamp, ¿vale?
Este es el número
que os comentaba.
Entonces,
de esta forma
ya nos va a permitir
de forma más sencilla
comparar entre la fecha actual
y esta fecha
que tenemos aquí, ¿vale?
Entonces,
tengo,
tenía la idea,
tenía la idea
de crear una pequeña utilidad,
¿no?
Pero creo que lo vamos a hacer
con un hook, ¿vale?
Vamos a hacer un hook
que le podamos pasar una fecha
y nos devuelva él
hace dos minutos,
hace siete días,
hace lo que sea.
¿Por qué lo vamos a hacer
con un hook?
Porque,
aunque no sé si en este vídeo
nos va a dar tiempo,
pero creo que puede ser interesante,
no sé si Twitter lo hace,
pero ¿qué pasa?
Cuando haces un tweet
que pone hace cinco segundos,
estaría bien
que se vaya actualizando, ¿no?
Cada 15 segundos
pues vaya poniendo,
hace 20 segundos,
hace 35, ¿no?
Que en tiempo real
vaya actualizando el tiempo.
Y eso con un hook
lo podríamos hacer
porque podríamos tener un estado,
con un set time out y tal.
Por ahora vamos a empezar
fácil
y vamos a hacer el hook
que lo va a hacer así como estático,
pero que lo podemos tener en cuenta.
¿Dónde estábamos utilizando esto?
Teníamos el componente debit,
¿vale?
Aquí lo tenemos.
Y en este componente
teníamos este,
aquí, date.
Este date,
esto es lo que se está renderizando
justamente ahí, ¿vale?
Pues este date,
este created at,
aquí vamos a utilizar
este time ago,
este hook
que vamos a llamar
use time ago
donde le vamos a pasar
el created at
que este es el timestamp
que le llega, ¿vale?
Por ahora voy a dejar esto así
para que no me pete.
Vamos a crear el hook.
El hook
se llama
use time ago.js
y aquí lo primero que voy a hacer
es crear como un diccionario,
un diccionario
que lo que me va a decir
es el número de segundos
que hay en las diferentes unidades
de un día
y os lo voy a explicar bien.
Esto es,
vamos a crear la constante
que sea date units
y esto va a ser un array.
Un array de arrays
y en el primer array,
por ejemplo,
vamos a tener dos posiciones.
Uno,
que va a ser la unidad del tiempo,
por ejemplo día
y luego el número de segundos
que tiene un día,
pues son 86.400, ¿vale?
Luego,
el número de segundos
que hay en una hora,
pues son 3.600.
Luego,
el número de segundos
que hay en un minuto,
60.
¿Y el número de segundos
que hay en un segundo?
Uno.
Perfecto.
Pues ahora que tenemos esto,
lo que podemos ir creando
ya nuestro hook,
podemos hacer
use time ago
y aquí le pasaríamos
el timestamp.
Entonces esto nos devol...
Por ahora podemos hacer
que nos devuelva justamente
el mismo timestamp.
Podemos hacer esto
porque de esta forma aquí
ya sí que podríamos importar esto
y así ya esto debería funcionar.
Ah, mira.
Ya está.
Time ago
y aquí en lugar del created at
lo que vamos a renderizar
será el time ago.
Y así podremos ir viendo
cómo vamos mejorando.
Por ahora sigue todo igual,
pero lo importante
es que va a funcionar por ahora.
Vale.
Entonces,
lo que tenemos que lograr primero
sería recuperar la diferencia
entre dos fechas
y estas dos fechas,
¿cuáles son?
Pues una es el momento actual
y otro es el momento
en el que se escribió
ese debit o ese tweet.
¿Vale?
Así que vamos a crear aquí
una función
que sea getDateDifs
que le vamos a pasar el timestamp
y aquí lo que vamos a hacer primero
es recuperar el timestamp
de ahora, ¿no?
La marca de tiempo de ahora.
Para eso hacemos un date now
y esto nos devuelve
pues un número como este
pero que es el momento actual.
Muy bien.
Ahora,
solo tenemos que calcular
el tiempo que ha pasado
entre uno y otro.
El tiempo que ha pasado
entre uno y otro
va a ser el timestamp
menos el momento actual
dividido entre mil.
Ahora,
esto lo tenemos que poner
en un...
Así,
lo tenemos que poner en paréntesis
que si no
la vamos a liar.
¿Y por qué entre mil?
Vale.
Primero,
el timestamp que tenemos
menos el tiempo actual.
Eso nos va a dar
la diferencia.
Dividido entre mil
porque así
nos quitamos los milisegundos.
Como os he dicho,
el timestamp te da
los milisegundos también.
Entonces,
nos quitamos los milisegundos
y así simplificamos.
Hablamos siempre de segundos.
De hecho,
los date units
que hemos hecho arriba
son de segundos.
Perdemos un pelín
de...
No sé,
de ser muy exactos,
¿no?
De exactitud en el tiempo.
Pero a ver,
estamos hablando de milisegundos.
No creo que sea tan importante.
Ahora,
lo que tenemos que hacer
es averiguar
la distancia
que hay entre estas dos fechas,
¿no?
O sea,
del momento actual
al momento en el que se escribió eso
de cómo es la distancia,
cuál es la magnitud de distancia.
Estamos hablando de segundos,
de minutos,
de días.
Para eso,
lo que vamos a hacer
es recorrer
esta constante
que he creado aquí,
este date units.
Vamos a recorrerlo.
¿Vale?
Entonces,
lo que vamos a hacer aquí,
vamos a hacer una desestructuración,
vamos a recuperar
tanto la unidad
como el valor.
Esto sería
unit,
¿no?
Pues las unidades serían días,
horas o lo que sea.
Y luego,
cuántos segundos
hay en esa unidad.
¿Ok?
Luego,
esto lo vamos a recuperar
del date units.
Así.
Ahora,
a ver si esto
se está quejando
porque no,
no lo estoy usando.
¿Vale?
Entonces,
aquí viene un poquito
la magia.
Aquí lo que tenemos que hacer
es ver
qué es más grande.
Si el tiempo
que ha pasado,
el tiempo que ha pasado
entre el momento actual
y cuando se escribió
el tweet
o el número
de segundos
que hay en esa unidad.
Porque de esta forma
vamos a averiguar
de qué magnitud
estamos hablando.
Si hay una magnitud
que es de días,
la diferencia entre ambos
es de días,
si es de horas
y tal,
¿no?
Así que
vamos a hacer
el tiempo
que ha pasado
menos,
el tiempo que ha pasado
no,
que el tiempo que ha pasado
sea mayor
a los segundos
que hay en esa unidad.
¿Vale?
O sea,
¿por qué?
Porque imaginemos,
¿no?
Si la diferencia
de segundos
que hay
entre
el momento de ahora
y cuando se ha creado
el tweet
son
120 segundos,
significa que estamos
hablando de minutos.
No vamos a poner
hace 120 segundos,
¿no?
¿Por qué?
Porque es mayor de 60.
Por lo tanto,
vamos a hablar de minutos.
Pero si fuese mayor
de 3.600,
hablaríamos de horas,
¿no?
No vamos a poner
hace 63 minutos,
¿vale?
Entonces,
aquí es donde vais viendo
un poco la idea de esto,
¿no?
Vamos a hacer esto.
Si el tiempo que ha pasado
es mayor
que los segundos
que hay en esa unidad
o,
porque al final
tenemos que quedarnos
con alguno,
si la unidad
es igual a segundos
porque total,
la unidad de segundos
es 1,
pues entonces aquí
lo que vamos a hacer
es devolver por un lado
el valor,
el valor que va a ser,
a ver,
el valor,
el valor va a ser
el tiempo que ha pasado
dividido
entre
los segundos
que tiene esa unidad.
Y ahora,
¿por qué es esto?
Porque el tiempo
que ha pasado,
¿no?
Si han pasado,
por ejemplo,
120,
significa que estamos
hablando de minutos,
¿vale?
Si han pasado 120 segundos
estamos hablando de minutos,
tenemos que dividirlo
entre 60
y entonces
el valor
va a ser 2.
Aquí hay un problema,
bueno,
un problema,
¿vale?
Pero hay un tema,
¿no?
Y es que,
claro,
esto nos podría dar
2,5 minutos.
Así que el valor,
lo que ha pasado,
mira,
lo voy a poner aquí
en el value,
voy a ponerlo aquí,
para que quede más claro.
Y esto lo dejamos así.
Claro,
si por ejemplo,
fuese que ha pasado
140 segundos
y lo dividimos entre 60
nos daría 2, algo.
Así que aquí,
obviamente,
tendríamos que hacer
un math,
math floor,
quizás sería,
bueno,
math round
o math floor,
el que prefiráis.
Luego lo podemos probar
a ver cuál de los dos
funciona bien.
Y luego vamos a devolver
también la unidad
para saber exactamente
si ha sido día,
hora,
minuto
y segundo,
¿vale?
Esto creo que está bien.
No lo sé.
Creo que sí.
Esto es lo que tiene
de hacer
estas cosas en vivo.
Vamos a probarlo.
Para eso,
voy a recuperar
tanto el value
como el unit
y lo que vamos a hacer
es el gate diff,
este que he creado,
lo voy a llamar
con el timestamp.
Timestamp.
Voy a hacer un console log
del value y el unit
para ver
qué me devuelve todo esto
y vamos a ver
si encontramos algún problema
de todo lo que he creado
y todas las explicaciones
que he hecho.
¿Vale?
Vale.
Vemos que hay un problema
y es que todo me dice
que son segundos.
O sea,
claro,
¿qué pasa?
Que me está dando
los valores negativos.
¿Por qué?
Porque el tiempo
que ha pasado,
claro,
siempre es menor
que el seconds unit.
Entonces,
el tiempo,
el abs este
que hemos hecho aquí,
tendríamos que utilizar
el valor absoluto
para ver el tiempo
sin el signo.
Tendríamos que hacerlo
con el valor absoluto.
Vale.
Esto ya pinta mejor.
Con el valor absoluto
para saber cuál es la diferencia.
Pero no nos tenemos que quedar
con el signo negativo.
Tenemos que ver
la diferencia de tiempo
que hay entre el momento actual
y el momento
en el que se creó
el tweet o el debit,
¿no?
Entonces,
nos quedamos con el valor absoluto,
¿vale?
Por eso pongo aquí
un math apps,
¿vale?
math.apps
de absoluto.
Y ahora sí
tiene mejor pinta,
¿no?
Me dice
que hay cuatro debits
que hace siete días
y hay uno
que hace doce minutos,
que es justamente
el que hemos creado antes,
¿no?
Y hay otros dos
que hace siete minutos.
Así que pinta,
esto ya pinta bastante mejor.
Lo voy a dejar
por aquí todavía.
Voy a volver al chat
a ver cómo lo lleváis,
a ver cómo estáis,
a ver si lo estáis entendiendo,
a ver si alguien
se ha vuelto loco.
Si no,
esto que he hecho
del math apps,
supongo que también
otra cosa podríamos hacer
es darle la vuelta a esto,
¿eh?
que el timestamp
en lugar de hacer
el apps
podríamos dejarlo así
y esto
debería funcionar también.
Vamos a ver.
Sí,
de hecho parece
que es un poco más...
¿Por qué pone...
¿Por qué cuando le doy la vuelta
se queda con el seis
o con el siete?
Bueno,
claro,
por el math floor,
¿no?
Porque si viene por lo negativo
y tal...
Vale.
Luego veremos
si necesitamos en realidad
el negativo.
Yo creo que necesitamos
el negativo
y no el positivo.
Por eso puede tener
más sentido darle la vuelta.
Por ahora lo dejamos así,
pero luego lo miramos
porque si no esto puede ser
que signifique
que vamos hacia el futuro.
Pero ahora lo leo,
¿vale?
Vamos a ver.
A ver qué me comentáis
por aquí.
Ta, ta, ta.
No sé por qué
no me gusta
que no tema
icons de carpetas.
Pues no sé.
¿Cómo que no...
No he entendido eso.
Joaquín me dice
¿no será now
menos timestamp?
¿No sería el actual
menos el timestamp?
Si no...
Bueno,
como veis lo he intentado,
pero vamos a ver.
Aunque dé negativo,
o sea,
no está mal
que me dé negativo
porque luego me puedo quedar
con el valor absoluto,
¿eh?
Pero bueno,
luego ahora lo miraremos
a ver si...
A ver qué tiene más sentido
si dándole la vuelta
a todo esto
porque igual lo que necesitamos
en realidad
es este valor negativo,
¿eh?
No sé.
Ahora lo veremos claramente.
Otra vez.
No necesitas el apps
si cambias el orden
del apps,
el now siempre es más grande.
Y si invertís el now
y todo el mundo con él
invertís...
Bueno,
lo he invertido,
lo he invertido.
Así que por ahora
vamos a ver
si esto será interesante,
¿eh?
¿Cómo estamos haciendo
Mathfloor?
Redondeamos hacia abajo.
Vale.
Pues sí,
lo que pasa es que
creo que puede tener sentido.
A ver,
como queráis,
Mathfloor,
pues hacia abajo,
Mathround,
hacia arriba,
Mathsale,
lo que queráis.
Vamos a dejarlo...
Bueno,
vamos a dejar el Mathround
que igual es un poquito
más interesante,
¿vale?
Para que sea un poquito
más exacto.
Bueno,
pues como más o menos
he visto que lo tenéis claro,
veo que no tenéis
ningún tipo de duda,
solo que estáis ahí
que le dé la vuelta
y que se la he dado ya
al now y al timestamp,
pues lo único que tenemos
que hacer ahora
es utilizar
pues la API
de la plataforma
y son dos líneas
de código
que nos van a permitir
tener el time ago
sin necesidad
de tener ningún tipo
de dependencia
y además
lo vamos a tener
con todos los idiomas
que soportemos,
siempre que el navegador
lo soporte,
que luego veremos
con esto
que no es perfecto,
¿vale?
pero para hacer
el relative time format
que es la API
que tiene el navegador
para hacer estos
tiempos relativos
tenemos que hacer
un,
guardar una constante
yo le llamo RTF
un new
intel
relative
no,
¿cómo era esto?
punto
relative time format
creo que era así,
a ver lo vamos
relative time format,
vale,
y aquí lo que le tenemos
que decir,
uno es el idioma,
aquí lo podemos utilizar,
por ejemplo,
podríamos llegar a utilizar
el lenguaje del navegador,
podríamos poner el language,
pero bueno,
nosotros ahora mismo
vamos a utilizar directamente
que es español,
¿vale?
y luego
lo que tenemos que decir
es si queremos
la forma corta,
la forma larga
o lo que sea,
entonces le decimos
que el style
sea el short,
luego veremos
si hay una,
cómo queda la larga,
la corta,
creo que hay tres,
hay una que es narrow,
que es parecida a short,
que me imagino
que es todavía más corta,
no lo sé,
entonces,
ahora que tenemos esto,
esta instancia
de relative time format,
lo que tenemos que hacer
es utilizarla,
con rtf punto
tenemos la posibilidad
de llamar a format
y esto recibe
dos parámetros,
por un lado
el valor
y por otro lado
la unidad,
el valor va a ser
uno,
dos,
tres,
cuatro,
por ejemplo,
el valor será seis
y la unidad será
pues la unidad de tiempo,
minutos,
días y tal,
por ejemplo,
pues aquí podríamos poner
dos y aquí
podríamos poner
day,
ten en cuenta
que ahí podrías utilizar
day en singular
o days en plural,
¿vale?
En el caso,
yo aquí lo he puesto
en singular,
pero podríamos poner days
y tal,
estas unidades
que son las que estamos
recuperando,
las que estamos creando
aquí para algo,
esto no lo estoy haciendo
por,
ah,
¿para qué quiere las unidades?
La utilidad que tiene
es justamente saber
a qué unidad de tiempo
me estoy refiriendo
una vez que hace
este loop,
así podré decir,
ah,
bueno,
pues lo que tienes
que formatear
son minutos,
¿vale?
Son dos días,
son dos minutos,
así que en este caso
lo que tenemos
que utilizar aquí
es el value
y el unit,
primero el value
y luego el unit,
creo que sí,
vale,
si no,
ahora nos daremos cuenta
seguro,
y con esto
ya lo tendríamos,
vamos a ver
si esto funciona,
si me he vuelto loco
o he hecho algo,
vale,
funcionar funciona,
ya puedes ver aquí
dentro de siete días,
dentro de siete días,
esto es lo que os comento,
es que lo que necesitamos
es que sean valores negativos,
aquí está dando valores positivos,
al final lo que podemos hacer
es justamente
como estaba esto,
que era el time time
menos el now
y claro,
más apps,
claro,
uno está tentado
a hacerlo al revés,
vale,
ahora sí que está bien,
uno está tentado
a hacerlo al revés
porque el now
siempre es mayor
que el time time,
el now es el momento de ahora
y por lo tanto seguro
que el número es mayor,
pero como lo que tenemos
que hacer es,
o sea,
es como hacia atrás,
es el hacia,
por eso está bien
que el tiempo este,
el elapse,
cuando lo utilizamos aquí,
nos dé negativo,
cuando utilizamos en el valor,
lo que necesitamos es,
claro,
la diferencia,
que es negativa,
es de menos siete días,
porque en positivo
es hacia el futuro,
vale,
o sea,
siete días,
si utilizamos,
cuando utilizamos aquí el format,
si le decimos siete días,
es dentro de siete días,
¿no?
Pero menos siete es hace siete días,
entonces por eso
nos puede venir bien aquí,
ahora,
que si ves más claro,
hacerlo al revés,
lo que podemos hacer
es el tema de cambiar,
hacer un por menos uno,
lo que quieras,
¿eh?
Podríamos hacer esto,
tal y como estaba,
y luego,
pues multiplicar por menos uno
para tener el signo
que necesitamos,
bueno,
en este caso,
como,
como prefiráis,
lo importante
es que ya tenemos esto aquí,
¿ves?
Aquí tienes el hacer siete días,
hace dieciocho minutos,
hace siete días,
así que podemos ver
que está funcionando,
dicho,
si creemos aquí,
vamos a probar
el relative time format
que hemos creado,
chúpate,
chúpate esa,
moment.js,
vale,
le vamos a dar de vitear,
y mira,
hace un segundo,
así que ahí lo tenemos,
si ahora refresco,
pues hará X segundos,
no sé cuántos segundos,
hace ocho segundos,
pues ya lo tenemos,
mira,
aquí sale 8s,
es súper raro esto,
si pongo el narrow,
vamos a probar esto
que os comentaba,
porque es un poco raro,
¿no?
El 8s,
a ver,
puede tener sentido
porque creo que Twitter
es incluso todavía más corto,
ni siquiera te pone el ace,
si ponemos narrow,
a ver si es más largo
o es más,
no,
es el mismo,
y supongo que esto
será el long,
que,
este sí que sale,
hace 34 segundos,
este sí que sale todo,
lo raro es eso,
¿no?
Que con los días
sí que te aparece
todo lo que,
o sea,
todo de días y tal,
bueno,
pues con esto tendríamos
un time ago
que hemos hecho
nosotros mismos
súper rápido,
con días,
horas,
minutos y segundos,
porque semanas,
no,
en Twitter a mí no me suena
que te diga
hace tres semanas,
sino que ya te pone
directamente la fecha,
por ahora lo vamos a dejar así,
porque ya tenemos
los días,
y vamos a arreglar
en un momentito
esto de cómo está ordenado,
porque es un poco raro,
¿no?
Ahora sí que me lo ha puesto bien,
pero cuando antes
lo hemos puesto
no estaba bien,
no sé si,
bueno,
a ver,
por ahora lo vamos a dejar,
pero luego,
luego,
luego vemos a ver esto,
voy a leeros en el chat,
a ver qué os ha parecido esto,
estaría bueno
que Firebase te pase
esa información
ya que tiene tantas cosas,
sí,
lo que pasa es que es verdad
que,
que claro,
con todos los idiomas,
todas las traducciones,
a ver,
la verdad es que sí,
que estaría genial,
¿no?
Decirle,
oye,
este campo,
dame el time ago
y tal,
sería un nice to have,
me gusta,
me gusta.
¿Qué más?
¿No sería mejor el math floor
porque si subiste un debit
hace un día y 15 horas
por decir algo,
te sale que lo subiste
hace dos días?
Sí,
claro,
es que por eso digo,
¿no?
Yo había puesto el math floor
al principio
porque me parecía
como mejor,
¿no?
Cuanto,
claro,
si es hace un minuto
y 40 segundos,
yo creo que tiene más sentido
que te diga
hace un minuto,
¿no?
Es un poco raro que te diga
no,
hace dos minutos
y está en el futuro.
Y en tu ejemplo
que dices,
efectivamente,
¿no?
Si es un día y medio,
te dice hace dos días,
como veáis,
esto lo redondeo,
el math round,
lo haría,
el redondeo,
pues el math floor
siempre iría hacia abajo,
creo que podría tener más sentido,
como lo veáis mejor.
Así que,
¿qué más?
David,
está así sorprendido,
Ernesto le ha estallado la cabeza,
multiplica por menos uno
el value.
Sí,
Julio,
esa es una de las soluciones
que he comentado,
que multiplies por menos uno
y ya está.
Como lo veáis,
a mí es que esto
de multiplicar por menos uno
como me parece un poco hack,
¿no?
Del palo A,
pues lo necesitas así
con menos uno,
punto.
Joaquín,
ahí está,
pam.
Yomar también,
qué crack.
¿Cómo lo harías
para que se actualice
cada unidad cantidad?
Vale,
Mario,
vamos a intentarlo,
vamos a intentarlo,
a ver qué sale,
a ver qué sale de esto.
A ver,
¿cómo lo haría?
Al final,
lo que tendríamos que tener
sería un useEffect,
eso seguro,
¿no?
Tenemos que tener un efecto,
que esto se ejecutaría,
que tuviéramos un timestamp,
y aquí lo que deberíamos tener
es un setTimeout.
Y en esta función
que deberíamos ejecutar cada,
yo que sé,
pongamos cada,
ahora voy a poner cada segundo,
¿no?
Para que se vaya cambiando.
Entonces,
esto además,
timeout,
clearTimeout,
timeout,
y esto vamos a limpiarlo
en el caso
de que cambie algo.
Vale,
una vez que tenemos esto,
yo lo que seguramente
haría con esto,
esto sí que lo crearíamos,
lo podríamos crear
directamente aquí,
no pasa nada.
Yo creo que podríamos crear esto
y lo que podríamos hacer,
claro,
es tener un estado,
eso seguro,
¿no?
Tendríamos que tener aquí,
el timeout,
setTimeout,
useState,
y entonces lo que podríamos hacer aquí,
tendríamos dos opciones.
Hombre,
yo creo que sería correcto
si el primer valor
lo calculásemos,
¿no?
O sea,
aquí poner una función
y directamente que esto se inicialice
utilizando esa función.
Esto lo estoy haciendo así a saco,
¿eh?
Así que ahora veremos un poco
todos los fallos que hay y eso.
Vale,
value is not defined.
Vale,
no te preocupes,
ahora te doy yo un value.
Entonces,
el timeout,
esto todavía no hemos hecho nada aquí.
De esto,
lo que vamos a hacer
es sacar el value y el unit,
esto lo vamos a sacar del time ago,
que en principio siempre debería estar,
¿no?
El time ago.
Ahora,
cada minuto,
o sea,
cada minuto,
perdón,
cada segundo,
lo que deberíamos hacer
es recuperar esto,
que sería
new time ago,
con el time stamp,
claro.
Y esto,
este gate date divs,
lo que va a hacer es el date now,
o sea,
que ya debería actualizar esto.
Y hacemos un new time ago
y aquí,
pues,
tendríamos el new time ago.
y esto a lo mejor debería funcionar,
no lo sé.
Hace 24 minutos,
hace 5 minutos,
claro,
pero es más que ahora
vamos a crear uno,
que creo que será más fácil
si creamos uno.
Probando que se actualice
el time ago,
vamos a debitear
y aquí tenemos dos segundos.
No,
ha hecho,
ay,
es que he hecho un time out,
he hecho un time out,
es un set interval,
perdón,
es un set interval.
Claro,
el time out lo va a hacer una vez.
Clear interval,
interval,
claro,
o sea,
cada X tiempo
deberíamos ver eso,
¿no?
Vale,
mira,
aquí lo puedes ver,
¿no?
Se está actualizando,
pam,
ahí lo tienes.
Pues ahora cada segundo
está actualizando el time.
A ver,
cada segundo igual es un poco exagerado,
¿vale?
Que igual no está mal,
podríamos detectar
que la diferencia sea segundos,
¿no?
Y entonces decir,
bueno,
pues como son segundos,
pues aquí tienes,
o sea,
cuando la diferencia son segundos
sí que lo hago como cada segundo,
pero si son minutos,
lo hago cada minuto.
Esto ya sí que podríamos entrar
un poco a,
claro,
pues no tiene sentido,
¿no?
Que sea a los minutos
el hacer esto cada segundo,
¿no?
Pero a lo mejor en los segundos
sí que tiene ese efecto guau.
A ver,
mira,
ahí está.
Ahora hace un minuto.
O sea,
que ya funciona.
Entonces,
pues no sé,
yo creo que,
vale,
quizás entiendo
el dislike
del creador
de Moment.js,
¿vale?
Lo entiendo,
lo entiendo,
lo puedo entender,
me he pasado
con el adiós Moment.js,
pero no me podéis negar
que en 40 líneas
de código,
40 líneas de código,
hemos hecho un time ago
que se actualiza
en tiempo real,
bueno,
no en tiempo real,
pero cada segundo,
y que además
está utilizando
las tecnologías nativas
de la plataforma
con cero dependencias,
¿eh?
Cero,
cero dependencias.
Esto,
a ver,
¿por qué creo que es interesante?
Vandelfobia.
No sé si conocen ustedes
la página esta
de Vandelfobia,
pero aquí pueden ver,
por ejemplo,
cuánto ocupa
una dependencia
cuando la añaden
a su bundle.
Y aquí pueden ver
un poco Moment.js,
¿no?
Moment.js es como
muy,
muy,
muy tocho.
Y cada versión
que aparece
es todavía más tocho.
De hecho,
la última son,
pues,
70k
de cipeado.
Esto es una burrada,
es una burrada.
No sé,
React,
React,
vamos a ver cuánto es,
pero diría que es menos.
O sea,
es la mitad.
Moment.js
ocupa el doble.
Que luego se pueden hacer cosas
para,
a ver,
esto no es cierto del todo,
¿vale?
Porque luego aquí tenemos
a lo mejor todos los idiomas
o parte de los idiomas.
Entonces,
se puede hacer cosas
para optimizar Moment.js
para que no ocupe tanto.
Se pueden utilizar plugins
de Webpack
para que lo que no se usa,
pues,
deje de utilizarlo.
Pero bueno,
creo que hay veces
que puede ser interesante,
¿no?
Pues,
utilizar cosas nativas
como esta,
porque además tienes ya
todos los idiomas.
En el caso,
esto tenemos aquí el castellano,
pero tendríamos en inglés.
Además,
al ser nativo,
no está opinionado,
¿no?
O sea,
no hay una opinión aquí
que diga,
ah,
pues,
¿cómo ponemos los minutos?
Bueno,
pues,
aquí el navegador
ya hay como un estándar
que dice que cuando te refieres
a minutos de forma corta,
pues,
pones min,
¿vale?
Pues,
seguramente los usuarios,
cuando esto lo vean
en un montón de páginas,
porque se utiliza cada vez más
el time ago este de la plataforma,
pues,
los usuarios
lo entiendan más fácilmente,
¿no?
Que esto es una de las cosas
que suele pasar
y que suele estar bien
el hecho de que el usuario
ya esté enseñado
por otra página web.
Y eso también es un,
es una cosa interesante.
Ezequiel
dice,
tema performance
del use effect
cada un segundo,
¿qué opinas?
A ver,
claro,
el use effect cada segundo
es muy tocho
y seguramente
cuantos más debits tengamos,
pues,
peor.
Y la idea sería,
a lo mejor,
lo que he dicho,
¿no?
Optimizarlo,
seguramente podríamos optimizar cosas,
intentar no crear funciones,
a ver,
estoy mirando.
Una cosa que hemos hecho bien
para que lo sepáis,
por ejemplo,
mira,
esto os lo voy a enseñar
porque me parece muy interesante
y hay muy poca gente
que habla de esto,
¿vale?
Entonces,
aquí,
en el useState este,
cuando hemos inicializado esto,
vamos a poner aquí
un console
y vamos a poner aquí
getDateDivs,
¿vale?
getDateDivs.
Entonces,
lo que mucha gente hace
cuando inicializa un estado
es utilizar
la ejecución directamente
del método,
lo cual no está mal.
El problema es que
cuando este hook
se vuelve a ejecutar,
este método
se vuelve a ejecutar.
O sea,
cada vez que se renderice
se va a volver a ejecutar
este método,
aunque no utilice el valor.
Entonces,
es un poco púa.
De hecho,
vamos a ver aquí
como...
Bueno,
es muy difícil de verlo,
¿vale?
pero podemos ver
los getDateDivs,
getDateDivs.
El problema es que
como lo tenemos
cada segundo,
pues lo veríamos doble.
Es una pena
que no los ha agrupado
porque podríamos ver
que crece de dos en dos,
pero el caso es que,
bueno,
están ahí,
¿vale?
Entonces,
lo que se hace
para evitar esto,
¿no?
Que cuando el hook
se vuelve a ejecutar,
lo que se hace
es que al inicializar el estado,
aquí añades un método.
Porque de esta forma
esa función
solo se ejecuta
la primera vez.
Y,
hombre,
está muy bien
porque así te evitas
que se renderice
tantas veces.
Así que,
bueno,
por si os sirve
o que lo sepáis.
Es mejor
pasarle una función
que no la ejecución
de la función,
¿vale?
Una función
para inicializar el estado
que no directamente
el valor
con el que quieres,
o sea,
la ejecución de la función
porque esa función
se va a ejecutar siempre.
Bueno,
no sé si
se ha quedado muy claro,
pero obviamente
yo evitaría
que fuese cada segundo.
Como lo que podemos hacer
es,
si son segundos
la diferencia,
pues cada cinco segundos.
Si son minutos,
cada minuto.
Si son horas,
yo creo que no vale la pena.
O sea,
yo lo haría solo
para segundos y minutos.
¿Vale?
Vale,
pues voy a leer
a ver qué me comentáis.
A ver.
Buenísimo dato,
Zaul,
me alegro que te haya gustado.
¿Qué tal Date FNS?
Pues está muy bien,
pero yo incluso
te recomiendo más
la otra alternativa
de Moment.js
que creo que
siempre me olvido del nombre.
No sé si es Luxon,
Luzon o lo que sea.
¿Vale?
A ver,
¿qué más?
Cuando quieras ver
cuántas veces se invoca
el GetDiff,
puedes usar el Console Count.
Efectivamente,
podríamos utilizar
el Console Count.
Lo que pasa es que
me gustaría que,
o sea,
lo que quería que me las agruparas
directamente,
quería que se viese
como crecida
de dos en dos,
de dos,
cuatro,
ocho,
pero no ha podido ser.
Si le podría agregar meses
también,
sería interesante,
claro,
podrías agregar meses,
solo tendríamos que calcular,
cuántos segundos hay
en una semana,
luego en un mes
y hacer exactamente lo mismo.
O sea,
esto podrías hacerlo
tan complicado
o tan extenso,
incluso con años,
como quisieses.
Pero creo que llega un momento
en Twitter
que ya te pone directamente
la fecha.
¿La función dentro
del SetInterval
se crea cada segundo
al ser una RoveFuncion
o no?
Sí,
Sergio,
esta función,
esta,
espera,
que te ponga,
esto aquí.
Vale,
esta función que comentas
sí se crea cada vez
que se ejecuta el efecto.
El tema
es que,
claro,
aquí en realidad
tendríamos que
esta función,
estoy pensando,
si la podríamos hacer,
sí,
claro,
podríamos sacarla
en un use callback
y hacer que no se vuelva
a crear.
No sería el mayor
de los problemas
de todo esto,
porque al final,
pero es verdad
que lo podríamos sacar
en un use callback
y que solo se cree.
Lo que pasa,
lo que estoy pensando
es si,
bueno,
el temago
no lo necesitamos,
sí,
o sea,
no habría ningún problema,
a no ser que cambie
el timestamp
que sería la dependencia
del use callback
y ya lo tendríamos
y solo lo creíamos
cuando lo necesitaríamos.
¿Qué más?
¿Cómo es que sabes
tanto de React?
Pues que hace,
yo que sé,
ocho años
o seis,
seis años,
seis años
que estoy trabajando
con React
y la verdad
es que muy contento.
Siempre,
Darkfurion,
siempre comparto
el código,
¿vale?
Tenemos el repositorio
de GitHub
donde puedes ver
todas las clases
y todo el código,
así que ya lo sabes.
¿Qué más que más?
¿Vale la pena usar Axios
en vez de Fetch?
Random pregunta
que no tiene que ver
con la clase,
pero yo te digo,
a veces sí
y a veces no,
así son las cosas.
A ver,
yo por ejemplo
utilizo mucho Fetch
porque es lo mismo,
dependencias cero,
es algo nativo,
cuando vas a hacer
una llamada
o una API
que te devuelve JSON,
normalmente con Fetch
tienes más que suficiente.
además te devuelve promesas
y tal.
Ahora,
si me dices,
no,
pero quiero interceptar
la request
o yo qué sé,
o tengo que hacer
cosas más complejas
y Axios me lo facilita,
los interceptores
y cosas así,
pues utiliza Axios.
Pero a priori,
pues yo te invitaría
a que veas
si realmente
necesitas Axios,
¿vale?
No utilices Axios
de partida.
Tengo una curiosidad
muy buena,
¿no?
De que alguien
me clonó
el otro día
mi readme,
el de GitHub
que tengo por ahí
y lo hago todo
con Fetch
y lo hago con Fetch
porque son,
bueno,
o sea,
son llamadas a APIs
que devuelven JSON
y tal
y entonces vi
que me lo forqueó,
lo cual está genial
y lo único que hizo
de cambios
es instalar Axios
y utilizar Axios
y nunca entendí
por qué.
Estuve a punto
de escribirle
y preguntarle
oye,
¿por qué has hecho esto?
Porque se me dice
no,
es que no sé utilizar Fetch
es muy raro,
¿vale?
O sea,
yo recomendaría
que Fetch
hay que saber utilizarlo
siempre,
pero puedes utilizar Axios
cuando lo necesites,
por supuesto,
o sea,
para eso están las dependencias
para cuando las necesitemos,
igual que Moment.js,
si esta solución
que hemos hecho
que yo creo
que es interesante
conocer lo que nos da
la plataforma,
¿no?
Y saber hacer esto
más allá de
voy a una dependencia
me la instalo ya,
pues si al final
necesitas Moment,
te instala Moment
y ya está,
pero que siempre
hagamos eso,
¿no?
Un poquito de la,
no sé,
un poquito de autocrítica,
realmente necesito
esta dependencia
y tal,
pues eso.
¿Qué te parece
actualizar los segundos
cada cinco?
Pues Emanuel,
cada cinco,
ahí lo he puesto,
mira,
ahí lo tienes,
cada cinco.
Sería una forma
de actualizarlo,
cuanto menos se ejecute,
pues menos dará,
¿vale?
Vale,
pues ya tenemos esto,
a ver por dónde me he quedado
de todo lo que os quería comentar,
vale.
Bueno,
ya que llevamos 49 minutos,
tengo que enseñar lo de la imagen,
que es súper,
súper,
súper interesante,
pero antes de seguir,
os quería explicar un par de cosas
sobre el Relative Time Format,
que no todo es color de rosa,
por desgracia,
¿vale?
El primero es la compatibilidad
que tiene con los navegadores
y es bastante buena,
el problema es Safari,
¿vale?
El problema es Safari,
Safari no tiene compatibilidad
con esto que estamos enseñando
ahora,
pero la próxima versión de Safari,
la que aparece
con el nuevo sistema operativo
y en iOS 14,
ya sí que va a tener,
de hecho,
veis que,
si podéis ver que está aquí,
está allá en verde.
Entonces,
es verdad que Safari
no tiene compatibilidad con esto,
lo cual es,
pues bueno,
una pena
y Internet Explorer 11,
por supuesto tampoco,
pero bueno,
Internet Explorer 11
cada vez ya está a punto
de matarlo Microsoft,
o sea que yo creo que
nos podemos ir olvidando,
pero es verdad que Safari
es un poco pain.
En el caso que necesitéis
que tenga soporte para Safari,
os recomiendo
que instaléis un polyfill,
¿por qué?
Porque el polyfill,
lo que podéis hacer,
bueno,
hay diferentes polyfills,
a ver si los dejo aquí,
hay diferentes polyfills
que te,
hay uno de 3K,
otro de 7,
otro de 358
y estos polyfills,
pues lo que hacen
es que ya te llegue a funcionar
como debería esto.
Es verdad que no tendrías
todas las traducciones,
¿no?
Signo que tienes que ir
consiguiéndolas,
pero al menos
en Safari te funcionaría.
Una cosa que puedes hacer
es que si en Safari
no te funciona,
pues le enseñas directamente,
podrías hacer un if,
¿no?
Oye,
si no funciona esto,
o un try catch,
si no funciona esto,
pues directamente le enseño
la fecha tal cual.
Esa podría ser otra,
que es lo que se llama
Progressive Enhancement,
¿no?
Que es una estrategia
en el caso de,
vale,
si un navegador soporta algo,
lo último,
pues voy a utilizar
esta funcionalidad.
Si no lo soporta,
pues voy a hacer
que no se le rompa,
pero bueno,
no va a ser
una experiencia
tan agradable,
¿no?
Y esto se hace mucho
con Internet Explorer
o con Safari,
con lo que sea.
Así que,
bueno,
ahí os dejo
esas dos estrategias.
Entonces,
ahora que ya tenemos
el time ago,
tengo esto
que me está
dando un poco
que no está bien
el orden.
Así que,
vamos a ver
si lo podemos
arreglar esto
un momentito
y así seguimos
ahora arreglando
un poquito
el layout
antes de pasar
al de la imagen.
El problema
básicamente está aquí,
que cuando recuperamos
la colección
de Firebase
no estamos haciendo
ningún tipo de orden,
no estamos diciendo
ordenámelo por esto.
Entonces,
la verdad es que es raro
que no lo ordene
por nada,
es muy raro,
no sé cómo recuperará,
yo pensaba que por defecto
a lo mejor lo ordenaba
por las ideas creadas,
pero ya veo que no,
lo hace al tuntún.
Entonces,
puedes hacer un order by
y aquí le tenemos
que decir primero
el campo,
que si no me equivoco
es created at,
¿no?
Sí,
created at
es el momento
en el que lo creamos
y aquí le tenemos
que decir
si es ascendente
o descendente.
Creo que por defecto
es ascendente,
así que vamos a poner
descendente,
¿no?
Vamos a ver
si esto tiene sentido.
Sí,
sí,
vale.
Pues ahora está
el que hace poco,
el de hace 13 minutos arriba,
19,
38,
bla,
bla,
bla,
¿vale?
Pues así lo tendríamos,
¿vale?
Gerardo,
vamos a ver,
vamos a ver,
vamos a ver.
Te veo
y siento que me falta mucho,
pero no me rendiré,
carita triste.
No te tienes que rendir nunca,
vamos a ver.
Gerardo,
amigo mío,
no te preocupes,
no te compares conmigo,
eso para empezar.
Yo tengo muchos años de experiencia,
ya no sé ni cuántos,
creo que tengo 15 años de experiencia
desde que estoy en el desarrollo web.
Entonces,
no te compares conmigo,
no te dirás,
ay,
cuánto me falta y tal.
No te preocupes,
o sea,
tú hazlo lo mejor que puedas
y poco a poco sigue aprendiendo
y sobre todo,
pues no te rindas,
tú,
ahí,
ta,
ta,
ta.
Y poco a poco irás viendo
que cada vez eres mejor.
Es verdad que al principio,
sobre todo nos pasa esto,
que nos comparamos con gente muy buena
o incluso nosotros nos vemos peores,
somos nuestros peores enemigos,
¿vale?
Mentalmente decimos,
ah,
sigo siendo muy malo y tal
y seguro que no,
es verdad.
Seguro que si miras tu código
de hace dos meses
o si miras que antes no sabías
ni lo que era una variable,
al final siempre evolucionamos,
a veces no a la velocidad
que nos gustaría,
¿vale?
Pero no hay que desfallecer,
al final la práctica
hace el maestro,
eso te lo puedo asegurar.
Al final todo lo que practicas
de alguna forma se nota,
así que te animo a que continúes,
¿vale?
Así que espero que no te rindas,
no te rindas nunca.
Vale,
pues eso,
que es que había visto así por reojo el chat
y quería decirte eso.
Vale,
pues tengo por aquí,
tengo por aquí,
a ver,
no quería aburriros con volver a crear
todos los iconos,
porque ya seguro,
si eres nuevo o nueva
y acabas de ver,
acabas de ver esto que voy a hacer
de los iconos,
igual dices,
ay,
este está pegando código.
no suelo pegar código,
¿vale?
No suelo.
Pero esta vez creo que ya hemos hecho
lo de los iconos unas cuantas veces.
Entonces,
en lugar de crear todos los iconos aquí,
te digo un poco los que,
dónde los he creado,
de dónde los he sacado,
¿vale?
Lo que he hecho y los pego,
porque son unos cuantos.
Entonces,
estoy sacando los iconos
de este proyecto
que se llama System UI Icons,
además de que me gustan mucho
y se parecen a lo que necesitamos.
Además,
no necesitas ponerle atribución,
que si quieres se la pone,
¿no?
Pero bueno,
a nosotros nos va bien,
porque así,
pues,
no lo ponemos ahí en mitad
de la página web.
Eso por un lado.
Y luego lo que hago,
yo lo que hago es copiar el SVG,
me voy aquí al Playground,
lo pego aquí,
y esto,
ay,
me ha engañado.
Ha pegado,
ahora,
copio aquí el SVG
y aquí,
pues,
me da el componente de React
y tal.
Creo que los iconos
puede estar muy bien
tenerlo como componentes de React
porque nos permite,
pues,
pasarle props muy fácilmente
y cambiarle los colores y tal.
Si utilizamos una imagen
para un SVG,
los iconos normalmente,
como imagen,
no suele ser buena idea.
Los logos sí,
pero los iconos,
no tanto.
Suele ser mejor tenerlo
como un componente de React.
¿Vale?
Pues eso es lo que he hecho
y tengo por aquí
unos cuantos iconos,
¿vale?
Tengo unos cuantos iconos
que ahora os explico un poco,
¿vale?
Ya los he pegado.
El arrow left,
tengo el arrow left,
el create,
el github,
un icono home,
no es exactamente un home,
un like,
uno que es el de retweet
y el de buscar.
Entonces,
lo he hecho fuera de cámara
porque si no,
íbamos a estar aquí
con los botones y tal.
Entonces,
puedes ver que aquí
no tenemos nada
en el navbar
y como hemos dicho
que antes,
que me faltaba una forma
de ir a lo de crear tweet
y es algo que vamos a necesitar,
pues he pensado
que ya estaría bien
de empezar a crear iconos
aquí como si no hubiera
un mañana
y poner ese,
esa posibilidad,
¿no?
De ir al crear el tweet.
Así que lo que vamos a hacer
es utilizar el link,
que esto viene de next,
¿vale?
que si recuerdas,
tiene su propio router,
el href,
creo que era.
Esto vamos a hacer
que vaya a
compose
barra tweet.
Aquí dentro ponemos
un anchor.
Esto,
acuérdate que lo vimos
en la primera clase
que es algo que necesitamos
y ahora vamos a utilizar
el icono de crear,
¿vale?
Create.
Ahora,
bueno,
podemos ponerlo
a ver cómo sale esto.
A ver si sale algo,
claro.
Vale,
puede ser que no tenga color.
Así que vamos a poner
aquí 09F.
Vale.
Bueno,
está aquí,
no sé si se ve,
sí,
se ve,
pero está ahí,
está fatal.
Veo que hay diferentes problemas,
un poco en el layout,
lo vamos a arreglar rápidamente.
Lo primero,
vamos a poner
que sea un poquito más grande
porque si no,
vale,
y ahora si le doy,
vale,
ya me lleva
donde me tiene que llevar.
Al menos tenemos ese botón.
Pero puedes ver
que esto está allá arriba,
no tiene mucho sentido,
¿no?
cómo está,
porque debería estar en,
o sea,
debería estar abajo del todo.
Esto es un problema
que tenemos
en nuestro layout.
A ver,
bueno,
problema,
es una feature,
no es un problema,
¿vale?
El problema como tal
es que,
a ver,
esto yo creo que debería
ser un display flex
para que empuje,
¿vale?
Ahora el flex direction
está mal,
o sea,
que tiene que ser column
para que sea de arriba abajo,
¿vale?
Pues veo que esto no me ha hecho
lo que me debería hacer.
¿Qué más?
¿Qué más?
Bueno,
claro,
puede ser que aparte
de esto
necesitemos
hacerle un flex 1
al contenido,
¿no?
O sea,
para que,
igual he sido muy valiente
al meterme con el tema
del layout aquí.
Vamos a hacer una cosa
rápidamente,
¿vale?
Vamos a quitar articles
de estos,
¿vale?
Para que quede exactamente
esto ahí encima
y vamos a ver cuál es el problema.
Porque el problema debe ser que,
o sea,
el section este,
yo creo que este section
a lo mejor tiene que ser
flex 1,
¿no?
Para que tome,
ahí está,
vale,
ya está.
Solo le tenemos que poner al section
en el flex 1
y ya lo tenemos arreglado,
¿vale?
Y ya tenemos en la bar bien.
Así que vamos a la home
que creo que es donde tenemos
el section,
¿vale?
Creo que tenemos aquí el section,
section,
aquí está el section,
le ponemos un flex 1,
claro,
y con eso,
con el main que hemos hecho
más esto,
vale,
ahora sí que lo tenemos bien.
Entonces,
ahora,
el navbar sí que está abajo del todo,
aunque no tenga suficiente contenido.
Esto es una de las cosas
que queríamos hacer,
así que,
perfecto.
Ahora,
vamos a hacerle unos pequeños estilos
rápidamente al tema este,
porque si no,
que se parezca,
se parezca un poquito a esto,
al de Twitter,
a ver,
vamos a ver el de Twitter
antes de continuar.
Si le ponemos así,
y esto lo hacemos más pequeño,
vale,
ok,
más o menos,
¿vale?
Vamos a intentar hacer algo así
rápidamente,
no vamos a ser
súper pulcros
y súper,
no vamos a hacer perfecto,
¿vale?
Vamos a poner esto,
así.
Esto sería
para
el enlace,
a ver,
el enlace,
y lo que queremos,
vamos a
content center,
vamos a ver,
tú,
tú,
tú,
vale.
Por ahora,
conforme vaya añadiendo botones,
vamos a hacer que se vayan
centrando ahí,
a saco,
y ya está,
¿vale?
O sea,
que ahora cuando añade a otro,
pues al menos,
hay estos con items,
items,
display flex,
esto puede ser porque la altura no,
ahora ya está,
vale,
pues ya tendríamos esto,
¿vale?
Ahora cuando añadamos otro,
pues se quedará al otro lado
y al menos así ya lo tendemos.
Lo que este justify content center,
bueno,
sí,
tiene sentido,
¿no?
Porque a lo mejor es el nap
donde tenemos que tener
el tema de,
bueno,
voy a hacer otra cosa,
¿vale?
Para ver cómo queda
y ahora sí,
ya lo tendríamos listo.
Voy a pegar aquí tres veces esto,
¿vale?
Porque entonces el nap,
esto también tendría que tener
un display flex,
ahora sí,
vale,
pues creo que ya queda bien.
Obviamente esto no va a ser así,
¿vale?
El primero de hecho creo que es el home,
¿no?
Vamos a tener el home,
podemos hacer que esto vaya a la home
ya directamente.
Uy,
se ha vuelto loco.
Es que he actualizado dos veces
y se ha vuelto muy loco,
¿eh?
Ay,
¿qué he hecho aquí?
¿Qué me sale ahí?
¿Qué ha pasado aquí?
¿Qué he hecho?
¡Ah!
Porque tengo un icono
que se llama home
y lo que ha hecho esto
es importarme la home directamente,
no el icono home.
Me ha importado la página home.
Hay que ver,
vale,
ya,
ya,
ya,
icons home.
Vale,
ya está,
ya está.
Y ya termino,
ya termino esto.
Vale,
ya está,
ahora está mejor.
Vale,
tenía la home,
en el centro vamos a poner el search,
que veremos si lo hacemos al final,
o no lo hacemos,
pero al menos para tenerlo ahí visualmente,
y a la derecha,
al top,
he puesto el de escribir,
¿vale?
Entonces,
bueno,
a ver,
está quedando bastante bonito,
no está mal.
He visto que hay aquí un efecto hover,
el efecto hover este va a ser un poco más divertido,
¿vale?
Del efecto hover,
lo que podemos hacer es utilizar,
bueno,
esto va a ser muy friki,
vamos a probar.
Hay un,
el radial gradient este,
eh,
podremos hacer,
no sé que esto llega al 15,
a ver,
aquí igual me estoy avalentonando mucho,
¿vale?
Pero esto más o menos debería quedar bien.
Si hacemos esto,
aquí le ponemos el background size,
que sea de 180,
tiene que ser como redondo,
porque si no la podemos liar,
y le ponemos que esté en la posición,
en el centro,
va a quedar justo detrás.
No sé si es exactamente lo mismo,
¿eh?
Que está haciendo,
vale,
pero ojo,
¿eh?
Bueno,
se nota,
se ve muy poco,
se ve muy poco,
pero bueno,
en Twitter tampoco se ve mucho,
¿no?
Bueno,
un poquito más,
se ve un poquito más.
Pero esto,
básicamente,
el radial gradient,
lo que haces es una,
haces un fondo,
utilizando un degradado radial,
que empieza desde el centro,
aquí lo que estamos diciendo,
es utilizando este color,
el 2,2 este es para la opacidad,
le dices el 15%
y a partir de ahí lo haces transparente.
Entonces,
nos hace la redonda.
A ver,
que aquí podríamos poner rojo
y verás claramente
cómo está haciendo esto,
¿eh?
Pero bueno,
esto ya funciona así.
Bueno,
está bien.
Y ya lo único que nos quedaría,
está el tema este
de hacer el hover,
utilizando lo de global,
el SVG,
que esto lo vimos en otra clase anterior,
que podemos decirle,
de forma global,
el selector del SVG,
o sea,
cualquier SVG que encuentres,
que se está haciendo hover
en un link
dentro del nap,
pues le cambias el stroke
y aquí podríamos utilizar
el colors primary.
Colors,
vamos a importarlo,
¿vale?
Punto primary.
¿Vale?
A ver,
no sé si,
bueno,
pues ya está,
ya se ve.
Bueno,
teníamos que hacer,
en algún momento teníamos que hacer
el tema este,
así que ya lo hemos dejado así.
Podríamos hacerlo mejor
utilizando los colores que tenemos,
pero tampoco os quiero aburrir con esto.
Solo quiero terminar
un detallito,
¿vale?
Que es el tema del title,
que también me está poniendo nervioso.
Pongo el title
y os prometo
que le damos caña
a lo de subir la imagen,
¿vale?
Llevamos una hora y cinco minutos,
yo creo que nos da tiempo
a las dos cosas.
No hay problema.
A ver,
esto es súper fácil.
Utilizamos el head,
que es de Next.js,
que nos va a permitir poner
cualquier tipo de meta tag
en el head,
en el elemento head
de nuestra página.
Esto,
como es la home,
pues esto sería
inicio barra depter,
por ejemplo,
y ahora aquí,
pues debería,
ay,
¿qué he hecho aquí?
Title head,
Next head,
a ver que la he liado,
la he liado,
la he liado.
en el home page,
¿no?
Pues esto lo he hecho aquí,
pues sí que,
head,
head,
¿no es head?
Ahora,
ahora sí que me he dejado,
me ha dejado loco esto.
A ver,
Next head,
sí,
no,
está claro que es este problema,
pero,
a ver,
a ver,
a ver,
vamos a buscar la documentación
en un momento.
A ver,
Next head,
import,
eso,
esto está bien,
y eso está bien,
bueno,
no sé,
o sea,
cuando importamos esto,
y esto es el home page,
y,
esto lo hacemos aquí,
head,
voy a dejar el head vacío,
wow,
pues no sé,
pues esto me está dejando muy loco,
voy a ver si me encontráis el problema
que estoy teniendo,
porque,
head of the page,
ta ta ta,
head,
pues esto está bien,
head,
y aquí solo teníamos que poner el title,
inicio,
barra,
depter,
y esto debería funcionar bien,
vale,
no tengo ni idea que ha pasado,
se le debe haber ido la cabeza,
pero,
ahora funciona,
o sea,
he refrescado,
no he hecho ningún cambio,
no sé,
debe ser algún error de Next.js o algo,
pero bueno,
que ya funciona,
pues esto mismo,
lo vamos a hacer en el compost,
de crear el tweet,
para que quede un poquito más bonito,
que es un poco feo,
como hasta ahora,
no entiendo muy bien,
qué es lo que ha pasado ahí,
head,
hace el auto import,
crear un,
debit,
vale,
vamos al debit,
vale,
ya lo tenemos,
pues,
os leo,
un momentito,
y,
y ahora empezamos ya con el tema este de,
de crear el,
el tweet,
vale,
a ver,
que os pueda por aquí,
muy bien,
qué más,
podrías agregarle el head al app layout,
y así cada nombre de página,
lo envías por props,
pues sí,
Sebastián,
de hecho,
lo,
lo,
lo,
lo pensé en su momento,
creo que lo comenté en la primera,
en la primera clase,
lo que pasa es que,
el app layout este,
lo vamos a sacar de aquí,
de hecho,
alguien,
con muy buen criterio,
porque,
bueno,
lo comenté en una de las clases,
que lo íbamos a sacar,
hizo un,
hizo un APR,
y,
a ver,
el tema es que,
claro,
mergear PRs no es tan sencillo,
porque está en una rama anterior,
y tal,
entonces me tendría que copiar,
pero,
este es,
Miguel Ángel Gavilán Merino,
que no sé si está en el chat,
pero,
ah sí,
mira,
está ahí,
pues muchas gracias Miguel Ángel,
por participar,
está perfecto,
el refactor del layout,
que es el que comenté,
esto es justamente lo que queríamos,
lo tendríamos que hacer,
justamente como está,
o sea,
es exactamente lo que queremos hacer,
y claro,
si hacemos esto que hizo,
ah,
no se estoy enseñando el código,
pero esta es la PR,
pero,
si hacemos esto que,
que,
que comenta,
¿quién lo comentaba?
Alguien estaba comentando esto del,
te, te, te,
ay,
lo perdí,
bueno,
quien me comentaba esto de,
de hacer lo del SEO,
que es buena idea,
claro,
si hacemos lo de Miguel Ángel,
que también es buena idea,
¿por qué?
Porque así no se desmonta el componente layout,
cuando se navega entre páginas,
que no tiene por qué notarse,
pero es innecesario,
que se desmonte el layout,
porque el layout lo vamos a querer en todas las páginas,
entonces cuando navegamos entre páginas,
no queremos desmontar y montar el layout,
no tiene sentido,
así que tiene más sentido dejarlo aquí,
a nivel de app,
para que sirva de shell,
si al final del live nos da tiempo,
vamos a adoptar estos cambios,
y entonces ya no podríamos hacer eso,
porque no podríamos pasar por props a la playout,
esto,
y luego hay otra PR que hizo,
que ya sabéis que me encanta que participéis,
y me deis ideas,
y que sobre todo,
pues hagáis trabajo para mejorarlo,
y Miguel Ángel hizo este loading con CSS,
que está muy bonito,
y también igual,
si luego nos da tiempo,
pues nos lo pegaremos,
aguardamos un cherry pick,
para utilizarlo en nuestro proyecto,
y si no,
pues el siguiente,
pero los dos están genial,
Miguel Ángel,
muchas gracias por participar,
que están genial,
vale,
a ver que ves,
ah mira,
está aquí,
sí,
hola,
está aquí,
Miguel,
muy bien,
genial,
muchas gracias,
Miguel Ángel,
¿qué control multiselect usas en React,
para no usar el básico de HTML?
Pues muchas veces utilizo el básico de HTML,
que ahora mismo no se me ocurre,
ninguno que utilice en concreto,
es que sobre todo en mi empresa,
ya tenemos un componente de UI,
que es un multiselect,
entonces,
Nilsson quiere que le salude,
está saludado Nilsson,
ahí lo tienes,
¿qué opinas de enviar las props de esta manera,
Diego?
Pues lo he comentado,
lo comenté en algún sitio,
el problema normalmente de ese tipo de,
a ver,
en ese en concreto,
con esta solución,
a lo mejor no pasa nada,
pero es un poco raro el tener que crear un objeto,
cada vez que haces un render,
porque estás creando un objeto al vuelo,
no sé,
no está mal,
está bien,
lo que pasa es que es eso,
el hecho de tener que crear un objeto al vuelo,
en cada render,
pues eso es un poco,
lo que sí que me gustaría,
es que hubiese en Babel una forma fácil,
de hacer esto,
sin el coste,
ni de repetir las props,
ni de crear el objeto,
eso estaría genial,
Diana,
¿qué fácil lo haces todo?
Hombre,
fácil,
fácil,
tampoco,
vale,
una amiga me decía que al render a veces se le va la olla,
el vídeo estrategia de rendering,
wow,
wow,
sí,
está muy bien,
os lo recomiendo un montón,
es temas de rendimiento,
pero bueno,
si os gusta,
es pecado que ahora que esté haciendo horas extra de trabajo con Angular,
viendo este vídeo de React a la vez,
no es pecado,
estás más que bienvenido,
está genial,
¿qué más?
Hasta donde recuerdo no hay lucha,
creo que están hablando de React Router y Rich Router,
¿qué te parece el router de Next?
¿Cómo va la lucha React Router versus Rich Router?
La lucha es eso,
al final se mezclan,
es lo que ha dicho Freddy Bustos,
al final pues se dan la mano,
porque van a trabajar juntos,
de hecho,
es raro,
porque se va a quedar React Router,
pero van a adoptar más el approach de Rich Router,
así que es un poco,
la web de los icons es systemuiicons.com,
¿vale?
¿Qué más?
Y si necesitas en iconos,
¿no es mejor una librería?
Me dice Freddy Bustos,
sí,
puede ser que una librería esté mejor,
pero es que me han gustado mucho estos iconos,
y es tan fácil convertirlos,
que es que tenía que utilizarlos,
pues eso,
pues vale,
pues vamos a darle a lo de subir la imagen,
antes Raph Nix me dice,
¿tienes pensado sacar más contenido sobre Svelte?
Sí,
tengo pensado sacar más contenido sobre Svelte,
lo que me falta es tiempo,
Raph Nix,
de verdad.
Alexander me pregunta,
¿de la forma que hicimos el tema Go,
de esta misma forma,
podríamos hacer la vigilancia de inactividad?
Pues a ver,
no sé qué te refieres exactamente,
con el tema de inactividad,
no sé si te refieres al hecho,
de que el usuario no haga nada,
pero sí,
podrías hacerlo,
o sea,
podrías tener ahí como un chivato,
que te diga cuándo fue la última acción que hizo el usuario
y entonces tú cambias el estado de eso
y después de un tiempo revisas a ver
cuándo fue la última vez,
cuánto tiempo ha pasado,
y tendrías el timestamp de la hora
con el de la última actividad,
lo guardas y entonces luego lo chequeas
y ahí lo tendrías,
o sea,
sí que podrías utilizar una estrategia similar.
Vamos a darle a la imagen.
Venga,
que es la 1 y 12,
no es la 1 y 12,
llevamos una hora y 12.
Vale.
Entonces,
para subir la imagen
vamos a utilizar Firebase Storage.
Así que lo primero,
por lo que vamos a empezar,
es creando el método,
voy a hacer esto más chiquitito,
voy a quitar aquí el Twitter.
Ah, no,
quería utilizar Twitter
para enseñaros,
bueno,
para ver cómo se hace esto visualmente.
Entonces,
lo primero que vamos a hacer
es crear un método
que se llama loadImage,
que a este método
lo que le va a llegar
es un archivo,
un file,
¿vale?
Y este file es un poco especial
porque es un objeto nativo del navegador
a la hora de tratar con ficheros.
El cómo vamos a hacer
el subir la imagen,
como quiero simplificarlo,
pero también quiero que haya
un efecto un poco guau,
voy a hacer un drag and drop.
Voy a hacer un drag and drop
también sin dependencias.
La gente me va a matar,
me van a decir,
pero ¿por qué no utilizas no sé qué?
Pero no sé,
hay veces que es tan fácil hacerlo así.
Entonces,
para utilizar el storage,
lo primero que tenemos que hacer
es recuperar una referencia
a ese storage que queremos guardar.
Así que hacemos un
Firebase.storage,
ejecutamos este método,
hacemos un punto,
ref,
y aquí le vamos a decir
la referencia
que queremos guardar
en este almacenamiento
de Firebase.
por ahora vamos a hacer
que la referencia,
que la referencia
tienes que pensar
que es como una llave,
podría decir
que es la estructura
de archivos,
pero luego exactamente,
a ver,
lo puedes pensar
como que es la estructura
de archivos,
pero luego el cómo funciona
internamente
no es exactamente así.
Pero piensa
como que es la estructura
de archivos,
que es que vamos a estar
en una carpeta de images
y ahí vamos a tener
el file
y dentro del file
vamos a tener
una propiedad
que se llama name.
Esto no me lo estoy inventando yo,
como te digo,
luego lo veremos,
pero esto es algo nativo
del navegador,
¿vale?
A la hora de tratar
con los files,
data transfers,
ah, no me acuerdo.
Bueno,
cuando tenemos
esta referencia
lo que vamos a hacer
es básicamente
decimos ref.put.
Put lo que va a decir
es, vale,
quiero que lo que te paso,
que es el file,
lo pongas
en esta referencia.
O sea,
este put
sería como upload.
Y entonces
lo que nos devuelve
esto
es un task,
que es como
la tarea
que está haciendo.
Este task
tiene millones
de cosas
con las que
puedes escuchar eventos,
por ejemplo,
puedes decir,
y lo vamos a hacer,
lo de escuchar el evento,
de en qué estado
se encuentra,
si está subiendo,
incluso puedes hacer
una barra de progreso,
no nos va a dar tiempo,
pero puedes hacerlo,
podrías hacer
una barra de progreso,
¿no?
De ver cómo
se está subiendo
el archivo,
puedes ver
si se ha completado,
que eso lo veremos,
si ha dado algún error.
O sea,
que tienes la tarea
que la puedes escuchar
para hacer cosas.
Entonces,
vamos a hacer
un return del task,
también podríamos hacer
un return de esto
directamente,
pero bueno,
quería que visualmente
vieses lo que devuelve
el refput,
que es un task,
¿vale?
Así que este sería
el método
con el que vamos
a tratar en Firebase.
Pero claro,
para tratar con esto
en Firebase,
pues tenemos que dar
Firebase,
porque tenemos que dar,
como que activar
el storage,
¿vale?
Vamos a ir a la consola
de Firebase,
y nuestro proyecto
es este de Defter,
y en este proyecto
de Defter,
aquí a la izquierda
tenemos autentificación,
Cloud Firestore,
RealTender,
este,
storage.
Le voy a dar un clic
y ya me dice aquí
que todavía no lo hemos
inicializado,
así que nos dice
empezar,
pues vamos a empezar,
empezamos.
Vamos a hacer
más adelante un vídeo,
a lo mejor no todo el vídeo,
pero donde trataremos
más en detalle
el tema de las reglas
de permisos,
¿vale?
De Firebase,
y por eso todo lo que son
permisos lo estoy dejando
fluir.
En este caso,
ya nos dice
que las reglas de seguridad
que va a utilizar
este storage
es que el usuario
tiene que estar autentificado.
Esto ya nos viene bien,
porque nuestra aplicación
se supone que no debe funcionar
si no estás autentificado,
pero puedes hacer
muchas cosas más,
o sea,
podríamos,
y lo veremos,
¿no?
Que puedes hacer
que dependiendo de,
por ejemplo,
yo he creado Image,
¿no?
Pero puedes tener
los de Image,
sí que solo para autentificados,
pero estos,
por ejemplo,
otra colección
que se pueda llamar
Avatars,
pues esto sí que lo puede
hacer cualquiera,
cosas así,
incluso lectura,
no solo escritura,
así que por ahora
nos vamos a quedar
con el que viene por defecto
que solo los que están
autentificados.
Esto no lo podemos cambiar,
esto se queda como está,
de como hicimos el Cloud
anteriormente en Firestore,
así que lo dejamos
en Europa,
y ahora pues estará creando
un poquito todos los servicios
para hacer el storage,
así que vamos
a esperar un poquito,
vale,
pues ya se ha inicializado,
aquí en Rules
podríamos cambiar
las reglas estas de seguridad
que hemos visto,
y pues aquí toquetearlo,
a lo mejor lo hacemos
más adelante,
también tenemos Usage
para ver cómo estamos
utilizando el almacenamiento,
y aquí veríamos los archivos,
que por ahora
pues no tenemos nada,
vamos a ver si somos capaces
de conseguir ver alguno,
¿vale?
Así que,
todo esto
lo tenemos que hacer
en el Compose,
en el Compose
es donde vamos
a hacer
el drag and drop
de la imagen,
para eso
me imagino
que vamos a tener
diferentes estados
del drag,
drag image states,
y el drag image states
tendríamos el error,
eso seguro,
tendríamos por ejemplo
none,
o sea,
cuando nada más entramos
no está pasando nada,
cuando se está haciendo
el drag over,
o sea,
cuando estamos encima,
el drag está justo encima,
cuando estamos arrastrando
estamos justamente encima,
cuando se está haciendo
uploading,
por si queremos
hacer lo del progreso,
que no creo que nos dé tiempo,
podemos tener el complete,
e incluso podríamos tener
uno para,
bueno,
ya tenemos el error,
porque por ejemplo
podría ser que no
soportemos
ciertos content types,
eso también lo podríamos mirar,
¿vale?
Esto por un lado.
Luego,
en tema de estados
vamos a necesitar
diferentes estados,
uno va a ser
el tema del drag,
¿no?
para saber
en qué estado
nos encontramos,
o en qué estado
se encuentra
el arrastrar el archivo.
Al inicializar,
pues vamos a poner
que estamos en el none.
Luego vamos a tener
otro estado
que va a ser
para el archivo,
el archivo
que vamos a arrastrar,
¿vale?
Y finalmente
vamos a tener
otro estado
que sería
para la imagen.
¿Por qué?
Porque
una cosa es el archivo
con el que haremos
el drag and drop,
¿no?
Y tendremos el archivo,
pero la imagen
será una vez
que se ha subido
y ya podamos hacer
la preview,
¿no?
Y tendremos la url.
Así que, bueno,
podemos llamarle
en lugar de image,
image url
para que se vea
más claramente.
Porque el file
tienes que pensar
que es un objeto complejo
que es,
bueno,
complejo,
quiero decir
que es un objeto
que es del navegador,
¿vale?
Que no es un objeto
que nosotros,
no es un string
que nosotros vamos a hacer
ni nada así.
Entonces,
esto sería,
ahora que lo pienso
en el file,
en lugar del file,
porque,
o sea,
no vamos a acertar
guardar el file,
porque se lo podemos
pasar directamente
al método que hemos hecho,
¿no?
Y esto ya nos devuelve
el task directamente.
Entonces,
el file se lo pasaremos
ya directamente
a este parámetro
y ya tenemos el task.
Entonces,
lo que guardaremos
mejor sea el task
y así podremos hacer
un efecto
que cuando cambie el task
creo que te dé más sentido,
porque si lo hacemos
con el file
nos puede complicar
un poco la cosa.
Entonces,
vamos a ver,
¿dónde hacemos esto?
Vamos a ver
cómo funciona un poco
en Twitter.
Cuando,
por ejemplo,
le damos aquí,
tengo aquí,
por aquí tengo una imagen,
esta,
¿vale?
Y puedes ver,
¿no?
Que cuando haces el drag,
pues el border cambia
y solo es el text area,
¿eh?
O sea,
si yo intento poner
en otro sitio esto,
no funciona.
O sea,
solo es en el text area.
Así que tenemos que hacer,
vamos a intentar emular eso
solo en el text area.
Aquí hay diferentes,
o sea,
tendríamos on,
hay un montón,
es que hay un montón.
On drag enter,
es uno.
On drag leave,
¿vale?
Porque así detectamos
cuando entramos
y cuando dejamos.
Y el on drop.
On drop es cuando estás
y estás encima
y sueltas,
cuando estás arrastrando
y sueltas.
Entonces,
de esto,
vamos a tener que crear
diferentes métodos
para escuchar estos eventos,
¿vale?
On drag enter,
pues handle drag enter.
Luego,
handle drag leave,
cuando estamos arrastrando
y salimos,
¿vale?
Y así podremos hacer
ese efecto
del borde de radios.
Y este es el handle drop,
¿vale?
Entonces,
vamos a hacer una cosa.
Cuando el handle drag enter,
aquí hacemos el,
vamos a cambiar el estado
del drag,
¿vale?
El drag,
drag,
sería drag,
drag,
parece que es con C,
drag.
Y entonces aquí hacemos
que el drag.imagineState
estaría,
a ver,
¿qué estado se ha puesto aquí?
Drag over.
Cuando entramos,
estaríamos en el drag over,
¿vale?
Ahora visualmente
lo vamos a ver en un momentito.
Cuando salimos,
pues esto sería el non.
Y cuando soltamos,
a ver,
aquí podríamos hacer muchas cosas,
por ahora vamos a dejar
que sea non,
¿vale?
Vamos a,
vale,
esto nos cambia el estado,
pero visualmente
lo vamos a ver todo igual.
Vamos a hacer una cosa.
Ah,
mira,
que no se me olvida aquí.
Drag enter,
el handle drag leave,
y el handle drop.
Perfecto.
Entonces,
en el textarea este
teníamos un border cero.
Lo que vamos a hacer aquí
es ver el estado
en el que estamos.
Por ejemplo,
si el drag es igual
a drag image states,
punto,
no sé por qué no me salen los,
es súper raro,
drag,
pensaba que me deberían salir
las propiedades,
me salen las últimas.
Bueno,
cuando el estado
sea que estamos por encima,
lo que vamos a hacer
es cambiar esto
y ponerle
tres pixels
dash
cero nueve f.
Y si no,
pues lo dejamos en cero
que es como estaba antes.
¿Vale?
Así,
al menos visualmente
deberíamos ver algo,
ver que está pasando algo.
¿Vale?
Entonces,
vamos a poner esto
y
vale.
Bueno,
ya puedes ver,
¿no?
Que aquí está pasando algo.
Está detectando correctamente
el drag.
Así que está haciendo eso
que cuando hacemos
el drag,
pues
ya ves que hace un salto,
no me gusta mucho el salto,
lo que podemos hacer
es que
el text pixels transparent
esto siempre esté
y así evitamos
el salto.
¿O deberíamos?
Ay.
A ver,
a ver.
Ah,
porque esto sería
solito,
dash,
da igual.
Vale,
porque así evitamos el salto
siempre están esos
tres píxeles.
Vale,
perfecto,
mejor,
mejor,
mejor.
Vale,
entonces,
otra cosa
es el border radius
que he visto que tiene
esto.
Vale,
esto pinta
un pelín mejor.
Vale.
y esto
margen
10 píxeles,
vamos a darle aquí
un poco de,
claro,
si haces margen,
tendría que ser
lo que le envuelve,
o sea,
tendría que ser
el formulario
que tuviese los 10 píxeles
y así este margin
se lo vamos a quitar,
¿vale?
Vale,
por ahora
esto más o menos funciona.
Entonces,
vamos a hacer una cosa,
vamos a ver el evento
que nos devuelve
cuando hacemos el drop,
aunque vamos a ver que
creo que hay una cosa
que no va a funcionar
correctamente.
Aquí en el handle drop
tenemos el e,
que es el evento,
este sería el event
que recibimos
cuando hacemos el drop.
Así que vamos a hacer
un console log
del event
a ver que nos devuelve.
Aquí hay una cosa
que creo que es un poco tricky
y es que
hay un error,
creo que hay un error
en la consola.
Vamos a verlo.
El caso,
vamos a hacer esto,
¿vale?
A ver qué pasa.
Vale,
esto es lo que me imaginaba.
No está funcionando bien,
¿vale?
No está funcionando bien
porque yo cuando hago
el drag and drop,
claro,
pues esto,
en lugar de
quedarse en la web
me está haciendo eso.
Eso es porque está funcionando
por defecto
el comportamiento del navegador.
Entonces,
vamos a hacer
que estos,
todos los eventos
sean prevent default
para evitar
el comportamiento
por defecto
que tendría
cuando hacemos eso,
¿vale?
Ahí,
aquí he puesto event.
Bueno,
voy a poner E,
pero ya sabéis
que es event,
¿vale?
Perfecto.
Y ahora sí
debería,
vale,
no ha pasado nada.
Bueno,
he hecho el drop,
parece que no ha pasado nada,
pero al menos
no ha desaparecido,
¿no?
Y aquí en la consola
sí que tenemos ya
estos dos console logs.
Uno,
el primero
es el del evento
y el segundo
es el del data transfer.
Entonces,
del data transfer
este que nos está llegando,
esto es una propiedad
que tiene el evento
y aquí deberíamos ser capaces
de ver todos los archivos
que han llegado
en el evento.
Pero si miramos el files,
podéis ver
que el length
es cero.
Entonces,
oh, oh,
no están llegando.
Esto es un poco raro
y es que cuando
hacemos el drag and drop,
claro,
la consola
en realidad
no puede tratar
con ciertos objetos
y hay veces
que te puede dar problemas
si tú haces
un console log
de un objeto
pensando que
es todo síncrono
y vas a tener ahí
el valor
y a veces
te llevas esta sorpresa.
Entonces,
lo que hay que hacer
para evitar esto
es acceder directamente
al archivo
que queremos
porque estar está ahí.
Lo que pasa
es que en la consola
no lo vemos.
Entonces,
si hacemos este
data transfer files
cero,
porque files
es un array
y vamos al elemento cero
y hacemos un console log,
vamos a ver
si vemos
este archivo,
toda la información
de este archivo.
Así que voy a hacerlo
otra vez
y ahí está,
¿vale?
Ahí tenemos nuestro file.
Tenemos file,
el name,
el name es un poco raro,
cuándo se modificó
por última vez,
el tamaño,
el content type,
esto es muy útil
porque podríamos evitar
que alguien intentase
subir algo
que no es
una imagen,
por ejemplo,
así que ya no funcionaría esto.
Voy a poner esto
por aquí.
Ahora que ya tenemos
nuestro file,
lo único que tenemos
que hacer
pues era esto,
¿no?
Lo de llamar
al upload image.
Esto no es magia,
¿eh?
Cuando veis que pongo
upload image
y dice,
¿esto cómo le ha importado?
¿Qué ha pasado?
Es porque cuando haces
el autocomplete
te pone el import encima,
o sea,
detecta automáticamente
que te refieres a eso
y Visual Studio Code
pues te lo arregla,
¿vale?
Entonces,
el upload image
hemos dicho
que hay que pasarle un file.
¿Qué file es?
Pues es justamente
el que estamos recuperando aquí
gracias al evento,
¿vale?
Estamos recuperando el cero
porque tú en realidad
puedes pasar más de una imagen,
o sea,
cuando haces un drag and drop
podríamos,
por ejemplo,
si hacemos esto,
estoy ahora seleccionando
dos archivos,
podría pasarlos aquí
y entonces tendría
dos archivos,
¿no?
Por ahora lo que vamos a hacer
es que aunque le pases
dos archivos
se queda con el primero
y así lo simplificamos un poco.
En Twitter
no sé cómo funciona exactamente
pero creo que sí
que soporta los dos ficheros
y los pone a la vez.
Sí,
efectivamente.
Pero bueno,
por ahora lo vamos a dejar así
un poco para simplificar
porque al final la idea
la idea es la misma
y podemos complicar esto
todo lo que queramos.
Una vez que ya tenemos la tarea,
¿vale?
La tarea es lo que hemos dicho
que nos devolvía esto
cuando ejecutamos
el upload image.
Una vez que tenemos la tarea
lo único que tenemos que hacer
es poner la tarea
en el estado.
Porque lo que vamos a hacer aquí
en el estado,
con este estado
es tener un useEffect
de forma que cuando cambie la tarea
vamos a ver
dónde ponemos el useEffect
aquí,
useEffect
aquí creamos una function
y la dependencia va a ser la tarea
de forma que cuando cambie la tarea
si tenemos tarea
porque puede ser que
la tarea pase a ser null
y si pasa a ser null
también podemos
puede ser que se ejecute el efecto
pero no queremos que
que entre lo de dentro
porque no tiene sentido.
Vale.
Si
si tenemos el efecto
vale
y cambia la tarea
la tarea
las tareas
en Firebase
esta tarea
en concreto
puedes escuchar
diferentes eventos
de hecho
bueno ya sabes
que pone ahí
event
string
claro el string
es un poco
así como
cualquier cosa
¿no?
pero sé
que
task
Firebase
storage
creo que es
state change
aquí está
creo que hay uno
que es
state change
ahí está
vale
con el state change
puedes recibir
tres parámetros
bueno
o sea
el state change
tendrías aquí
por un lado
vamos a ver
a ver
primero sería
on error
on progress
on complete
no sé si es
on error
no
el on error
sería el segundo
vamos a verlo
aquí
tenemos
total
on state change
este sería el primero
este sería
on progress
on error
on complete
vale
aquí tendríamos nuestros
tres métodos que queremos ejecutar
por ahora lo que voy a hacer
on progress
o sea
el on progress
por ahora
on progress
me da igual
vamos a poner que sea vacío
el on error
por ahora
también me da igual
y el interesante
sería
el on complete
que en este
sí
que necesitamos
hacer algo
¿no?
una vez que ha terminado
la tarea
esto lo voy a poner
un poquito así
vale
una vez que ha terminado
la tarea
¿por qué se pone así?
ah
porque dice que nunca
claro
está en rojo
porque dice
oye
nunca lo ha resignado
vale
no pasa nada
tenemos estos tres métodos
uno se ejecuta
cuando está en progreso
cuando ha dado un error
y cuando se completa
entonces lo que nos interesa
es cuando se completa
así que por ahora
voy a hacer aquí
un console log
on complete
para ver si esto funciona
y ya está
ahora si guardo
los cambios
me va a poner const
luego sería interesante
tener el led
porque queremos evitar
alguna cosa
vale
hasta aquí
lo tenemos
bien ¿no?
tenemos a un pre-order
y tal
creo que
no se me olvida nada
aquí ya tengo
el fetch
a ver
con esto
lo que deberíamos lograr
al menos
es subir
en Firebase
subir
el estático
que otra cosa
es que se ve aquí
que eso lo lograremos después
pero vamos a ver ¿vale?
vamos a intentar subir uno
le voy a dar aquí
le hago un drop
vale
aquí ha puesto un on complete
vamos a ver si ha hecho
un on complete
o que ha pasado aquí
¿vale?
vamos a ir a Firebase
bueno
pues ha hecho un on complete
pero aquí yo no veo nada
vamos a ver
si
ah sí
sí
he tenido que refrescar
pero aquí está
aquí tengo un images
y dentro de images
aquí tengo mi imagen
¿vale?
esta es justo la imagen
que he subido
mira
esta soy yo
este soy yo
con mi podcast
lo tienes en Spotify
por si te interesa
¿vale?
vale
con esto hemos subido
el archivo
el problema
es que ahora
tendríamos que
recuperar
esa URL
aquí tenemos dos opciones
¿vale?
hay como dos opciones
para recuperar la URL
una podría ser
no recuperar la URL
y utilizar un file reader
para leer
el archivo
es un poco
no es complejo
pero es un poco raro
lo bueno es que
podríamos enseñar
la imagen
incluso antes de subirla
¿no?
porque podríamos hacer
un file reader
y enseñar la imagen
mientras está subiendo
y enseñar el loading
mientras vemos la imagen
y es bastante guay
pero
vamos
por simplificar
lo que vamos a hacer
es utilizar
la URL de Firebase
para recuperar
la URL de Firebase
si
esto
esto es bastante difícil
sabérselo de memoria
tenemos esta
esta forma
de hacerlo
¿vale?
que es básicamente
desde la tarea
tenemos el task
recuperamos el snapshot
el snapshot
de esa referencia
get download URL
que es este
este método
que vemos aquí
¿vale?
get download URL
¿vale?
y esto nos devuelve
si lo he puesto bien
get download URL
nos devuelve
una promesa
con
la
URL
de la imagen
y esta URL
de la imagen
es justamente
la que podemos guardar
aquí
en el estado
de esta forma
vamos a hacer esto aquí
ponemos el estado
se actualiza el estado
automáticamente
y lo que podemos hacer
quizás
¿dónde podemos hacer esto?
aquí
es que si tenemos
una imagen URL
pues la mostramos
y así
el usuario ve
que su imagen
pues se ha subido
correctamente
lo ponemos así
a ver, a ver
lo tenemos así
esto le va a indicar
que se ha subido
al servidor
que todavía
en su
debit
lo vaya a tener
vale
pues mira
de hecho ya lo tenemos aquí
ya
claro
como ha hecho
esto ha hecho un fast refresh
pues directamente
ha recuperado el estado
y lo ha cambiado
y tal
pero para que lo veamos
desde cero
voy a actualizar
voy a hacer otra vez
el drop
¿vale?
tururu
pam
y esto
lo que hace
es que tenemos ahí la imagen
me comenta Alejandro
pero la imagen
se sube antes de hacer el tweet
¿no?
generaría mucha basura
sí, es verdad
que podría generar mucha basura
podríamos hacer que
justo cuando hacemos el tweet
lo subamos
a ver
en este caso
lo que podemos hacer también
es que si por lo que sea
podemos hacer
una limpieza
de las imágenes
no sea ningún problema
el hecho de
subir la imagen
tener una cloud function
y decir
a ver qué imágenes
no se están utilizando
en ningún tweet
y eso nos podría servir también
en el caso de que
pues por lo que sea
se borren tweets
o lo que sea
y hagamos una limpieza también
de todos los recursos
de esos tweets
a ver
sí que no es ideal
pero bueno
también
Twitter es una empresa
enorme
que si intentásemos hacer
exactamente
todo lo que hace
que yo tengo dudas
yo creo
estoy bastante seguro
que ellos también la suben
¿eh?
no sé exactamente por qué
supongo que también
y esto lo podríamos hacer
es hashear
¿no?
según el contenido
para evitar
que se suban
la misma imagen dos veces
porque ahora mismo
lo que hemos hecho
es depender
del nombre
el nombre
obviamente
no es una buena forma
de depender de esto
lo que tendríamos que hacer
a lo mejor
es utilizar el user ID
y además hashear el contenido
o a lo mejor
hasheando el contenido
ya sería suficiente
para reutilizar
a lo mejor
alguien utiliza
la misma imagen
que otra persona
ha subido
pero es que están subiendo
la misma imagen
entonces hasheando el contenido
pues eso lo
haremos esa mejora
hashearemos el contenido
miraremos
cómo lo podemos hashear
seguramente
habría que leer
con el file
podríamos mirar
el contenido
y hacer un hash
que sea único
dependiendo de ese contenido
lo pongo en el to do
que no se me olvide
por ahora lo vamos a dejar así
más que nada
por avanzar
porque tenemos
una hora 35
y nos queda poco
vamos a ver
tenemos el ancho
el alto
lo vamos a poner así
vamos a poner
el bar de radius
que sea de 10 píxels
para que esto
vale
se adapte un poco
vale
y esto ya queda
bastante bien
nos faltaría por ejemplo
la x
que eso podría ser un momento
o sea
el hecho de tener
eh eh eh
dónde está la imagen
podríamos poner aquí
esto así
esto sería un dip
el problema de esto
esto a lo mejor
lo deberíamos extraer ya
porque empieza a ser
este formulario
es bastante complejo
o sea
es bastante grande
entonces
a ver
por ahora
lo voy a hacer
muy a saco
vamos a hacer
que esto esté dentro
del header
porque un section
vale
pues vamos a hacerlo
con un section
y el section
que tenga un position relative
porque he visto también
¿no?
que
eh
twitter
tiene una forma
de
de quitar la imagen
y hombre
sería interesante
¿no?
el tener ahí
el botón
con la x esta
y que al hacer
el click
pues sea un
set image
url
sería null
¿vale?
cuando hagamos esto
tendríamos el botón
ahí horrible
pero ya lo podríamos
estilar
que el position
absolute
que esto esté
a la derecha
a la derecha
un background
pa pa pa
0 0 0 3
vale
borde 0
esto igual
incluso
debería ser blanco
creo que blanco
quedará mejor
y el borde radius
creo que podemos hacer
que sea así
como muy bestia
para que
esto
width
50
a ver como queda esto
bueno
me he pasado
me he pasado
color
es que no sé
cómo es el de
el de twitter
por más o menos
ahí
a ver
ah es
es negro
es negro
y el color de dentro
es blanco
vale vale
pues nada
lo hacemos así
es un momentito
el color de dentro
es blanco
eso
parece bastante grande
pues esto
no es perfecto
vale
sabemos que no es perfecto
y esto 36
un poquito menos bestia
menos
menos todavía
32
bueno
más o menos
y ahora al darle aquí
pues desaparece
vale
o sea que al menos
ya tenemos
la forma esta
es verdad que
se queda subido
bueno
podríamos
bueno en este caso
aquí vemos que se sube
y se está subiendo el mismo
vale
mira Mario me preguntaba
que haría para evitar
la colisión de nombres
seguramente
tendríamos dos opciones
una
generar
un identificador único
a saco
independientemente
del contenido de la imagen
otra
que podría ser más interesante
para evitar
que suban la misma imagen
15 veces
el mismo usuario
yo por ejemplo
en twitter
ya he subido estas imágenes
unas cuantas veces
pues claro
igual dicen
oye que pasa
está subiendo este hombre
siempre la misma imagen
pues en lugar de hacer esto
podríamos mirar el contenido
y hashearlo
o sea decir
por este contenido
tiene este hash
porque es bastante complejo
que una vez que tengas un hash
si es lo suficientemente largo
pueda colisionar
ese hash
pero bueno
esas eran las
las dos opciones
que yo intentaría
vale
ya tenemos esto
no es perfecto
ya hemos visto las dos taras
que además
en los que habéis comentado
por ejemplo
lo de subir la imagen
antes de publicar
eso sería una
y la otra
la de
el de evitar
la colisión de nombres
lo podemos hacer
en una siguiente iteración
me parece interesante
igual
no sé
que estoy pensando
por ejemplo
si
utilizan el blob
pues lo haremos así también
lo haremos con el blob
con el file reader
pero al menos ya la tendremos subida
y al menos ya veremos que funciona
al menos la habremos dejado
a mitad de camino
esto está bien
así vamos iterando
somos agiles
ya tenemos esto
pero ahora lo que nos faltaría
es cuando creamos
el tweet
que tengamos esta url
lo que podemos hacer aquí
es tener un campo
que sea image
aquí ponemos el image url
y nos tenemos que asegurar
que este image url
también cuando hacemos
el add debit
debit
se lo enviamos
así que vamos a añadir
aquí el image
bueno esto es directamente
image
vamos a poner image
image
image
vale
tenemos aquí el image
esto se lo enviamos
add debit
add debit viene por aquí
recibe el image
y el image ya lo guarda
en la colección
vale
esto lo tendríamos ya hasta aquí
y ahora sí guardaríamos
en la colección
esta información
esto lo tendríamos
así que
dice
hola no conocía
la librería time ago
la librería
que librería
si la hemos hecho nosotros
has utilizado djs
si la he utilizado
y la
la recomendaría
entre esas dos
bueno a ver
la de time ago
la hemos hecho nosotros
desde cero
en el principio del vídeo
o sea que no
no es una librería
podrías traerse
una librería seguro
pero bueno
creo que djs
es muy interesante
también
también la conozco
pero
igual que moment 10
hay veces que no es necesario
hay muchas
hay veces que sí
y puede estar muy bien
la recomendaría
cuando tengas que hacer
muchas operaciones
con las fechas
muchas
muchas
el fácilmente sacar
que semana es
fácilmente sacar
lo que sea
cuando tienes que operar
mucho con fechas
pues obviamente
djs
moment 10
luxon
y cosas así
te facilitan mucho la vida
pero cuando son cosas
en concreto
igual te puedes evitar
el hecho de tener
la librería
vale
¿qué está pasando?
estamos probando
de subir
una imagen
en firebase storage
vale
vamos a poner esto
le voy a dar a
debitear
a ver qué tal
vale
entonces ya podemos ver aquí
que tengo
el tweet
bueno el debit
de estamos probando
de subir una imagen
en firebase storage
pero no sale
la imagen
no sale la imagen
porque claro
no la estamos leyendo
de ningún sitio
o sea
vamos a ver si la tenemos
por lo menos
en la base de datos
y si está en la base de datos
al menos ya sabemos
que somos capaces
de mostrarlo
a ver a ver
si
este es el avatar
vamos a probar
tenía razón
estamos probando
de subir
mira aquí tenemos la imagen
y ya tenemos toda la url
con el token y todo
con el token y todo
esto sí que es sorprendente
yo no sé si ese token
no debería estar ahí
podríamos mirar
vale
por ahora lo vamos a dejar así
porque tengo dudas
si realmente ese token
tiene algo que ver
o lo que sea
me informaré
antes de ponernos
a borrar cosas
lo importante
es que tenemos
esa información
así que lo único
que necesitamos
es recuperarla
y mostrarla
ya vamos a ir
a la home
y en la home
teníamos esto del debit
con el avatar
esto es lo que comentaba
antes un compañero
que decía
oye pero si esto
esto podríamos crear aquí
un objeto directamente
uy
y hacer el avatar
el critetat y tal
lo podríamos hacer
por ahora
lo vamos a dejar así
ya veremos
aquí ahora
se supone que en el timeline
que estamos recuperando
de nuestra base de datos
tenemos la imagen
así que lo único
que tenemos que hacer
es pasar hacia abajo
esta imagen
vale
este timeline
que ves aquí
este timeline
lo estamos haciendo
del fetch
latest debits
que este fetch
latest debits
es este método
de aquí
que está mirando
la colección
haciendo el order by
para que se ordene
por la fecha
y entonces nos devuelve
toda la información
que tenemos
lo único que hacemos
es cambiar el created ad
para tener el timestamp
que es lo que hemos visto
al principio
vale
entonces tenemos
el fetch latest debits
y aquí tenemos
toda la información
del documento
entre ellos
la imagen
y esta imagen
que tenemos aquí
ahora se la vamos
a pasar al debit
obviamente en el debit
hay que hacer algo
o sea
esto no gratis
vamos a ver
ahora que tenemos
la imagen
vamos a mostrarla
solo la vamos a mostrar
si la tenemos presente
así que hacemos
esto
y guardamos los cambios
pum
ha reventado
el layout
vale
ahora tenemos que
confiarnos un poquito
el layout
que hemos hecho antes
que esto sea el 100%
que tengamos el
height
a auto
y el border radius
que sea
de 10 píxeles
pum
más o menos
ponemos un margen
y ya está
esto sería por un lado
vamos a darle aquí
para crear uno nuevo
vamos a poner este
live stream
papapam
ay
no le ha gustado este
ah sí
ah pues mira
pues sí que sería interesante
hacer el progres
porque
ahí podemos ver
que ha tardado un poquito
y
me he quedado como
pero esto está funcionando
no está funcionando
así que sería interesante
vale
pues
no te pierdas
el live
de cloud storage
y
time ago
nativo
vale
hacemos esto
debiteamos
y ya tenemos ahí
nuestro
tweet
y bueno
nuestro debits
tenemos nuestros dos debits
está quedando bastante bonita
ya
no está
no está
no está nada mal
está
le estamos dando un poquito de
de cariñito
a ver
esto
tiene sentido
estoy mirando a ver si nos falta alguna cosa
de
de
así
bueno a ver
ya que estamos
rápidamente
aquí
se muestra el
el avatar
y entonces
a ver
podríamos hacerlo en un momento
vale
porque es que si no
luego
en algún momento hay que hacerlo
y
y cuanto antes lo hagamos
antes no lo quitamos
bueno antes de terminar con eso
vamos a
a ver que me comentáis
en el chat
a ver que me
que me decís
que me decís
a ver que me decís
anda
madre mía
así que hace tiempo que no
super chat
de sergio
te plantearías dedicarte a los directos
si te diera para vivir
buah
sí
sí claro
me plantearía
me gustaría
o sea es una cosa que me gusta
me gustaría
vivir de
generar contenido
pero sé que es muy difícil
complicado
pero
pero bueno
aún así creo
y considero
sergio
que
me gustaría
seguir trabajando
no sé cómo
o por ejemplo
en la empresa que estoy
me gustaría estar
todavía de alguna forma
relacionado
seguir trabajando con ellos
porque aprendo mucho
y
y muchas veces me encuentro que
veo muchos vídeos
de mucho contenido
de gente que crea contenido
gente que
que obviamente
pues
hay gente que son referentes
pero
que
de alguna forma a veces se nota
que no trabajan un producto
porque
no
crean
productos
y
y está este
no sé
tutorial driving development
¿no?
un poquito
entonces
el
el no trabajar en un producto
creo que
me
me lo podría permitir
un tiempo
pero
creo que al final
te desconectas
creo que te desconectas
no sé
o sea que
no sé si por placer
un poco para seguir
un poco
estando conectado
y saber
lo que
lo que se está cociendo
me gustaría
me gustaría seguir trabajando
a lo mejor no a las 8 horas
pero un poquito
¿vale?
¿harás en algún momento
algo de GraphQL?
pues Benjamín
hay un montón de vídeos
de GraphQL
en mi canal
que hice con
un compañero
no me ha salido
el nombre
pero que me perdonen
ah Horacio
Horacio
con Horacio
tengo un montón
de vídeos
tengo 3 o 4
así que
creo que
te los pueden mirar
mientras no hago nada
pero sí que me gustaría
me gustaría
hacer cosas
de GraphQL
a ver qué más
me comentáis
para ti
no es difícil
dice Martín
lo haces de forma natural
y te salude
te sale todo
te queremos siendo profe aquí
bueno
ojalá
ojalá
pero bueno
sé que es difícil
sé que es difícil
está quedando muy chula
dice Diana
Michael
dice
llego un poco tarde
no pasa nada
pero lo importante
es que ha llegado
vale
hay que encontrarse
con problemas reales
sí
eso es una cosa
que veo
que a veces
falta
vale
pues vamos a ver
vamos a ver
qué me quedaba
el tema del avatar
vale
pues el tema del avatar
no debe ser muy difícil
tenemos que añadir aquí
un avatar
aquí
vamos a pasar aquí
un momento
al código
ahí
vale
lo que queremos aquí
es que aparezca el avatar
como aparece aquí
y ya está
o sea
no debería ser muy difícil
así que vamos a generar
vamos a crear un section
lo que pasa es que este section
ya se nos están
acabando un poco
los
los elementos
ese es el problema
¿no?
que cuando
solo quieres estilar
con elementos
por el style jsx
pues al final
se te acaban
así que
me estoy pensando
cómo lo podemos hacer
para no tener
que
crear uno nuevo
pa pa pa
a ver
por ahora vamos a poner
el avatar
y ya
el source
¿esto era source?
source
use.avatar
vamos a ver
cómo queda esto
primero
vale
queda mal
entonces
aquí deberíamos tener
un section
lo que pasa es que
este section
ya estamos utilizando
un section abajo
y no le va a gustar
vale
pero bueno
vamos a ver
qué podemos hacer al respecto
lo que podríamos hacer
con el otro section este
podríamos utilizar clases
que no pasa nada
se puede utilizar clases
en style jsx
sin ningún problema
soy yo
que me gusta
tener elementos
deberíamos empezar
a sacar cosas
de aquí
pero bueno
no pasa nada
entonces
remove image
y aquí le vamos a llamar
form container
entonces
este section
es el de
remove image
puesto image así
y el otro
que sea de
form container
esto tiene que ser
un flex
el flex
ah bueno
pues ya está
¿no?
ahora
justify content
flex start
para que quede arriba
pues no
será el items
ahora sí
vale
eso
claro
es que
porque
ahora no estamos
con el columns
estamos con el row
vale
esto sería así
y lo único
que nos falta
es que
el avatar este
claro
el avatar este
es que también
deberíamos
vamos a poner
otro section
porque lo queremos
empujar un poquito
para abajo
¿vale?
y ya
con esto
lo tendríamos
avatar container
creo que alguien
me ha preguntado
antes
si se podría hacer
con CSS modules
todo esto
tenemos algunos
componentes
que están hechos
con CSS modules
porque se pueden
utilizar los dos
de hecho
Next.js
ahora
nada más crear
el proyecto
te crea
con CSS modules
pero
si preferís
CSS modules
o preferís
style JSX
lo podéis hacer
con cualquiera
de los dos
y en este caso
nos está quedando
muy grande
y este componente
se está viendo
muy feo ya
pero es porque
no estoy sacando
las cosas
que debería
así que
bueno
no
no hagáis como yo
y sacarlo
en componentes
seguramente
en el siguiente
a lo mejor
lo hacemos
lo empezamos a sacar
en componentes
esto que queda
un poquito
por aquí
si hacemos
mejor padding
y esto
hombre
ha quedado ya
un poquito
así
¿no?
ya nos faltaría
solo sacar
el header
para poder
reutilizarlo aquí
porque ahora el header
lo tenemos solo
en la home
y lo que nos gustaría
es tenerlo
poderlo reutilizarlo
en todos los sitios
entonces
ya podemos
ir hacia el commit
o sea
a crear
uy
ay ay ay
ah
importante esto
claro
como estamos recuperando
el avatar
el usuario
más tarde
esto es otra cosa
que tenemos que arreglar
más adelante
solo tenemos que hacerlo
cuando tengamos el usuario
porque puede ser
que tarde un poco
¿vale?
entonces
solo cuando tengamos
el usuario
vamos a utilizar el avatar
vale
pues ahí lo tenemos
esto lo quiero mejorar
y lo que quiero
es que se vea
aquí un placeholder
el cómo se carga
como os enseñé
en Vercell
en el dashboard
es un poco
lo que queremos hacer
creo que haremos
estoy intentando
hacerlo
todo junto
o sea
lo que haré
es que
esta especie
de playground
bueno
de placeholders
que veis aquí
que hace
este efecto
que hace Vercell
lo vamos a hacer
todo en una misma clase
porque si no
pues
el ir haciendo
el playholder
de cada uno
a lo mejor
es un poquito
coñazo
entonces lo vamos a hacer
todo de golpe
¿vale?
pero bueno
yo creo que esto
ya empieza a quedar
bastante
bastante bonito
bastante Twitter
además ahí con las imágenes
así que
poco a poco
se va acercando
a ver
que me comentáis
antes de irnos
a ver
¿qué diferencia
entre usar el section
y un div?
a ver
el div es como
para todo
¿sabes?
es como para todo
div es como
de división
section
se supone
que es un poco
más semántico
se supone
que es como para
en este caso
por ejemplo
podría
podría haber
utilizado
un div
un section
es lo mismo
pero debería ser
el section
más semántico
como decir
esto es una sección
de algo
que contiene
información
de algo
el div
son
divisiones
y en este caso
seguramente
para el container
por ejemplo
a lo mejor
podría haber utilizado
mejor un figure
en lugar de un section
más semántico
que es una figura
lo que hay ahí
cosas así
creo que
hubiera tenido
más sentido
también
podría haber
utilizado
un figure
en el remove
image
en lugar de utilizar
otro section
lo puedo revisar
para que sea
un poquito
más semántico
vale
por conveniencia
prefiero usar
librerías
componentes existentes
y suelo agregarles
styles
para aprovechar
el tiempo
en la lógica
de negocio
jose maría
personalmente
me agrada
hacer los componentes
pero mi cuenta
pero perdemos
agilidad
bueno a ver
ves esto es una cosa
que
vamos a ver
si
si estás haciendo
algo rápido
pues seguramente
pues puedes hacerlo
con una librería
de componentes
pero
ahí
si estamos creando
por ejemplo
si estamos
a lo mejor
ahora
esto lo quería hacer
desde cero
por
bueno
por la gracia
y tal
pero si tuviésemos
un producto
por ejemplo
twitter
ya te digo
que no van a utilizar
material UI
porque
este tipo de librerías
por mucho que dices
de cambiar los estilos
y tal
está la marca
también ahí
es parte de la esencia
de
no es la lógica
de negocio
pero es parte del negocio
el cómo se ve
entonces cuando
veo muchos proyectos
que utilizan
Tailwind
que está muy bien
para empezar rápido
pero veo muchos proyectos
con material
con bootstrap
y al final
muchos de esos proyectos
parecen clones
es verdad que
a base de cambiarle
muchos de los estilos
lo puedes hacer
pero el hecho
de también trabajar
y crear componentes
desde cero
no solo para
diseñarlos tú
y tal
sino para entender
cómo funcionan
por debajo
yo creo que puede estar bien
pero bueno
obviamente
está bien
o sea
si necesitas
hacer algo rápido
está bien
que utilices componentes
está guay
gracias por la aclaración
Sergio
no me leas
le contestaba al amigo
que preguntó algo
qué vergüenza
José María
no hombre
si está bien
está muy bien
Jesús Sánchez
decía eso
tienes que usar el arroba
no pasa nada
a ver
que dice Jesús Sánchez
dice
sois más de usar librerías
de componentes
o creadlo vosotros
estoy pensando por ejemplo
una tabla de compaginaciones
scroll infinito filtros
vale
ahora entiendo más el contexto
a ver Jesús
en ese caso
es seguro
que la tabla
que habrá por ahí
open source
con todas las funcionalidades
va a ser mucho mejor
que la que tú hagas
obviamente
y ahí estoy totalmente de acuerdo
con José María
es mucho mejor
estas cosas en concreto
que las recuperes
de un código abierto
¿por qué?
porque tiene una comunidad detrás
porque todos los bugs
te los van a solucionar
porque esas funcionalidades
seguro
seguro
que las van a hacer mejor que tú
porque tiene un equipo detrás
y tal
entonces
esto para algún cierto tipo
de componente
ahora
si me dices
necesito una tabla
pues ahí te diría
pues hazla tú
bueno
pero es que necesita
paginación
vale
puedes mirar el coste
que tiene
el crear una tabla
de compaginación
si es muy grande
puedes valorar
qué soluciones hay
hay que tener en cuenta
también
que cuando
utilizas un componente
de fuera
también hay un coste
que no es el tiempo
pero es el mantenimiento
en las versiones
que tiene
qué pasa cuando hay una mayor
qué
qué tienes que pagar
a cambio
cómo tienes que cargar
los estilos
es muy grande
lo que carga
en el bundle
entonces
todo tiene un coste
de oportunidad
es el hecho
de lo que ganas
contra lo que pierdes
así que bueno
yo casi siempre
muchas veces
lo creo yo
o sea
no
pero hay
ciertas ocasiones
esto una tabla
en paginación
infinity scroll
y tal
seguramente utilizaría
uno externo
así que claramente
pues
mi duda
fuera de la clase
que te parece manejar
un CMS headless
para administrar
los textos
de una página
y el i18n
me parece
fantástico
me gusta
de hecho
yo hice un proyecto
hice un proyecto así
con un
un CMS headless
para administrar textos
de una página
y el i18n
exactamente eso
y está muy bien
porque lo hace
súper fácil
y a alguien
que le puede costar
mucho
el actualizar
ese contenido
pues con este CMS
no le cuesta tanto
y luego no cuesta
tanto hacerlo
creo que
ya hemos visto
que por ejemplo
en Firebase
podrías incluso
hacer algo
con autentificación
y podría estar
muy bien
así que
Jesús Sánchez
dice un lujo verte
te pide tarde
pero me lo veré
desde el inicio después
muy bien
Jesús
así me gusta
saludos
eres un crack
Paul Spartan
dice
¿puedo ir al baño maestro?
puedes ir
puedes ir
ve por favor
no hay problema
¿se puede hacer crop
a la imagen subida?
¿hay que usar alguna librería?
se puede hacer crop
y de hecho
se podría llegar a hacer crop
de la imagen
antes de subirla
en el navegador
ya sería un poco
más complicado
pero bueno
con Canva
se puede hacer
y cosas así
pero se podría hacer
y seguro que hay librerías
que nos lo permiten
lo podemos hacer
Daniel de la Cruz Calvo
estamos aprendiendo un montón
gracias por tu tiempo
y tu pasión
y gracias a ti
por tu comentario
muchas gracias Dani
uy uy uy
este señor es muy bueno
dice José María
muchas gracias
saludos Miguel
te veo mientras ceno
pues que aproveches Josué
es el primer directo tuyo que veo
y me motiva mucho a aprender
Tomás
pues me alegro un montón
¿qué opinas de AWS Amplify?
me encanta
me gusta mucho
es muy parecido a Firebase
en muchas cosas
y espero que en algún momento
en el canal
lo podamos traer
porque me gustaría mucho
y creo que tiene mucho
mucho mucho potencial
David Iguita dice
siempre me motiva a aprender más
cuando veo tus vídeos
programar es demasiado bueno
a pesar de los momentos complejos
cuando se está aprendiendo
ya te digo
cuando estamos aprendiendo
muchos muchos
lo hemos pasado muy mal
pero al final
creo que compensa
y vale la pena
me dice Pablo
¿puedes seguir dos horas más?
me encantan tus vídeos
jajaja
saludos de Argentina
claro que sí Pablo
puedo quedarme aquí dos horas más
solo que voy a tener que traerme la cena
porque aquí son las 10 de la noche
entonces
tengo que cenar
creo que con dos horas
ya está bien
que si no luego
os aburrí de mí
y no venís a mi live
y tal
así que
yo creo que hasta aquí
lo podemos dejar
que no ha estado nada mal
tenemos a
señor Pablo
saludos desde México
júnior
última consulta
¿se puede aprovechar las ventajas
de get in shall props
get server props
con graphql?
sí por supuesto
se puede
sin ningún tipo de problema
y
joseph
el
muy interesante
la clase de hoy
muchas gracias por tus conocimientos
muchas gracias a vosotros
muchas gracias a vosotras
que sé que también hay
muchas chicas
que están por aquí
y que me lo comentan
que le gusta mucho el live
y os lo agradezco
solo
os pido
antes de iros
ya sabéis
dejad vuestro like
si os ha gustado la clase
creo que ha sido muy interesante
que hayamos hecho el time ago
desde cero
hemos visto algunos problemas
de esto de subir la imagen
pero
funcionar funciona
no es perfecto
pero me llevo los deberes
estas dos cositas
evitar que se suba la imagen
hasta
hasta que no haga
el publicar el tweet
y el hashear la imagen
me llevo estos deberes
creo que es muy interesante
también ver
cómo funciona el file reader
para conseguir esto de la imagen
y además
haremos lo del progreso
¿vale?
también vamos a hacer
ver el progreso
de la imagen
mientras se sube
así tenemos
estas tres cosas
que yo creo que
vamos
va a dejar esto
nivel profesional
o sea
yo creo que
este twitter
poco a poco
con la tontería
se está volviendo algo
no sé
muy muy muy
muy pro
no te dejo dos likes
porque no se puede
que majo Dani
eres el mejor
Claret
muchas gracias Claret
gracias Miguel
hasta el otro live
nos vemos en la próxima semana
Manuel
muchas gracias
recomiendo tus vídeos
a mis colegas
pero se les hace difícil
por el español
vaya
muchas gracias
dile que se puede poner
los subtítulos
un privilegio
como cada viernes
Manuel
una carita sonriente
de Nicolás
sos un genio man
tendría que haber más personas
como vos
muchas gracias Mauro
gracias Miguel
seguís muy crack
felicitaciones por los 12
vamos a por los 20
vamos
vamos que nos queda
muy poquito
ya sabéis
engañad
compartir
darle muchos likes
y poco a poco
hasta el próximo viernes
que terminaremos
de arreglar
este tema
de las imágenes
y vamos a arreglar
también el tema
del usuario
vamos a subirlo
a Firestore
y yo creo que
con esto
desblocaremos
un montón
de cositas
y también
intentaré
a ver si podemos
hacer la url
del tweet
que cuando le demos
al tweet
tenga su propia url
y para hacer esa url
para hacer ese tweet
lo vamos a hacer
con renderizado
desde el servidor
porque así veremos
el get static props
bueno el static no
el get server props
o el get initial props
veremos los dos
y con estos dos
o con el get initial props
veremos el renderizado
del servidor
del timeline
bueno de un tweet
del timeline
así que puede estar interesante
que majos
Esteban
muchas gracias
sos un crack
quiero aprender más
de CSS como vos
que debería hacer
pues voy a intentar
hacer más contenido
de CSS
porque me gusta mucho
pero al final
la práctica
hay un montón
de recursos
o lo que puedes hacer
es mirar diseños
que te gusta
e ir