No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Code review: LocalStorage en React.js

4/9
Recursos

Aportes 11

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

Voy dejando mi vista

Yo realize la funcion de initialStorage en context de la siguiente manera, me parece que se ve mas legible y evitamos la repeticion de codigo.

export const initializeLocalStorage = () => {
	const accountInLocalStorage = localStorage.getItem('account');
	const singOutInLocalStorage = localStorage.getItem('sing-out');

	let parsedAccount;
	let parsedSingOut;

	if (!accountInLocalStorage || !singOutInLocalStorage) {
		localStorage.setItem('account', JSON.stringify({}));
		localStorage.setItem('sing-out', JSON.stringify(false));
		parsedAccount = {};
		parsedSingOut = false;
	} else {
		parsedAccount = JSON.parse(accountInLocalStorage);
		parsedSingOut = JSON.parse(singOutInLocalStorage);
	}
};

驴No te funciona la API? 2 opciones

Debido a que la API de Platzi se usa para hacer muchos tipos de prueba (lectura y escritura), muchas veces queda inutilizable como para este curso. Aqu铆 dejo dos opciones:

  1. Usa Faker Store API. Cree esta API que retorna practicamente las mismas salidas de la Platzi Fake Store API, con un poco m谩s de coherencia de las imagenes con respecto a su categor铆a.

  2. Clona faker-store-api. Ah铆 les dejo el repositorio de la API, pueden correrlo en su m谩quina local y conectarlo con su fronend.

Si te sirvi贸 puedes darle 猸愶笍 a mi repositorio 馃槂

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>
XDDDDDDDDD Yo cre铆a que la primera parte era todo esto ![](https://static.platzi.com/media/user_upload/image-01ad6435-3250-4466-8cb8-ffd725646091.jpg) * 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
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.![](https://static.platzi.com/media/user_upload/image-bfd81082-226e-4170-b457-10c19ee85a6d.jpg)Mi soluci贸n es mas extensa a la de teff (100 l铆neas 馃ぃ)pero creo que dentro de todo esta bien .
驴Para una prueba t茅cnica esta bien usar librerias o mejor no usar? en este caso para el formulario yo uso formik y yup.

![](