Sincronización y validación de to-do list con local storage

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:20

Sincronización y validación de to-do list con local storage

Curso de React.js: Patrones de Render y Composición

Clase 16 de 19

Clase 16 / 19

Comentarios (41)41 comentarios

Joseph Manuel Salen Pantoja

Hace 5 años

Con mi solución CSS, busqué crear una Modal para atrapar la absoluta atención del usuario, con un fondo “casi 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. 😄

Juan Castro

Profesor

Hace 5 años

Me encanta :clap:

Julian David Toro Medina

Hace 5 años

Yo hice lo mismo, es lo más cool! 💪

Max Andy Diaz Neyra

Hace 5 años

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

Julian David Toro Medina

Hace 5 años

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 👇

Julian David Toro Medina

Hace 5 años

Está en Portugués porque le tengo agregado soporte de idioma, para Inglés, Español y Portugués! 😁

Reinaldo Mendoza

Hace 5 años

Tremendo, Genio!!

Andrea Viviana Diaz Fonseca

Hace 4 años

Gustavo A. González G.

Hace 4 años

esta genial ese estilo!!!

Hector Rubio

Hace 5 años

Es poco pero es trabajo honesto

Carlos Ponce

Hace 5 años

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.

Juan Castro

Profesor

Hace 5 años

¿Puedo ver cómo lo dejarías?

Isaac Godinez Cortes

Hace 5 años

A mi si me gusto su implementación y supongo que uso el fondo de color negro para hacer notar que sucedio un cambio en la aplicación, por algo el nombre de notificación, puede ser que si es del mismo color del fondo o del mismo color de las tareas, a simple vista podríamos confundirlo con una tarea más y siento que haciendo ese contraste con el color negro a simple vista dices ¡Ah, paso algo!.

Miguel Alvarado

Hace 5 años

Por un momento pensé que diría "Cocinar los gatos" jaja. Menos mal que fueron lentejas.

Gustavo A. González G.

Hace 4 años

Yo no lo hice como un modal, me acordé de como lo hace twitter y me animé a hacerlo así:

Gerardo Castillo

Hace 4 años

Yo hice un modal:

En App() le pase setOpenModal

<ChangeAlertWithStorageListener
        synchronize={synchronizeTodos}
        setOpenModal={setOpenModal}
/>

El Wrapper en la HOC así:

<WrapperComponent
            {...props}
            show={storageChange}
            toggleShow={toggleShow}
/>

Y el componente ChangeAlert recibió setOpenModal en props:

const ChangeAlert = ({ show, toggleShow, setOpenModal }) => {
    const handleClick = () => {
        toggleShow()
        setOpenModal(false)
    }
    if (show) {
        return (
            <>
                <Modal>
                    <ChangeAlertForm onClick={handleClick} />
                </Modal>
            </>
        )
    }
    return null
}

Sebastian Vergara Granda

Hace 4 años

No me gusta lo de preguntarle al usuario si quiere refrescar o no, me gusta mas lo responsivo que se siente la app cuando se actualiza automáticamente por lo que me ideé una solución. Use el useStorageListener como custom Hook en useLocalStorage y asigne el valor de storageChange al useEffect en useLocalStorage como segundo paramentro, de esta forma, cada que haya un cambio en el estado storageChange se va a ejecutar, todo esto me ahorro el ChangeAlert y pasar estados a los demás componentes, y al inicio del useEffect en useLocalStorage se pone setLoading(true) y quedaria funcionando de está manera

Juan Castro

Profesor

Hace 4 años

:clap:

Isaac Hernandez Resendiz

Hace 4 años

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

Andrés Muñoz

Hace 5 años

Vi la solución del profe y tiene 2 clases TodoForm-button TodoForm-button--add estas no están en el archivo css del modulo sino que pertencen a TodoForm.css, porque funcionan en ChangeAlert ? es correcto este comportamiento ?

Juan Castro

Profesor

Hace 5 años

CRA va a agarrar todo el código de los archivos .css que importemos desde componentes de React y los va a incluir en una etiqueta style dentro de tu sitio. Por eso es que esos estilos funcionan también en otros componentes. Pero definitivamente se necesita una organización mucho mejor. ¿Qué tal un curso de patrones de render avanzados?

Andrés Muñoz

Hace 5 años

Estaría genial, al momento en lo que estoy trabajando es en mejorar todo lo que tenga que ver con patrones para volver mi código más modular y tdd. Muchas gracias por la respuesta genial el curso !!

Angel David Contreras Barrios

Hace 4 años

Sigo sin poder ver nada en el navegador, he visto todo el curso así. 😥😥 .

Juan Carlos Montilla Sánchez

Hace 4 años

Hola, Angel.

Nos puedes mostrar tú código para ayudarte con el problema.

Saludos

brayan zamora

Hace 4 años

Es por el warning, tienes la función deleteTodo pero nunca lo usas

Miguel Ángel Sánchez Carvallo

Hace 5 años

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.

Mauricio Flor

Hace 5 años

Esta fue mi solución CSS ![](

adrian Valencia Hernandez

Hace 4 años

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

Reinhard Tristan Ortiz

Hace 4 años

Para el reto de css use el mismo modal de la clase pero modifique el boton para que se viera como uno de recarga:

Para ellos use el caracter "clockwise open circle arrow" en su codigo hex:

HTML:

<button className="SyncTodosButton" onClick={toggleShow}>
	&#x21bb;
</button>

Y le añadi una pequeña animacion para que diera el efecto de que debia ser pulsado, y un efecto de hover.

CSS:

.SyncTodosButton {
    background-color: #61DAFA;
    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 50px;
    font-weight: bold;
    color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 64px;
    transform: rotate(0);
    transition: .5s ease;
    animation: 2s infinite changeAnimation;
}

.SyncTodosButton:hover {
    transform: rotate(360deg);
    animation: none;
}

@keyframes changeAnimation {
    25% {
        box-shadow: 0px 5px 25px 5px rgba(97, 218, 250, 0.5);
        background-color: #59c9e7;
    }
    37.5% {
        box-shadow: 0px 5px 25px 10px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    50% {
        box-shadow: 0px 5px 25px 15px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    62.5% {
        box-shadow: 0px 5px 25px 10px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    75% {
        box-shadow: 0px 5px 25px 5px rgba(97, 218, 250, 0.5);
        background-color: #59c9e7;

    }
    100% {
        box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
        background-color: #61DAFA;

    }
}

Johan Manuel Núñez Rodríguez

Hace 2 años

Mi solución:

Josue Tapia Linarez

Hace 3 años

Ta potente React. Page Code

Alejandro Martinez

Hace 4 años

yo hice una pantalla bien intrusiva como con el modal. Mientras la gente no entre desde inspeccionar y lo borre, no hay problema ![](

Recursos

¿Cómo sincronizar correctamente una aplicación utilizando local storage?

Sincronizar tu aplicación asegurando que funcione fluidamente en varias pestañas puede parecer un reto, pero siguiendo pasos específicos, puedes alcanzar una sincronización efectiva que mejora la experiencia del usuario. Así se muestran alertas al detectar cambios en el local storage y se permite a los usuarios sincronizar la información requerida.

¿Cómo implementar alertas con CSS para distintas acciones?

Crear alertas efectivas no solo se trata de notificaciones, sino también de estética y utilidad. Mediante el uso de CSS, puedes mejorar la apariencia y funcionalidad de las alertas en tu aplicación.

Estilos personalizados: Cambia la estructura de las alertas añadiendo varios divs y párrafos, junto con clases específicamente diseñadas para estas alertas.
CSS y usabilidad: Usa propiedades como z-index y position: fixed para asegurar que la alerta tome prioridad en el diseño de la interfaz. Esto no solo mejora la visualización, sino que también deshabilita la interacción con otros elementos debajo de la alerta.
Ejemplo de CSS aplicado:

.alert-container {
  z-index: 2;
  position: fixed;
  /* más estilos aquí */
}

¿Cómo evitar mostrar datos incorrectos durante la sincronización?

Es crucial evitar mostrar listas que pueden estar desactualizadas mientras los datos se sincronizan. Implementar condiciones claras puede prevenir este problema.

Control de estado de carga: Asegúrate de que no se muestren los to-do lists mientras se está en el estado loading.
Validación múltiple: Solo muestra los resultados si no hay errores (!error) y si no se está cargando (!loading).

Implementación en React

En React, puedes utilizar de manera eficaz los estados y las propiedades para controlar qué se debe mostrar y cuándo.

{!loading && !error && searchToDos.map(todo => (
  <ToDoItem key={todo.id} {...todo} />
))}

Esta implementación asegura que las listas anteriores desaparezcan durante el proceso de carga y aparezcan solo cuando la nueva información se ha sincronizado correctamente.

¿Cómo aplicar cambios y debatir mejoras?

La práctica y el diálogo pueden llevar al perfeccionamiento de tu código. Discute tus implementaciones y considera las sugerencias de otros desarrolladores.

Comentarios y retroalimentación: Comenta qué soluciones implementaste y debate las diferencias o similitudes con otros enfoques en la sección de comentarios.
Exploración continua: El aprendizaje es continuo. En próximos módulos, se explorarán los React Hooks y sus aplicaciones en estos patrones de diseño.

La integración adecuada de técnicas de sincronización y diseño CSS mejora significativamente el rendimiento de la aplicación, ofreciendo un producto más robusto y confiable. Continúa explorando, probando y perfeccionando tu enfoque para enfrentar los desafíos de desarrollo. ¡El conocimiento está a tu alcance!

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

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

const ChangeAlert = ({ show, toggleShow, setOpenModal }) => {
    const handleClick = () => {
        toggleShow()
        setOpenModal(false)
    }
    if (show) {
        return (
            <>
                <Modal>
                    <ChangeAlertForm onClick={handleClick} />
                </Modal>
            </>
        )
    }
    return null
}

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

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

.SyncTodosButton {
    background-color: #61DAFA;
    box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 50px;
    font-weight: bold;
    color: #FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 64px;
    transform: rotate(0);
    transition: .5s ease;
    animation: 2s infinite changeAnimation;
}

.SyncTodosButton:hover {
    transform: rotate(360deg);
    animation: none;
}

@keyframes changeAnimation {
    25% {
        box-shadow: 0px 5px 25px 5px rgba(97, 218, 250, 0.5);
        background-color: #59c9e7;
    }
    37.5% {
        box-shadow: 0px 5px 25px 10px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    50% {
        box-shadow: 0px 5px 25px 15px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    62.5% {
        box-shadow: 0px 5px 25px 10px rgba(97, 218, 250, 0.5);
        background-color: #44b7d6;
    }
    75% {
        box-shadow: 0px 5px 25px 5px rgba(97, 218, 250, 0.5);
        background-color: #59c9e7;

    }
    100% {
        box-shadow: 0px 5px 25px rgba(97, 218, 250, 0.5);
        background-color: #61DAFA;

    }
}

Resumen

¿Cómo sincronizar correctamente una aplicación utilizando local storage?

¿Cómo implementar alertas con CSS para distintas acciones?

Estilos personalizados: Cambia la estructura de las alertas añadiendo varios divs y párrafos, junto con clases específicamente diseñadas para estas alertas.
CSS y usabilidad: Usa propiedades como z-index y position: fixed para asegurar que la alerta tome prioridad en el diseño de la interfaz. Esto no solo mejora la visualización, sino que también deshabilita la interacción con otros elementos debajo de la alerta.
Ejemplo de CSS aplicado:

.alert-container {
  z-index: 2;
  position: fixed;
  /* más estilos aquí */
}

¿Cómo evitar mostrar datos incorrectos durante la sincronización?

Es crucial evitar mostrar listas que pueden estar desactualizadas mientras los datos se sincronizan. Implementar condiciones claras puede prevenir este problema.

Control de estado de carga: Asegúrate de que no se muestren los to-do lists mientras se está en el estado loading.
Validación múltiple: Solo muestra los resultados si no hay errores (!error) y si no se está cargando (!loading).

Implementación en React

En React, puedes utilizar de manera eficaz los estados y las propiedades para controlar qué se debe mostrar y cuándo.

{!loading && !error && searchToDos.map(todo => (
  <ToDoItem key={todo.id} {...todo} />
))}

Esta implementación asegura que las listas anteriores desaparezcan durante el proceso de carga y aparezcan solo cuando la nueva información se ha sincronizado correctamente.

¿Cómo aplicar cambios y debatir mejoras?

La práctica y el diálogo pueden llevar al perfeccionamiento de tu código. Discute tus implementaciones y considera las sugerencias de otros desarrolladores.

Comentarios y retroalimentación: Comenta qué soluciones implementaste y debate las diferencias o similitudes con otros enfoques en la sección de comentarios.
Exploración continua: El aprendizaje es continuo. En próximos módulos, se explorarán los React Hooks y sus aplicaciones en estos patrones de diseño.

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Sincronización y validación de to-do list con local storage

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos