No tienes acceso a esta clase

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

Resolviendo los retos de StorageEventListener

16/19
Recursos

Aportes 12

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Con mi soluci贸n CSS, busqu茅 crear una Modal para atrapar la absoluta atenci贸n del usuario, con un fondo 鈥渃asi rojo鈥 para dar a entender que hay una alerta y un bot贸n que refleja la intenci贸n de la misma, adem谩s mientras la alerta est谩 abierta, el usuario no puede interactuar con el resto de la app. 馃槃

Codigo usado por el profesor:

function ChangeAlert({ show, toggleShow}) {
    if(show){
        return (
            <div className="ChangeAlert-bg">
                <div className="ChangeAlert-container">
                <p>Parece que cambiaste tus TODOs en otra pesta帽a o ventana del navegador.</p>
                <p>驴Quieres sincronizar tus TODOs?</p>
                <button
                    className="TodoForm-button TodoForm-button--add"
                    onClick={toggleShow}
                >
                    Yes!
                </button>
                </div>
            </div>
        );
    } else{
        return null;
    }
}

codigo del css:

.ChangeAlert-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1e1e1f50;
    z-index: 2;
}

.ChangeAlert-container {
    position: fixed;
    bottom: -10px;
    left: -10px;
    right: -10px;
    padding: 34px;
    background-color: #1e1e1f;
    color: #f2f4f5;
    z-index: 2;
    text-align: center;
    font-size: 20px;
}

.ChangeAlert-container button {
    margin-top: 16px;
    margin-bottom: 16px;
}

Muestro c贸mo qued贸 mi modal para alertar a los ususarios. Lo que hice fue crear un estado de ModalType para que permitiera desplegar en el mismo modal usando las mismos estados para modal de antes 馃憞

En lo personal no me gusta que de repente desaparezcan los TODOs, Yo los hice casi inutilizables agreg谩ndoles un Pseudo elemento con css y una opacidad del 25% para dar a entender que no se pueden usar hasta que se carguen los cambios.

Algo que si no me gusto es la notificaci贸n que ti agregaste, me parece que no va concorde al dise帽o de la aplicaci贸n, usar el negro de fondo para el div me parece que hace demasiado contraste, en lo personal prefiero usar el mismo color de fondo de la app.

Por un momento pens茅 que dir铆a 鈥淐ocinar los gatos鈥 jaja. Menos mal que fueron lentejas.

Es poco pero es trabajo honesto

Les muestro como quedo mi mensaje de actualizaci贸n.
![](

lo que yo hice para poder eliminar a la hora de cargar fue hacer una funcion que llame deleteRenderItems a la cual le pase un array vacio ( [ ] ) a la funcion setItems quedando de la siguiente manera.

import React from "react";

function useLocalStorage(itemName, initialValue) {
  const [item, setItems] = React.useState(initialValue);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);
  const [sincronizedItem, setSincronizedItem] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => {
      try {
        const localStorageItem = localStorage.getItem(itemName);
        let parsedItem;

        if (!localStorageItem) {
          localStorage.setItem(itemName, JSON.stringify(initialValue));
          parsedItem = initialValue;
        } else {
          parsedItem = JSON.parse(localStorageItem);
        }
        setItems(parsedItem);
        setLoading(false);
        setSincronizedItem(true);
      } catch (error) {
        setError(error);
      }
    }, 500);
  }, [sincronizedItem]);

  const saveItem = (newItem) => {
    try {
      const stringifiedItem = JSON.stringify(newItem);
      localStorage.setItem(itemName, stringifiedItem);
      setItems(newItem);
    } catch (error) {
      setError(error);
    }
  };
  const sincronizeItem = () => {
    setLoading(true);
    setSincronizedItem(false);
  };
  const deleteRenderItems = () => {
    setItems([]);
  };
  return {
    deleteRenderItems,
    item,
    saveItem,
    loading,
    error,
    sincronizeItem,
  };
}

export { useLocalStorage };

y utilice lo pase por render props a nuestro HOC quedando asi .

import React from "react";

function withStorageListener(WrappedComponent) {
  return function WrappedComponentWithStorageListener(props) {
    const [storageChange, setStorageChange] = React.useState(false);
    window.addEventListener("storage", (change) => {
      if (change.key === "TODOS_V1") {
        console.log("Hubo cambios en TODOS_V1");
        setStorageChange(true);
      }
    });
    const toggleShow = () => {
      props.sincronize();
      setStorageChange(false);
      props.deleteRenderItems();
    };

    return <WrappedComponent show={storageChange} toggleShow={toggleShow} />;
  };
}

export { withStorageListener };

Esta fue mi soluci贸n CSS ![](

Reutilic茅 el div modal para solo integrar un nuevo div con la alerta de refresh. En lo personal pas茅 el synchronizedItem hasta TodoList y utilic茅 ese estado para no mostrar con css la lista, pero creo que la soluci贸n de solo ocupar los estados loading y error son m谩s 贸ptimas.

un peque帽o aporte: En react 18 ya no es necesario el boton de actualizar lo hace automatico

Mi soluci贸n para ocultar la lista fue agregar en el hock de useStorageTodo dentro de la funci贸n sincroniced agregu茅 setTodo([ ])