Code review: LocalStorage en React.js
Contenido del curso
Solución de la prueba
Próximos pasos
Code review: LocalStorage en React.js
Code review: LocalStorage en React.js
Contenido del curso
david jurado
Santiago Quintero
Francisco Salazar
Erika Ladner
Gerson David Barboza Alvarez
Brenda Sutara
Zaidibeth Ramos
Diego Rubio
Ulqernesh Karvenae
Max Andy Diaz Neyra
Rafael Livise Larico
Owen Vassarotto
Magalí Acevedo
Magalí Acevedo
Max Andy Diaz Neyra
Cristian Acalo
Victor Isaac Olivares Torres
Guillermo Prituluk
Wilman Garcia Mercado
Zaidibeth Ramos
Creo que todo seria super bonito si hacen que la api de platzi sea solo de productos serios y no de cosas raras jajsjaj
Uy siiiii, ahorita esa API está una locura, elminaron categorias y muchos "productos" estan repetidos.
Yo terminé haciendo mi propio backend para ahorrarme ese problema jaja
Hermoso como tenes todo acomodado y paso a paso! Me encanta el curso ♥
Ehhh seré el único al que no le funciona el código del repo? jajajajajajajaja
Voy dejando mi vista
Justo como se esta usando la variable sign-out de localStorage y como ya se hizo la maqueta del SignIn, aproveche de colocar una funcion muy similar a la de handleSignOut, llamada handleLogIn en el boton de LogIn, para no tener que estar eliminando la variable desde el LocalStorage en el navegador.
En primer lugar, importe el Context, el elemento Link de react-router-dom y el contexto
import { useContext } from 'react' import { Link } from 'react-router-dom' import { ShoppingCartContext } from '../../Context'
Luego, dentro de SignIn, cree la funcion para gestionar el logIn
const handleLogIn = () => { const stringifiedSignOut = JSON.stringify(false) localStorage.setItem('sign-out', stringifiedSignOut) context.setSignOut(false) }
y posteriormente, le asigne esta funcion al evento click del boton de LogIn
<button onClick={()=>handleLogIn()} > Log in </button>
¡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! 💻
XDDDDDDDDD Yo creía que la primera parte era todo esto
Ostia, como me reí
¿Para una prueba técnica esta bien usar librerias o mejor no usar?
en este caso para el formulario yo uso formik y yup.
¿Donde es invocada la función initializeLocalStorage para agregar key de account y sign-out en localStorage?
Algo hice mal 🙃
Ideas ?? esta igual por que ya lo revise mil veces o eso creo
tuve un typo , cuando no eh! 🙃
Yo implemente la solucion algo diferente:
En el context escribe el siguiente codigo:
const [account, setAccount] = useState(()=>localStorage.getItem("account") ? JSON.parse(localStorage.getItem("account")): null) const [signOut, setSignOut] = useState(()=>localStorage.getItem("sign-out") ? JSON.parse(localStorage.getItem("sign-out")): true ); const updateAccount = (newAccount)=>{ setAccount(newAccount); localStorage.setItem("account", JSON.stringify(newAccount)); } const updateSignOut = (newSignOut)=>{ setSignOut(newSignOut); localStorage.setItem("sign-out", JSON.stringify(newSignOut)); } ```Y luego en navbar : ```tsx const context = useContext(ShoppingCartContext) const activeStyle = 'underline underline-offset-4' const isAuthenticated = !context.signOut; const onSignOut = ()=>{ context.updateSignOut(true); }
🦄✨ En lo personal, decidí agregar un poco más de dinamismo a la aplicación, sin dejar de lado los issues de la prueba.
Creé dos keys en el localStorage. Una que contendrá a todos los usuarios de la aplicación, y otra que contendrá solamente al usuario que está autenticado.
Con esas dos llaves se puede realizar todo el proceso que solicita la prueba, además de poder realizar todas las operaciones CRUD de un usuario regular (no como administrador), como: crear una cuenta desde SignUp, actualizar datos desde MyAccount, eliminar cuenta, cerrar sesión y evidentemente iniciar Sesión en el Log In.
Estas son las vistas que desarrollé para el primer issue:
Y esta es la manera en la que se guarda la información en el LocalStorage
no me sale la key en el navegador, alguien sabe si debo ejecutar la función initializeLocalStorage()? y si sí, en dónde debe llamarse? gracias.
En el caso de que apliquen html semántico aviso de que el componente <Link> entra en conflicto con la etiqueta <form>, yo lo solucione encapsulando en un div.
