React Hook Form
Sí, creo que lógicamente debes hacer false
React Hook Form
Vale, vale, venga, pues vamos a instalar
React Hook Form
React Hook Form
React Hook Form
El otro día lo recomendé junto con otras dependencias
Vamos a instalarlo
Pues no voy a hacer el Custom Hook
De Use Fill, ¿vale?
Vamos a hacer esto así
Vamos a importar el Use Form
React Use Form
A ver si el linter
Esto de no tener linter no me da mucho rollo
Y vamos a utilizar el Custom Hook
De Use Form, aquí en Add Story Page
Tenemos Register, Handle Submit, Watch
Y Form State con los errores
Y todo esto
Vamos a copiarnos este formulario total
Y si queréis ahora os lo explico
Un poquito
Vale, añadir nuevo artículo
Para esto
Ay, me lo he copiado con return incluido
Vale
Bueno
Ay, pues
Ah, bueno, no
Esto no es el linter en realidad
Esto se me está quejando del TypeScript del editor
No es el linter
Que digo
Y todo este rojo
Bueno, el Handle Submit
Pues nada
Este formulario
Vamos a hacer esto así
Y esto acá
Para que no nos dé tantos errores
Y tanta historia
No se me formatea solo
Cago en la leche
¿Qué rollo?
Vale
Venga
Este Handle Submit que nos da
Esto del Use Form
Esto lo que hace es que se va a llamar
Y nosotros lo que le podemos pasar además
Sería otra función que pueda hacer
Pues diferentes cosas
Por ejemplo este
OnSubmit
OnSubmit
El Handle Submit lo que hace además es
Todas las validaciones que necesitemos
¿Vale?
Aquí en el OnSubmit
Que le pasaremos aquí en el Handle Submit
Aquí deberíamos tener todos los valores
Que le estamos pasando
Así que vamos a poner un console.log de values
Y ya está
Este Handle Submit
Es el nativo
De React Hook Form
Hará las validaciones
Y las historias que sean requeridas
Y luego ejecutará este OnSubmit
Que le pasará todos los valores
Que tenga el formulario
¿Vale?
De hecho ahora lo veremos un momento
Así que
Para eso es este OnSubmit
Ahora
El Register
Que lo tenemos por aquí
Es para registrar cada uno de los inputs
Y le decimos justamente
Cuál es el nombre de este input
En este caso le decimos
Un ejemplo
Un ejemplo requerido
¿Por qué?
Porque le puedes pasar al Register
Le puedes pasar opciones
Como segundo parámetro
Para las validaciones
Que se ha requerido
Cuáles son los atributos
O sea
Los valores máximos o mínimos
Que puede tener
Si es un string
Por ejemplo un password
Le puedes decir
Como mínimo que tenga tanto
Como máximo que tenga tanto
Mira aquí lo podemos tener
Le podemos
A ver si ponía
Mira aquí están las validaciones
Required
Min
Max
MinLength
MaxLength
MinMax
Esto es para los números
Y MinLength
Y MaxLength es para los strings
¿Vale?
Son dos cosas distintas
El pattern
Y el validate
Que la verdad es que no sé
Pero creo que es una
No lo voy a poner por aquí
Pero creo que es una función
Que tú le puedes pasar
De forma que
Si le devuelves true o false
Dependerá
Si ha validado correctamente o no
O sea una función
Para que puedas validar
Como te dé la gana
Así que tú le pones
Así que tú le pones en register
El nombre que queremos que tenga
Y como teníamos en firebase
Más o menos
Lo que tenemos en la base de datos
Pues por ejemplo
El favicon esto
Lo vamos a recuperar automáticamente
Voy a copiarme esto un momento
Fabicon esto
Esto viene
Vamos a poner
Viene del formulario
Se extrae
Automáticamente
El favicon
Es un string
Y se extrae automáticamente
¿Vale?
El href
Este
Sí que viene
Del formulario
Y es
Bueno
Vamos a poner que es una url
Y aquí también vamos a poner que es una url
Por si luego tenemos que
Url
¿Vale?
Automáticamente
Viene del formulario
De
Viene del formulario
¿Vale?
Href
Esto
Fuera
La imagen
La imagen
Yo creo que la vamos a sacar
Automáticamente
Esto
Ya veremos como lo hacemos
Pero
Iremos a la página
Y básicamente
Por ejemplo
Imagínate que alguien
Dice
¡Wow!
¡Qué chula!
Este artículo
Lo mejor es forma de centrar elementos en CSS
Y dice
Vale
Pues voy a compartir esta url
Bueno
Pues la imagen la sacaremos de aquí
Del
Del
Okimage
Esto ya veremos más adelante como lo hacemos
Pero ves
Esta imagen
La extraeremos
No
No permitiremos que la gente suba la imagen que quiera
Y así de esta forma también
Pues no
No nos preocupamos de donde tenemos que subir la imagen
Y todo esto
Se extrae automáticamente
El read time
También
No tiene mucho sentido que la gente se vea obligada
¿No?
A decir cuál es el read time
El time
El time
Esto creo que
La fecha
Más que el time
Aquí pone time
Pero debería ser fecha
Esto
Se extrae automáticamente
Cuando el usuario
Envía
El artículo
O sea
Más que saber
Cuál es la fecha del artículo
Vamos a hacer esta
Y ahora vamos a tener dos títulos
Vamos a sacar el title
Que le puede poner la persona que quiera
¿No?
El title
Por si le quiere cambiar el por defecto
Vamos a tener original title
Esto también es una cosa que tendremos que extraer
Que es el título al general del artículo
Y la descripción
Description
Extraemos
De
Del
Meta description
Esto va a ser divertido
Cuando hagamos este semi-scrapping
En principio
Yo creo que esto ya está
O sea
No necesitamos más
La descripción
Todavía no la estamos usando
No estoy muy claro
Que la vamos a usar
O sea
Lo único que tiene que añadir la gente
Es el href y el título
O sea
Por ejemplo
Si vamos a
Meneadef
Meneade.net
Y yo creo un artículo
Crear
No
Publicar
Claro
Te comparto un enlace
Es que es bastante fácil
¿No?
O sea
Comparto un enlace
Le das aquí
Enviar
Y ahora
¿Qué me pide?
Vale
Título de la noticia
Etiquetas
Etiquetas
Tags
Vale
Lista
De strings
Separados por coma
Vamos a hacer que sea
Etiquetas
Separadas por coma
Descripción
Vale
Vamos a ponerlo en la descripción
Y vamos a sacar también
El original description
Un poco de lo mismo
Date
Vale
La categoría
Yo creo que no vamos a tener categorías
Así que esto fuera
No vamos a tener categorías
No vamos a tener categorías
No
No, no, no
Las categorías vamos a dejar que
Que se quede fuera
Al final vamos a hacer
Vamos a dedicarnos más a las categorías
A las etiquetas
Por ejemplo
Javascript
React
Cosas así
Así que vamos a ir más por las etiquetas
Si yo aquí voy poniendo por ejemplo
Fuentes
Coma
Promocion
Es que es bastante
O sea
Este
Sabes que no
No se separan automáticamente
Sino que se quedan las comas
Aquí
Igual podemos empezar así también
Vale
Entonces
Esta es la información que debería venir del formulario
Por lo tanto
Deberíamos tener
No vamos a tener un default value de esto
Vamos a tener
Vamos a poner esto por aquí
Vamos a tener
Primero el href
Este es el más importante
Así que vamos a poner
Article
No sé si ponerle
Article
Url
O url
De una
Vamos a poner url
Como le hemos llamado en Firebase
A esto
Href
Href es un poco raro
Porque parece que va a utilizar un anchor
Que me encantan los anchors
Como ya lo sabéis
Registra tu input
Entonces
Vimbo que register function
Vale
Pues ahora vamos a poner este
Y evidentemente
Este
Debería ser
Required
True
No sé si
Hay algún tipo
En React hook form
Vale
Apply validation
O sea
Me gustaría
Ves
Vamos a tener que poner un pattern
Y todo esto
Pero me molaría que hubiese algún pattern ya
Que fuese una url
Por ejemplo
En el pattern
Required
True
Pattern
Vamos a hacer
Vamos a ver
Se dice copilot
Hace su magia
Url pattern
Ahí está
Bueno
No sé exactamente
Si esto es muy de fiar
No lo sé
Pero
Vale
Vale
Vamos a pensar que sí
Vamos a pensar que sí
Validate
Vale
Esto es una función
A ver
Otra cosa que podemos hacer
A ver
Un pattern suele ser
Pues suele estar bastante bien
Pero si no lo que podríamos hacer
Es un validate
Y intentar crear una url
Esa es una buena idea
Esa es una buena idea
¿Sabes?
O sea
Podríamos intentar hacer aquí
Aquí
Podríamos intentar
Por ejemplo
Por ejemplo
Si hago un new url
De https
Midu.dev
¿Vale?
Esto bien
Pero si intento hacer uno de
Pepe
Falla
Esto no está mal
¿Eh?
Porque
A ver
Claro
Lo malo de esto
Es que aquí
Te pueden meter esto
Claro
Claro
Claro
O sea
Que necesitaríamos
Por un lado
El pattern
Para asegurarnos
Que nos meten
Protocolos en condiciones
Porque si no
Aquí te pueden poner
SSH
Lo que sea
Bueno
Que a ver
También
Otra cosa
Una vez
Que se hace esto
También puedes mirar aquí
Por ejemplo
Url
¿No?
Y dices
Url.protocol
Tiene que ser igual
A https
Claro
Y si dice que es false
Pues nada
Es que sabéis que pasa
Los patterns
Los carga el diablo
Entonces
Estoy tentado
A hacer ese
O sea
En lugar de
Confiar en un pattern
A ver
Que decís vosotros
Patter o no pattern
A ver
Que decís
Patter o no pattern
Validate
No pattern
No pattern
A mi me gustan
Regex
No pattern
O sea
Validate
¿No?
O sea
Lo que decís
Es que hagamos
Un
Por ejemplo
Validate
Validate
URL
Donde esto
Me debería devolver
El validate
Tu tu tu
Mi length
El validate
Project
Array
A ver
Validate
Validate
A ver si veo
Positive
¿Qué es esto?
Ah porque
Ah se le pueden pasar
Más de una validación
Lo cual está súper bien
Claro
No puedes tener
Más de un método
Para decir
Si es positivo
Si es menor que tal
Mira
Check URL
Esta sería
No pattern
No pattern
Los carga el diablo
No pattern
Bueno más o menos
Veo que no queréis pattern
A ver
A mi me gustan los patterns
Pero es verdad
Que son un poco peligrosos
Siempre se te puede escapar algo
Y a lo mejor
No es siempre
La mejor
Opción
O sea que
Sería value
Teníamos
URL
New
URL
Value
Esto sería un try catch
Primero
Probaríamos
A intentar crear
La URL
Haríamos un catch
Y si no haría
Un return false
Y ya está
Con esto
¿Qué les pasa con los patterns?
Que no está mal el pattern
Pero bueno
Si esto tiene más sentido
URL.protocol
Tiene que ser igual
A
HTTPS
Punto
Así
No pattern
Quizás hasta hacer un
Use validated URL
Para validar esa new URL
Podría ser interesante de ver
No
O sea un custom hook
No tiene mucho sentido
Porque
Claro un custom hook
En este caso
Tiene que ser una función
Aquí
Porque esto es lo que le vamos a pasar
O sea no puede ser un custom hook
Entonces aquí
Podríamos mirar un montón de cosas
De la URL
Pero entiendo que
Con esto debería ser suficiente
Por ahora
El HTTP
Se quedaría fuera
¿Por qué?
Porque vamos a hacer
Que solo sean compatibles
Con los dominios seguros
Porque no queremos
Que la gente
¿Sabes?
No queremos que
Que la gente
Pues te mande
A una URL
Que no es segura
De alguna forma
Nos podríamos responsabilizar
¿No?
De que en nuestra plataforma
Pues alguien
Se ponga a compartir
URL en no seguras
No sé
No
Creo que mejor
Todo esto
¿Vale?
Cierto
Vale
Roy Juni
¿Qué dices?
URL
Dos puntos
False
Bueno
Si nos ha creado
Si esto no nos crea
Una URL
Esto debería petar
Y si tiene un protocolo
Pues solo miramos esto
¿No?
Y devolvemos
Que si es igual a HTTPS
Pues esto será true
Si no sería false
Y ya lo tendríamos
Yo creo que con esto
Creo
Ahora lo probaremos
¿Eh?
Iremos probando
Registramos la URL
He requerido
Y tenemos un validate URL
Bueno
Esto sería
A ver si me sale
El autocomplete
Validate
Validate URL
Creo que con esto
Lo tendríamos
¿Vale?
Include validation
With required
Esto caca
¿Qué más teníamos entonces?
El title
Title
Que es requerido
Tendríamos tags
Y descripción
Tags
Y
Descripción
¿Vale?
Que sea todo requerido
Al menos por ahora
Luego aquí tendríamos
Los ejemplos
Aquí sí que podríamos hacer
O
No sé si un custom hook
Pero al menos
Sí que podríamos hacer
Algún tipo de
Podríamos hacer
Un componente
¿Sabes?
Un componente
Que al menos
Tuviese todo el tema
Por ejemplo
Si ponemos esto aquí
Y esto
Lo ponemos aquí
Vamos a tener aquí
El error
¿Ves?
En errors
Punto URL
Y aquí sería
Claro
Aquí deberíamos ver
Cuál es el error
¿No?
Esto
Errors URL
Seguramente debería tener
Diferentes errores
Voy a poner un console lock
Para ver qué errores
Cómo los muestra
Los errors
Y ahora veremos esto
Por ahora voy a poner esto
Y al menos
Vamos viendo
Cómo va la cosa
¿Vale?
¿Qué tipo de fuente manejas
Para visual?
¿Qué extensiones tienes?
Cascadia code
Y extensiones
Haré un vídeo
En mi canal de YouTube
¿Vale?
Para que lo tengas por ahí
¿Vale?
Tu, tu, tu
Bueno
Más o menos
Vamos a ver cómo funciona esto
Vamos a
Minea def
¿Vale?
Esto
Tiene aquí
Ah bueno
Claro
Es que
Si no ponemos
Vamos a poner un label
Y vamos a ver
En chakra
En chakra debe haber formulario
Phone control
Vale
Mail address
No sé qué
Vale
Venga
Vamos a importar todo
Todo el bloque de chakra
Vale
Phone control
No sé qué
No sé cuánto
Hostia
Pero input
Este
Ah vale
Vale
Vale
Sí, sí, sí
Venga
Vale
O sea
El phone control
Es que esto es un poco raro
Pues phone control
No necesita estar
A ver si entre los componentes
Forms
Botón
No sé qué
Pero no tiene un form
O sea
Tú le tienes que meter ahí
A ver
Que tiene sentido
Vale
Pues con esto
Aquí lo que tendríamos
Por un lado
Sería
URL
Form label
Introduce
La URL
Del artículo
El type
Este sería justamente
Este register
URL
No sé qué
No sé cuánto
O sea
Esto que le estamos pasando aquí
Se lo pasaríamos aquí
Vale
Y este form helper
Podríamos ponerlo aquí
Podríamos poner
Debe
La dirección
Debe ser
HTTPS
Y esto lo quitaríamos
Vamos a ver cómo queda
Esto
A ver si
Vale
Input is not defined
Esto es porque
Aquí no hemos puesto esto
Y aquí estamos
Este form error message
Vamos a
Ponerlo también
Ay me lo he borrado
Lo he borrado
Bueno no pasa nada
Vamos a ver primero cómo queda
Vale
Entonces
Antes de seguir
Vamos a poner un
Vstack
Que el max width
Bueno
Vamos a poner por ahora 600
Al menos para que
Quede ahí
Vale
Vale
Más o menos
Más o menos
Ya va pillando esto
Un poquito de
Button
De chakra UI
Bueno yo había creado
Un componente button
No sé
Muy bien para qué
No sé
Muy bien para qué
Enviar artículo
Vale
Bueno
Ay
Esto ahora me lo he dejado
Claro
Es que esto
Cómo se centraban
Las cosas aquí
No sé si era así
No
No
Es que claro
Esto tendría que tener aquí
Un box
Align
Content
Box
Y lo tengo que importar
Esto sí que me lo ha centrado
Y lo demás no
A ver
A ver
A ver
En realidad esto
Lo podemos quitar
Vale
Esto
Es que este align
Este
Esa line
Es como un
Una forma corta
De decir algo
Pero como no me acuerdo
Qué es
Ahora lo miro
En chakra
Vale
Bueno
Puedo volver a activar
Ya el linter
No
Que me estoy
Que el linter
Me está dejando loco
Ah
Center
Coño
Tiene un componente
Que se llama
Center
Tal cual
Center
Me encantan estos
Componentes mágicos
Vamos a ver si hace la magia
Que tiene que hacer
O sigue
Haciendo lo que
De la gana
Vale
Si está aquí
Vstack
Es por este
Deep
Vale
Ay
Qué maravilla
Este componente
Center
Que haga tanta magia
Que uno no se tenga
Ni que preocupar
Bueno
Vamos a
Vamos a activar el interval
Si nos importa
Porque
Es un poco
Complicado
Está un buen rato
Se dice droid
He estado casi 20 minutos
Dándole con él
Sin el linter
Pero es que
Con el linter
Se trabaja un poco mejor
Bueno
Esto de añadir
Nuevo artículo
También
Esto podría ser
Un title
Title
Title
Heading
Eso
Heading
Heading
Heading
Vale
Más o menos
Introduce la url
Del artículo
Vamos a poner un playholder
Esto le he puesto
Type email
Pero esto
Playholder
HTTPS
Vale
HTTPS
Vale
Los demás no aparecen
Porque salen mal
Vale
Todos estos form controls
Que hemos hecho aquí
Esto lo deberíamos repetir
Para cada uno de ellos
Para el title
Introduce
Un título
Para el artículo
Entonces nos deberíamos copiar
Esto que hemos hecho aquí
Y se lo deberíamos copiar aquí
Que todavía no tiene validación
Pero bueno
Título
Del artículo
Entiendo que el helper
No hace falta
Bueno
Podría ser
Si queremos que tenga
Un tamaño máximo
Y cosas así
Pero bueno
Ya iremos viendo
Por ahora
Vamos a hacer todo
El formulario
Lo vemos
Introduce
Las etiquetas
Del artículo
Esto va a ser
Tags
Damos el title
Y por cierto
Esto
Ah mira
Si ya tiene
Esta idea
Ya automáticamente
Hace que el label
Funcione correctamente
Muy bien
Muy bien
Este tags
Vamos por aquí
Etiquetas
O javascript
React
Performance
Vale
A este sí
Le vamos a meter
El form helper
Vale
Vamos a poner
Que
Separa
Tienes que separar
Las etiquetas
Con coma
Vale
Venga
Vamos con el description
Que es el último
Ya
Vamos
Vamos description
Introduce la descripción
De artículo
La descripción
Del artículo
Si no introduces
Ninguna
Se recuperará
La descripción
Original
Del artículo
Aquí description
Bueno
Bueno
Bueno
No está mal
La separación
Es un poco
De aquella forma
Este form control
Estaría bien
Que tuviese un poco
De margin
Bottom
Nunca me acuerdo
Nunca me acuerdo
Cómo son
Las cosas
Estas
Sabes
Sé que si le pongo
Un número
Lo va a hacer
Pero
Sé que también
Tiene como algún
Tipo de
Nunca me acuerdo
Lo tendría que mirar
Ya lo miraremos
Después
Por ahora
Vamos a hacer esto
Para que quede
Más o menos
Más legible
Y luego ya le
Le damos
Vale
Bueno
Introduce la URL
Artículo
Un título para artículo
Las etiquetas de artículo
Y tal
O sea que
Hacemos esto
Esto es el blog
De midudev
Es la bomba
Bomba
Vale
JavaScript
React
Performance
Una descripción
Brutal
Vale
Entonces le daríamos
Enviar al artículo
Y esto
Ahora
Lo que debería estar ejecutando
Es este
OnSummit
O sea deberíamos ver
Los values
En la consola
Vale
Al menos
Deberíamos ver
Vale
El objeto
Un objeto vacío
Totalmente
O sea que no
No estamos viendo
Lo que necesitamos
A ver
Le voy a dar
Enviar al artículo
No es que de hecho
No se está ejecutando
Espérate
Yo me he cargado
El formulario
No
HandleSubmit
Pues no
No está haciendo
Bueno espérate
Claro es que este botón
Que yo he puesto aquí
Al final
Es de tipo botón
Vale
Súper importante
Cuando tú pones un botón
Al final de un formulario
Si
Si no le pones un tipo
Por defecto
El botón
Funciona como submit
Y está bastante bien
Pero claro
Como Chakra
Le está poniendo
Que es del tipo botón
Pues entonces dice
Ah ah ah ah ah
Pues voy a funcionar
Como un botón
No como a ti te dé la gana
Entiendo que si le ponemos
Aquí un type submit
Y ahora le doy
Debería ahora entonces
Si hacer el submit
Vale
Ahora si que hace el submit
Vale
Y aquí tendríamos los values
Esto es el handle submit
Que tenemos por aquí
Como hemos puesto
Que la url sea requerida
Si yo elimino esta parte
Fíjate
Ya se está quejando
Esto es la
Esto es el error
¿Ves?
Que me dice
Tipo requerido
Pues si el tipo
Es tipo requerido
El error
El mensaje no
No hay un mensaje de error
Pensaba que a lo mejor
Tendría un mensaje por defecto
O sea que somos nosotros
Los que tenemos que hacer
Vale
No pasa nada
Vamos a ver también
Si pongo aquí
Una url
Que no sea correcta
No
Es correcta
Mira
Validate
Validate
Y si le doy a enviar
Vale
Otra vez
Se pone aquí en validate
Esto estaría bien
Claro
Cuando se pone el error
En chakra
Vamos a ver
Como podemos estilar esto
En chakra
Exactamente
Porque seguro
Que en chakra
Hay una forma
De que el input
Form control
No era
Form control
Form error
Error
Vale
Naruto
Make it
Ah mira que bonito esto
Que bonito
Que bonito
Vale
Form control
Vamos a poner esto
El required
El título
Yo creo que los tags
Se deberían ser requeridos
Pero entiendo
Que el título
A ver
El título es que podemos
Recuperar el de
Vamos a hacer esto
Vale
Vamos a dejar el título
En la descripción
Vamos a quitarle esto
De que sea requerido
Porque no
No lo vamos a hacer requerido
Vamos a hacer que
Si lo pone bien
Y si no lo pone
Pues recuperaremos
El original
Como al final
Tenemos que recuperar
La imagen
El título
Un montón de cosas
El favicon
Por ejemplo
Pues no pasa nada
Si no introduce un título
En la descripción
Pues recuperaremos
Haremos nosotros
Alguna cosa
Vale
Así que con el required
Esto ya quedan así
Bien
Perfecto
Vale
A ver que más
Que más tienes
Cuéntame
Use with form libraries
Mira
Tiene un ejemplo aquí
Con formic
Is disabled
Is invalid
Esto
Hostia
Pero si es invalid
Esto
A ver
Voy a probar un momento
Esto
Si le pongo es invalid
Se verá diferente
Si
Vale
Vale
Fantástico
O sea que ahora
Podemos mirar
En este errors
Punto
Url
Y esto podría decirnos
Si es inválido
O no es inválido
Vale
Yo podría
Poner aquí
HTTPS
Midudev
Esto es válido
Si lo elimino
¿Ves?
Es inválido
Oye
Está muy bien
Chakra
Es sorprendentemente
Bonico
Me gusta
Se podría quitar
Autocomplete
Ponerlo en off
¿No?
Si
Si se podría quitar
Vamos a hacerlo
En el input
Autocomplete
None
O no
Nope
Pues creo que si no
Lo sigue haciendo
De hecho
Lo sigue haciendo
¿Cómo era esto?
Porque
El autocomplete
Sé que había un problema
Un problema en Chrome
Autocomplete
Disable
Chrome
Esto
Autocomplete
Off
No
Lo del off
Off
Does work
As expected now
Ah mira
Ahora sí
Ahora sí
Pues off
Esto lo han cambiado
Tantas veces
Lo han cambiado
Tantas veces
Porque sabéis que pasaba
Que
Pero veis que es de
Enero de 2021
Pero antes era
Chrome
Off
Luego antes
Había que poner
Un string cualquiera
Para que lo desactivase
Una locura
Complete
Off
Vale
Pues ya está
Este
Vale
Pues ya lo tenemos así
Vale
Esto
Entiendo que también
Deberíamos quitarlo aquí
Vamos a quitarlo en todas
Porque no tiene mucho sentido
Que
Autocomplete
Off
Autocomplete
Off
Autocomplete
Off
Vale
Vale
Entonces ya sería
Midudev
Bueno
Pues está bastante bien
La validación
Queda
Queda bonita
Queda bonita
Bueno
Muchas gracias
A todos los que habéis dicho
Bye
Quercommun
Juntos
ledge
DAD
Deberíamos
w
Desde la
B
Bueno
Suive
Sobre
的
En Sinn
functioning
DAD
O
ziehen
Ende
DAD
Mist
La
DAD