Vista My Account con conditional rendering
Contenido del curso
Solución de la prueba
Próximos pasos
Vista My Account con conditional rendering
Vista My Account con conditional rendering
Contenido del curso
Santiago López Alarcón
Andrés Julian Caro Restrepo
Ricardo Andres Ojeda Silva
Eduard Barrios
Daniel Amaya
Diego Rubio
Kengya Moncada
Cristian Acalo
Guillermo Prituluk
Owen Vassarotto
Andres Felipe Camacho Rodriguez
Diego Moreno Gallón
Wilman Garcia Mercado
Brenda Sutara
Leonardo Garrido
Fredy Max Chavez Loyola
Andrés Julian Caro Restrepo
John Malku Córdova Sinchico
John Malku Córdova Sinchico
Encontré un error y es que al filtar por Furnitures no filtra los items. La API los encuentra por Furniture, sin la S.
Muchas gracias Santi!
Quisiera dejar por acá mi idea de diseño para la página My Account: . Cree una vista con un botón de edit para cada campo, cuando este es clickeado, el texto se transforma en un input que permite setear la info:
. .
Hola, estoy tratando de hacer la logoca de cracion de usuarios en proyecto, para estoy estoy tratando de validar primero que el correo esté disponible po medio del API, este es mi codigo:
async function checkEmail(userData, onSuccess){ const API = 'https://api.escuelajs.co/api/v1/users/is-available'; const emailToCheck = {email: userData.email} //email to check tiene formato de correo const query = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(emailToCheck) } try { const response = await fetch (API, query); const data = await response.json(); console.log(data); }catch(error){ console.error('Error', error); } }
se supone que este llamdo a la api responde con un objeto el cual si el correo no está disponible debe ser
{isAvailable: false}
pero si el correo que estoy validando no está registrado en el API la respuesta deberia ser:
{isAvailable: true}
siembargo la respuesta que obtengo es siempe false. ¿´porqué? pd: ya validé la lista de usuarios registrados en el api y me asegurpe de mandar uno que no estviera en la lista y la respuesta sigue siendo false es decir que no está disponible.
Hola, Eduardo. El código que has proporcionado parece estar correctamente estructurado para realizar la validación del correo a través del API. Sin embargo, la respuesta que recibes siempre como resultado "false" puede estar relacionada con la forma en que estás interpretando la respuesta del API.
La respuesta que esperas recibir es un objeto que indica si el correo está disponible o no. Según mencionaste, si el correo no está registrado en el API, la respuesta debería ser {isAvailable: true}. Sin embargo, si el correo ya está registrado, la respuesta sería {isAvailable: false}.
Para manejar adecuadamente la respuesta del API y validar si el correo está disponible, puedes ajustar tu código de la siguiente manera:
async function checkEmail(userData, onSuccess) { const API = 'https://api.escuelajs.co/api/v1/users/is-available'; const emailToCheck = { email: userData.email }; const query = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(emailToCheck) }; try { const response = await fetch(API, query); const data = await response.json(); if (data.isAvailable) { // El correo está disponible console.log('El correo está disponible'); onSuccess(); // Llamar a la función de éxito si es necesario } else { // El correo no está disponible console.log('El correo no está disponible'); } } catch (error) { console.error('Error:', error); } }
En este código, hemos añadido una condición para verificar si data.isAvailable es true. Si es así, mostramos el mensaje "El correo está disponible" y puedes llamar a la función onSuccess() si es necesario. En caso contrario, si data.isAvailable es false, mostramos el mensaje "El correo no está disponible".
¡Hola a todos! 👋
Quiero compartirles que la API original del curso está rota, lo que puede dificultar completar los ejercicios. Para ayudarles, he creado una versión funcional del proyecto base con una nueva API y código actualizado. 🚀
Pueden clonar este repositorio para seguir el curso sin problemas:
👉 <>
Además, si les resulta útil, no olviden darle una estrella ⭐ al repositorio y seguirme en GitHub. ¡Espero que les sea de ayuda y puedan completar el curso con éxito! 💚
¡Happy coding! 💻
Habilite el Home pero con la condicion de que si agrega un produto al carrito y quiere comprarlo debe iniciar sesion! en caso de hacer click lo direcciona al sign-in
✨🦄 Considero que la sección de MyAccount debía estar dentro del primer issue, ya que está relacionado mucho con las páginas de Log In y Sign Up.
Pero esta es la manera en que desarrollé esta sección n.n
Cada cosa con su validación :3
Yo lo que hice fue utilizar el código que ya tenia para crear un usuario, lo extraje e hice un componente el cual cambia el valor del botón "Create/Edit" según donde sea llamado. Capaz abuso del useState un poco o no ?
Así quedó mi route "My Account":
Cuando el state view sea igual a "edit-user-info" agrego un button al lado del título con el cual puedo volver "user-info" por si algún usuario se arrepiente de editar su cuenta.
A la teacher se le fue el sonido
Les comparto como me quedo:
La categoria “Toys” no funciona, al parecer no hay productos en la Fake Store con esa categoria porque no existe.
Mi solucion fue cambiar a Shoes…
Si, yo también cambié el de Others porque no estaba
me parece muy interesante para implementar el despliegue de navbar en la app de mercadoLibre. Si haces scroll para abajo el navbar desaparece para dar mas espacio a los productos. Pero si haces scroll para arriba vuelve a aparecer el navbar.
Bueno les dejo como quedo el proyecto Code Github y el demo Demo live
Comparto como me quedó la sección de MyAccount (En el navbar coloco el primer nombre del usuario):
yo lo hize de esta manera funciona todo pero al agregar una dirección en el url o recargarlo me sale pagina no encontrada, alguien podría revisar mi codigo y decirme como puedo solucionarlo https://github.com/anonimussapee/shopiLab
ya encontre la solución, lo que hize fue crear un archivo sin formato en la carpeta public llamado _redirects y dentro /* /index.html 200