Generación de IDs únicos para gestionar tareas en React

¿Cómo cambiar la lógica de su aplicación de tareas?

Para crear una aplicación robusta de tareas (Tudus) y permitir futuras funcionalidades como la edición de tareas mediante rutas únicas, es esencial alejarse de identificarlas por su texto y empezar a usarlas por su ID. En esta guía, descubre cómo transformar tu aplicación para lograrlo usando hooks personalizados en React.

¿Por qué es necesaria la identificación por ID en las tareas?

El uso de un ID único para cada tarea permite:

• Facilidad de edición: La modificación del texto no altera el identificador.
• URL amigables: Las rutas pueden usar IDs para referenciar tareas específicas sin importar cambios en el texto.
• Estructuras de datos coherentes: Al versionar tus estructuras de datos, puedes acomodar futuras actualizaciones sin generar errores en versiones anteriores.

¿Cómo integrar un sistema de generación de IDs?

Para implementar un generador de IDs en tu hook customizado useTudus, sigue estos pasos:

1. Crear un generador de IDs: Al crear un todo, genera un ID nuevo utilizando la lista de tareas existentes.

   const newTuduID = (tuduList) => {
     if (!tuduList || tuduList.length === 0) {
       return 1;
     }
     const idList = tuduList.map(tudu => tudu.id);
     const maxID = Math.max(...idList);
     return maxID + 1;
   };
   

2. Al añadir una nueva tarea: Usa la función newTuduID para asignar un ID único a cada nuevo todo.

   const addTudu = (text) => {
     const id = newTuduID(tudus);
     const newTudu = { text, completed: false, id };
     setTudus([...tudus, newTudu]);
   };
   

3. Actualizar las funciones de completar y borrar tareas: Cambia el reconocimiento de tareas por texto a ID.

   const completeTudu = (id) => {
     const index = tudus.findIndex(tudu => tudu.id === id);
     if (index !== -1) {
       const newTudus = [...tudus];
       newTudus[index].completed = !newTudus[index].completed;
       setTudus(newTudus);
     }
   };
   
   const deleteTudu = (id) => {
     setTudus(tudus.filter(tudu => tudu.id !== id));
   };
   

¿Cómo gestionar el almacenamiento local?

Introduce un sistema de versionado que permita controlar diferentes estructuras de datos en el local storage:

• Versionado: Cambia la key del local storage cuando actualices la estructura de datos.

  const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
      try {
        const item = window.localStorage.getItem(key);
        return item ? JSON.parse(item) : initialValue;
      } catch (error) {
        return initialValue;
      }
    });
  
    const setValue = (value) => {
      try {
        setStoredValue(value);
        window.localStorage.setItem(key, JSON.stringify(value));
      } catch (error) {
        console.error(error);
      }
    };
  
    return [storedValue, setValue];
  };
  
  const [tudus, setTudus] = useLocalStorage('tudus-version2', []);
  

¿Qué actualizaciones realizar en el frontend?

Asegúrate de actualizar el frontend para reflejar los cambios en la estructura de datos:

• Cambia las references en cada componente para usar tudu.id en lugar de tudu.text.
• Ajusta las claves únicas (keys) en listas y componentes de React a tudu.id.

¿Por qué no utilizar identificadores alternativos en JavaScript?

Aunque existen librerías como UUID o generadores de JavaScript para crear IDs, un enfoque basado en el valor máximo adicionando uno garantiza simplicidad y eficacia. Esto es particularmente útil si el número máximo de tareas no es extenso.

Invítate a explorar, experimentar e implementar estos cambios en tu aplicación de tareas. Recuerda siempre probar las modificaciones y velar por la consistencia en todos los componentes de tu aplicación. ¡Mantente motivado y continúa aprendiendo y mejorando tu código!