Kärnfunktion: dataflöde med offline-stöd

// App.tsx
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { queryClient } from './src/services/queryClient';

const asyncStoragePersister = createAsyncStoragePersister({
  storage: AsyncStorage,
  key: 'REACT_QUERY_CACHE',
});

export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: asyncStoragePersister }}
    >
      <AuthProvider>
        <RootNavigator />
      </AuthProvider>
    </PersistQueryClientProvider>
  );
}

// src/hooks/useHabits.ts
import { useQuery } from '@tanstack/react-query';
import { supabase } from '../services/supabase';
import { useAuth } from '../context/AuthContext';
import { Habit } from '../types';

async function fetchHabits(userId: string): Promise<Habit[]> {
  const { data, error } = await supabase
    .from('habits')
    .select('*')
    .eq('user_id', userId)
    .order('created_at', { ascending: true });

  if (error) throw error;
  return data;
}

export function useHabits() {
  const { session } = useAuth();
  const userId = session!.user.id;

  return useQuery({
    queryKey: ['habits', userId],
    queryFn: () => fetchHabits(userId),
    enabled: !!userId,
  });
}

// src/screens/habits/HabitListScreen.tsx
import { FlatList, ActivityIndicator, View, Text } from 'react-native';
import { useHabits } from '../../hooks/useHabits';
import { HabitCard } from '../../components/HabitCard';

export function HabitListScreen() {
  const { data: habits, isLoading, error, refetch } = useHabits();

  if (isLoading && !habits) {
    return <ActivityIndicator style={{ flex: 1 }} />;
  }

  if (error) {
    return (
      <View>
        <Text>Failed to load habits.</Text>
        <Button title='Retry' onPress={() => refetch()} />
      </View>
    );
  }

  return (
    <FlatList
      data={habits}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <HabitCard habit={item} />}
      onRefresh={refetch}
      refreshing={isLoading}
    />
  );
}

// src/hooks/useCreateHabit.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { supabase } from '../services/supabase';
import { useAuth } from '../context/AuthContext';

export function useCreateHabit() {
  const queryClient = useQueryClient();
  const { session } = useAuth();
  const userId = session!.user.id;

  return useMutation({
    mutationFn: async ({ name, icon, color }) => {
      const { error } = await supabase.from('habits').insert({
        user_id: userId,
        name,
        icon,
        color,
      });
      if (error) throw error;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['habits', userId] });
    },
    onError: (error) => {
      Alert.alert('Error', error.message);
    },
  });
}

// Optimistic update pattern with useMutation
const toggleCompletion = useMutation({
  mutationFn: (habitId) => insertCompletion(habitId, today),

  onMutate: async (habitId) => {
    // Cancel in-flight refetches
    await queryClient.cancelQueries({ queryKey: ['completions', userId] });

    // Save snapshot for rollback
    const previous = queryClient.getQueryData(['completions', userId]);

    // Optimistically add completion
    queryClient.setQueryData(['completions', userId], (old) => [
      ...old,
      { habit_id: habitId, completed_date: today }
    ]);

    return { previous }; // Pass snapshot to onError
  },

  onError: (_err, _habitId, context) => {
    // Roll back on failure
    queryClient.setQueryData(['completions', userId], context.previous);
  },

  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['completions', userId] });
  },
});

import NetInfo from '@react-native-community/netinfo';
import { useEffect, useState } from 'react';

export function OfflineBanner() {
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setIsOffline(!state.isConnected);
    });
    return unsubscribe;
  }, []);

  if (!isOffline) return null;

  return (
    <View style={{
      backgroundColor: '#FF3B30',
      padding: 8,
      alignItems: 'center'
    }}>
      <Text style={{ color: 'white', fontWeight: 'bold' }}>
        No internet connection — changes will sync when online
      </Text>
    </View>
  );
}

import { useInfiniteQuery } from '@tanstack/react-query';

export function useHabitsPaginated() {
  return useInfiniteQuery({
    queryKey: ['habits', 'paginated'],
    queryFn: ({ pageParam = 0 }) =>
      supabase.from('habits').select('*')
        .range(pageParam, pageParam + 19),  // 20 per page
    getNextPageParam: (lastPage, allPages) => {
      const nextOffset = allPages.length * 20;
      return lastPage.data?.length === 20 ? nextOffset : undefined;
    },
    initialPageParam: 0,
  });
}

// In screen:
const { data, fetchNextPage, hasNextPage } = useHabitsPaginated();
const habits = data?.pages.flatMap(p => p.data) ?? [];

<FlatList
  data={habits}
  onEndReached={() => hasNextPage && fetchNextPage()}
  onEndReachedThreshold={0.3}
/>

import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

export function AnimatedListItem({ children, index }) {
  const opacity = useRef(new Animated.Value(0)).current;
  const translateY = useRef(new Animated.Value(20)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 300,
        delay: index * 50,  // Stagger by index
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 300,
        delay: index * 50,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  return (
    <Animated.View style={{ opacity, transform: [{ translateY }] }}>
      {children}
    </Animated.View>
  );
}

// src/utils/streaks.ts
export function calculateStreak(completedDates: string[]): number {
  if (completedDates.length === 0) return 0;

  const sorted = [...completedDates].sort().reverse();
  const today = new Date().toISOString().split('T')[0];

  let streak = 0;
  let current = new Date(today);

  for (const dateStr of sorted) {
    const expected = current.toISOString().split('T')[0];
    if (dateStr === expected) {
      streak++;
      current.setDate(current.getDate() - 1);
    } else if (dateStr < expected) {
      break; // Gap found
    }
  }

  return streak;
}

// Usage:
const streak = calculateStreak(
  completions
    .filter(c => c.habit_id === habit.id)
    .map(c => c.completed_date)
);