feat/35: Componente Notificador #47
Conversation
paupenfer1
added
code
Deploying with
|
| Latest commit: |
51abe2c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c7bc5301.ocial-app.pages.dev |
| Branch Preview URL: | https://feat-35-notificador.ocial-app.pages.dev |
There was a problem hiding this comment.
Esto me temo q no es lo que hace falta. Renderiza un elemento sin más, pero no podemos pasarle nuestro propio mensaje de error desde el formulario y no aparece en una esquina o similares (cambia la distribucion entera de la página al no estar posicionado con position:absolute) :/
Mirate la otra librería que te puse en el issue original (no la de shadcn) para que entiendas mejor el contexto, y añadela al proyecto si hace falta (nadie ha dicho q no puedas usarla!)
Cualquier cosa me preguntas, aunque hasta el sabado por la tarde no voy a poder en condiciones.
There was a problem hiding this comment.
@paupenfer1 No tienes bien instaladas todas las extensiones recomendadas o algo falla en tu entorno de trabajo, porque si te fijas fallan un montón de comprobaciones en tus archivos que a la hora de guardar se deberían de corregir automáticamente (o en su defecto hacerlo a mano pasando el npm run check para ver cuáles son los errores y npm run lint-fix para corregirlos).
Para simplificarte trabajo, elimina el AlertWarning (que solo es un componente que has creado para ver la apariencia del notificador) y alertPrueba y corrige el resto de errores en los archivos. Además, mira los otros comentarios que te pongo
ferferga
dismissed
their stale review
se me olvidó añadir el resto de comentarios
There was a problem hiding this comment.
@paupenfer1 No tienes bien instaladas todas las extensiones recomendadas o algo falla en tu entorno de trabajo, porque si te fijas fallan un montón de comprobaciones en tus archivos que a la hora de guardar se deberían de corregir automáticamente (o en su defecto hacerlo a mano pasando el npm run check para ver cuáles son los errores y npm run lint-fix para corregirlos).
Para simplificarte trabajo, elimina el AlertWarning (que solo es un componente que has creado para ver la apariencia del notificador) y alertPrueba y corrige el resto de errores en los archivos. Además, resuelve también las otras cuestiones que te pongo en los demás comentarios.
src/composables/use-toast.ts
Outdated
| import { toast } from 'vue3-toastify'; | ||
|
|
||
|
|
||
| export const notify = (type: string) => { |
There was a problem hiding this comment.
Crea un tipo que indique los posibles valores de cadenas que esta función acepta en vez de pasarle el genérico string. Tipo así:
type NotificationTypes = 'warning' | 'default' ...
De esta forma, a la hora de llamar a la función, tenemos autocompletado de los diferentes tipos admitidos. Puedes hacer también que el parámetro sea (type?: NotificationTypes), de esta forma indicas que es opcional y no hay que pasarlo siempre (y cuando no esté especificado, entrará en juego la cláusula default del switch)
src/composables/use-toast.ts
Outdated
| toast.success("Success Notification !", { | ||
| position: toast.POSITION.TOP_CENTER, | ||
| }); |
There was a problem hiding this comment.
El texto que la notificación muestre debe de pasarse como parámetro de la función. Si algo falla en la validación del formulario de registro, mostrar "Error notification !" es poco indicativo de cuál es el problema.
Debería de pasarse el texto como primer parámetro y el tipo como segundo (ya que, como te digo arriba, va a ser opcional, asi no hay que llamar a la función continuamente así: notify(undefined, 'El texto a mostrar');
tsconfig.json
Outdated
| @@ -24,7 +24,8 @@ | |||
| "@intlify/unplugin-vue-i18n/messages", | |||
| "unplugin-icons/types/vue", | |||
| "vite/client", | |||
| "vue" | |||
| "vue", | |||
| "vue3-toastify/global" | |||
|
He eliminado el AlertWarning y alertPrueba y he completado el use-toast con las indicaciones dadas. Pasando el npm run check no me ha dado ningún error. |
src/composables/use-toast.ts
Outdated
| export const notify = (message?:string, type?: NotificationTypes): void => { | ||
| switch (type) { | ||
| case 'success': { | ||
| toast.success('Success Notification !' || message, { |
There was a problem hiding this comment.
Como te dice SonarCloud, las condiciones que has puesto no son correctas, pues el operador de la izquierda siempre es verdadero al estar definido
Inviértelas y usa ?? en vez de ||. ?? sirve solo para valores nulos o no definidos, con || solo seguramente se queje el SonarCloud también porque no es tan estricto.
There was a problem hiding this comment.
Una última cosa que se me ha olvidado Paula, lo siento 😅.
Mírate el último vídeo que subí a Discord para traducir los textos de la aplicación. Básicamente tienes que meter dentro del cuerpo de la función el const { t } = usei18n() y añadir las claves traducidas en cada idioma.
Una vez esté hecho eso ya está todo completo, yo arreglo los conflictos de los package.json
|
El ejemplo del video es dentro de un div, como se debería hacer dentro de la función de notify? |
|
@paupenfer1 Al final explico justo eso, es lo mismo dentro de un |
paupenfer1
force-pushed
the
feat/35-notificador
branch
from
adb8a4a to
3082f98
Compare
src/composables/use-toast.ts
Outdated
| import { toast } from 'vue3-toastify'; | ||
| import { useI18n } from 'vue-i18n'; | ||
|
|
||
| const { t } = useI18n(); |
There was a problem hiding this comment.
Esto tiene que estar dentro de notify, en tiempo de ejecución esto suelta error.
(el const { t }) me refiero
Signed-off-by: GitHub <[email protected]>
ferferga
force-pushed
the
feat/35-notificador
branch
from
9946ed1 to
51abe2c
Compare
|
Signed-off-by: GitHub <[email protected]> Co-authored-by: Fernando Fernández <[email protected]>
Signed-off-by: GitHub <[email protected]> Co-authored-by: Fernando Fernández <[email protected]>
No description provided.