AsyncStorage context para persistir hábitos

La persistencia de datos cambia por completo la experiencia: ahora tus hábitos se guardan en el asset storage/assing storage y aparecen en el home incluso después de cerrar la app. Con un context y un provider bien definidos, compartes estados, cargas y acciones como addHabit y toggle habit en toda la aplicación.

¿Cómo lograr persistencia con context y provider?

Para guardar y reutilizar datos, se centraliza el estado en un provider que expone el valor del context y envuelve la UI con sus children. Así, cualquier pantalla accede a los hábitos cargados desde el asset storage/assing storage.

• Crear el valor del context: estados, carga y acciones compartidas.
• Retornar un React node: usando el HabitsContext.Provider con value y children.
• Exportar un hook reusable: useHabits con useContext para consumir el context.
• Validación del hook: si no hay context, lanzar error con un mensaje claro.

import React, { createContext, useContext } from 'react';

const HabitsContext = createContext<any>(null);

export function HabitsProvider({ children }: { children: React.ReactNode }) {
  const value = {
    loading: false,
    habits: [],
    addHabit: (h: any) => {},
    toggleHabit: (id: string) => {},
    saveTimer: (): number => 250, // mismo tipo de dato: number.
  };

  return (
    <HabitsContext.Provider value={value}>
      {children}
    </HabitsContext.Provider>
  );
}

export function useHabits() {
  const ctx = useContext(HabitsContext);
  if (!ctx) throw new Error('useHabits debe usarse dentro de HabitsProvider');
  return ctx;
}

¿Qué tipos y nombres mantener consistentes?

• Mismo tipo de dato: ajustar el save timer a tipo number si retorna 250.
• Nombres del contexto: usar el mismo nombre en la creación y en useContext.
• Exportaciones claras: el useHabits debe retornar todo el context (ctx).

¿Qué ventajas da mover la lógica al provider?

• Un solo origen de verdad: sin duplicar toggle y add en el home.
• Estados compartidos: loading, habits y acciones disponibles en todas las vistas.
• Reutilización: el useHabits evita props innecesarias.

¿Cómo integrar el HabitsProvider en el stack y el home?

Para que toda la app consuma la funcionalidad, el provider envuelve el árbol principal (por ejemplo, las tabs). Así, cualquier pantalla, incluido el home, puede usar el context.

// Estructura del stack/tabs
<HabitsProvider>
  <Tabs />
</HabitsProvider>

¿Cómo consumir el estado con useHabits en home?

• Importar desde el context: loading, habits y addHabit.
• Reemplazar la función local de agregar por un onAdd con useCallback.
• Usar el título como identificador, validar vacío y limpiar el estado local.

const { loading, habits, addHabit, toggleHabit } = useHabits();

const onAdd = React.useCallback((title: string) => {
  if (!title) return;
  addHabit({ id: title, title });
  setNewTitle(''); // limpiar el estado local del input.
}, [addHabit]);

¿Cómo renderizar hábitos con el context?

• Usar la lista de habits en lugar de items.
• Reemplazar el toggle local por toggle habit del context.
• Adaptar el render item y prescindir del key extractor si ya se gestiona por dentro.
• Mostrar texto condicional si loading es verdadero.

¿Qué validaciones y utilidades completan la experiencia?

El flujo se ajusta para soportar hábitos diarios, rachas y limpieza de datos cuando sea necesario.

• Verificar el mismo día: función para confirmar que el completado corresponde a hoy.
• Filtrar completados: usar habits para calcular los completados del día.
• Racha visible: al completar, la racha aumenta y se refleja en la UI.
• Limpieza de memoria: botón que hace un clear del assing storage para empezar desde cero.

// Botón para limpiar almacenamiento
<Button title="Limpiar" onPress={() => assingStorage.clear()} />

• Importaciones correctas: agregar manualmente los imports del botón y el text donde aplique.
• Conectar la tarjeta: la Habit card debe depender del context para leer/escribir estado.
• Pruebas en dispositivo: recargar en Expo Go para validar persistencia y el reset.

¿Te gustaría que el home añadiera hábitos desde el Explorer con sugerencias? Cuéntame qué parte quieres ver primero o qué reto te gustaría implementar a continuación.