Code review: LocalStorage en React.js

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

Clase anteriorSiguiente clase

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:

👉 <https://github.com/darubiomunoz/prueba-tecnica-reactjs>

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 .

Wil Garcia Mercado

student•

Zaidibeth Ramos

student•

![](