Code review: LocalStorage en React.js

Clase 4 de 9 • Prueba Técnica: E-commerce Profesional con React.js

Resumen

La creación de una aplicación web eficiente y atractiva no solo depende del desarrollo de nuevas funcionalidades, sino también en la identificación y perfeccionamiento de los elementos clave que mejoran la experiencia de usuario. En este sentido, la gestión de la autenticación y el almacenamiento local son aspectos cruciales en el flujo de una aplicación. Descubramos paso a paso cómo abordar estos desafíos y qué implicaciones tienen para el funcionamiento global del proyecto.

¿Cómo identificar los componentes principales en el flujo de una aplicación?

El reconocimiento de los elementos esenciales en una aplicación web permite establecer un punto de partida sólido para la implementación de funciones. El navbar es un ejemplo de componente estratégico, pues ofrece una visión clara de la interactividad y el estado del usuario.

¿Cuál es la importancia del botón sign out?

El botón de cierre de sesión (sign out) representa un elemento crucial:

Permite cambiar el estado de autenticación del usuario.
Su acción debe reflejarse tanto visualmente en la interfaz como en la lógica de la aplicación.
Desencadena un cambio en el almacenamiento local para reflejar el estado de autenticación.

¿Cómo trabajar con el almacenamiento local local storage?

El almacenamiento local es una herramienta útil para mantener información relevante durante la navegación del usuario:

Permite guardar datos como account y sign out para su uso futuro.
Es esencial inicializar estas variables en el local storage.
En las pruebas técnicas es común usar local storage, aunque en producción es preferible usar APIs y autenticación segura.

¿Qué pasos seguir para inicializar y gestionar local storage y el estado global?

Para manejar adecuadamente el almacenamiento y el estado global se deben seguir estos pasos:

Inicializar las variables account y sign out en el local storage.
Crear y manejar estados globales para estas variables.
Desarrollar una función para actualizar el estado de autenticación.
Verificar los cambios en el navegador al interactuar con dicha función.

¿Cómo afecta el estado de autenticación a la visualización del navbar?

El estado de autenticación dicta qué elementos se deben mostrar u ocultar en el navbar, esto se logra a través de:

La recuperación del estado de autenticación desde el local storage y el contexto global.
Uso de renderizado condicional en React para mostrar diferentes elementos basados en la autenticación.

¿Qué sucede al agregar funcionalidad al navbar y maquetar la página de sign in?

Agregar funcionalidades específicas y maquetar páginas como sign in permite:

Mejorar la interactividad y coherencia de la experiencia de usuario.
Preparar el terreno para futuras implementaciones relacionadas con la cuenta del usuario.

Enfocarse en mejorar la autenticación y la gestión del almacenamiento local son pasos clave para avanzar en el desarrollo de aplicaciones web. Recuerda que la práctica constante y la atención a los detalles son fundamentales para crecer en este fascinante mundo del desarrollo. ¡Anímate a seguir explorando y aprendiendo cada día!

david jurado

student•

Creo que todo seria super bonito si hacen que la api de platzi sea solo de productos serios y no de cosas raras jajsjaj

Santiago Quintero

student•

Uy siiiii, ahorita esa API está una locura, elminaron categorias y muchos "productos" estan repetidos.

Francisco Salazar

student•

Yo terminé haciendo mi propio backend para ahorrarme ese problema jaja

Erika Ladner

student•

Hermoso como tenes todo acomodado y paso a paso! Me encanta el curso ♥

Gerson David Barboza Alvarez

student•

Ehhh seré el único al que no le funciona el código del repo? jajajajajajajaja

Brenda Sutara

student•

Voy dejando mi vista

Zaidibeth Ramos

student•

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>

Diego Rubio

student•

¡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! 💻

Ulqernesh Karvenae

student•

XDDDDDDDDD Yo creía que la primera parte era todo esto

Login si el usuario es nuevo el invalida el ingresar y se muestra la advertencia que cree una cuenta
Si el usuario ya creo una cuenta invalida el crear cuenta y muestra que ya posee una y ingrese
Si ingresa lo manda al home
Si crea una cuenta y deja un espacio vacio advertencia
Si todos los espacios estan completados pero el email no cuenta con @ ni con . advertencia
Si pasa estos filtros crea la cuenta y lo manda al home
Si vuelve a esa vista muestra email y contraseña

Max Andy Diaz Neyra

student•

Ostia, como me reí

Rafael Livise Larico

student•

¿Para una prueba técnica esta bien usar librerias o mejor no usar?

en este caso para el formulario yo uso formik y yup.

Owen Vassarotto

student•

¿Donde es invocada la función initializeLocalStorage para agregar key de account y sign-out en localStorage?

Magalí Acevedo

student•

Algo hice mal 🙃

Ideas ?? esta igual por que ya lo revise mil veces o eso creo

Magalí Acevedo

student•

tuve un typo , cuando no eh! 🙃

Max Andy Diaz Neyra

student•

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);
  }

Cristian Acalo

student•

🦄✨ 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

Victor Isaac Olivares Torres

student•

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.

Guillermo Prituluk

student•

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.

Mi solución es mas extensa a la de teff (100 líneas 🤣)pero creo que dentro de todo esta bien .

Wilman Garcia Mercado

student•

Zaidibeth Ramos

student•

![](

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);
  }

Code review: LocalStorage en React.js

Cómo presentar pruebas técnicas con React.js

Prueba técnica para React.js Developers

Setup del proyecto con React y Vite

Issues a resolver para completar la prueba

Solución de la prueba

Code review: LocalStorage en React.js

Code review: Vistas Dinámicas para el SignIn

Code review: React Context y FormData

Code review: Protección de Rutas

Code review: Entregando la Prueba

Próximos pasos

¿Migramos a Next.js?